本章节为前端网页页面实战，包含我们之前所学的全部内容
一.创建项目目录
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
②：布局思路：盒子模型
