前端教学项目 ——基于HTML5、CSS3及原生javascript的博客网站前端的设计与实现 项目介绍 该项目是基于HTML5、CSS3及原生javascript的教学项目，该项目将适配chrome66+或firefox61+版本的浏览器。 不兼容早期的浏览器版本和IE等浏览器。该项目将以任务细分的方式，逐个完成。

软件架构 HTML5、CSS3及原生javascript

使用说明 可以根据以下的任务列表，同时依据源代码，追溯项目一步一步完成的过程。

前置任务列表 1，学习使用VSCode IDE 2，下载并使用live-server 下载并安装node.js，npm是node.js的包管理器。

利用npm下载live-sever，如下：

npm install -g live-server 在VS Code中下载live-sever的插件，搜索关键字为：live-server

3，在VS Code中使用git 在windows中安装git，掌握利用VS Code的图形界面或DOS命令行进行git操作。

4，建立基本的文档结构 frontEndProject img目录 css目录 js目录 views目录 index.html文件 项目细分任务列表 1，创建cssSelector.html文件 在学习中将所有的例子应用全部放入cssSelector.html文件中，使该文件包含大量的标签。以备之后建立标签选择器之用。

2，创建login.html文件 1，在index.html文件中建立向login.html文件的转向。

2，利用原型绘制软件，绘制登录页面的大致原型，对要完成的界面做到心中有数。

登录页面原型设计图

3，login.html文件的基本需求： 创建块级元素，并在其中建立用户名、密码文本以其对应的文本框，建立按钮（建议使用button标签） 使用CSS对登录块进行美化 建立水平、垂直居中 创建登录失败信息显示框

3，login.html文件进阶 1，利用background属性为login.html文件增角标 2，为居中的盒子增加阴影；为盒子添加圆角。 3，为盒子新增cookie选择，并且设置cookie选择为可隐藏。也需要精灵图。

login.html页面的具体完成情况如下：

4，main主页面布局任务 1，使用float、flex或grid布局技术，给blog网站的主页面（main.html）布局。

2，布局要求：

要包含一个完整的logo界面。 要包含一个横向菜单组件，菜单项目包括：主页、写博客、文章分类、设置。 要包含一个竖向菜单组件，包含一二级的文章分类列表 要包含一个用户登录/用户信息介绍组件。 要包含一个主面显示组件。 还包含一些杂项，比如：点击排行榜、点赞排行榜... 具体的布局可以自己掌握。总之，我们需要的是一张网页类的主页页面。 3，以上布局要求，以原型图和html页面的的形式提交到远程仓库。

主页面布局可以按自己的想法进行，以下给出参考布局。

5，设计标准的表格页面 任务1，使用table相关标签和相应的CSS属性，设计通过用的标准表格。要求：

1，要包括CRUD操作按钮。

2，专门的查询界面（必要时可以升级为即席查询）。

3，要包括分页组件。

注意：table标签不能设置任何属性，所有表格的外观全部由CSS设置。

如图：

任务2，利用新学的CSS伪类，为表格进行美化。主要包括：隔行变色、悬浮变色等。

6，支线任务 对CSS选择器列表中的每一行的选择器都进行代码验证，代码全部集中到cssSelector.html文件中备用。

7，main.html页面的菜单任务 完成顶部主菜单和左侧文章类型菜单。

1，顶部主菜单任务

1，利用ul-li标签组合完成基本架构搭建

2，利用float属性将列表方向由竖向改为横向

3，利用选择器伪类完成菜单分隔线、鼠标悬浮效果。

4，利用background-position属性给每个菜单一个前置图片。

完成图如下：

2，左侧文章类型菜单任务

###8，在已经完成的页面加入语义标签

加入语义标签的目的，是增强搜索引擎有好性

任务1，在login.html页面中，为form表单及表单中的文本框、密码框和复选框追加语义标签，并根据需要修改原有设计。

用户登录 用户名：
密   码：
登录 9，register.htm页面