前端教学项目

——基于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，register.htm页面