本章节为前端网页页面实战，包罗我们之前所学的全部内容
一.创建项目目次
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
②：布局思路：盒子模型
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
