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

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

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

![](projImg/loginPage.png)

### 4，main主页面

### 5，register.htm页面

张**/前端教学项目

简介

发行版

贡献者

近期动态

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

简介

发行版

贡献者

近期动态

搜索帮助

张**/前端教学项目