HTML5前端第七章节

本章节为前端网页页面实战，包含我们之前所学的全部内容

一.创建项目目录

1.网站根目录：

网站根目录指的是存放网站的第一层文件夹，内部包含当前网站的所有素材，包含HTML，CSS，需要的素材图片等等

2.根目录之下的文件夹

（1）.images文件夹：

存放固定使用的图片素材

（2）.uploads文件夹：

存放非固定使用的图片素材

（3）.CSS文件夹：

存放CSS文件（使用link标签引入）

在CSS文件夹中又分为base.css（基础公共样式，用于清除默认样式和设置等等）和index.css（设置首页的CSS样式）

（4）.index.html：

首页HTML文件

二.网页制作思路

1.布局思路:

先整体再局部,从外到内,从上到下,从左到右

2.CSS实现思路:

(1).画盒子,调整盒子的范围(设置宽高背景色等等)

(2).调整盒子的位置(flex布局,内外边距等等)

(3).控制图片,文字内容等的样式

三.header区域制作

1.logo制作技巧:

(1).logo功能:

①:单击跳转到首页

②:搜索引擎优化:提升网站百度搜索排名

(2).实现方法:

①:标签结构:h1>a>网站名称(搜索关键字)

②:对CSS样式进行设置

2.导航制作技巧

(1).导航功能:

①:单击跳转页面

(2).实现方法:

①:标签结构:ul>li>a

②:优势:避免堆砌a标签,网站搜索排名降级

(3).布局思路:

①:li标签设置右侧margin

②:a标签设置左右padding

3.搜索区域制作技巧

（1）.实现方法：

①：标签结构：.search>input+a / button

4.用户区域制作技巧

（1）.实现方法：

①：标签结构：.user>a>img + span

四.banner区域制作

1.结构:

通栏banner>版心>.left + .right

2.左侧

(1).实现方法:

①:标签结构:.left>ul>li * 9>a

②:布局思路:

a的默认状态:背景图为白色右箭头

3.右侧

（1）.实现方法：

①：标签结构：.right>h3+.content

五.recommend区域制作：

1.实现方法：

①：标签结构：.recommend>h3+ul+a.modify

②：布局思路：flex布局

六.course区域制作：

1.实现方法：

①：标签结构：.hd+.bd

②：布局思路：盒子模型