README.md · 孔祥涛/前端教学项目

# 前端教学项目
# ——基于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，利用原型绘制软件，绘制登录页面的大致原型，对要完成的界面做到心中有数。

![登录页面原型设计图](/projImg/loginPage_prototype.png)

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

### 3，login.html文件进阶

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

![](projImg/loginPage.png)

### 4，main主页面布局任务

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

2，布局要求：

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

3，以上布局要求，以原型图和html页面的的形式提交到远程仓库。

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

![](/projImg/mainPage_prototype.png)

### 5，设计标准的表格页面

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

1，要包括CRUD操作按钮。

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

3，要包括分页组件。

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

如图：

![](projImg/simpleTable.png)

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

### 6，支线任务

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

### 7，main.html页面的菜单任务

完成顶部主菜单和左侧文章类型菜单。

#### 1，顶部主菜单任务

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

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

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

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

完成图如下：

![](projImg/topMenu.png)

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

### 8，register.htm页面

孔祥涛/前端教学项目

简介

发行版

贡献者

近期动态

孔祥涛/前端教学项目 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

孔祥涛/前端教学项目