希望你开心，希望你健康，希望你幸福，希望你点赞！
最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！
喵喵喵，你对我真的很重要！
目录
前言
页面布局设计
“三行模式”或“三列模式”
“三行二列”、“三行三列”模式
多行多列复杂模式
导航菜单设计
一级水平导航菜单
二级水平导航菜单
课后练习
网页标题：1行1列
网页标题：3行1列
网页标题：1行2列
网页标题：3行2列
网页标题：4行3列
总结
前言
熟练地使用DIV标记的CSS各类属性。
掌握CSS定义与引用方法，学会使用外部样式表定义页面样式。
熟悉各类常见的页面布局类型，能够写出相应的DIV结构及CSS规则。
学会使用DIV+CSS进行页面布局，能够编写HTML代码和CSS文件。
页面布局设计
现在所有的主流的、大型的IT企业的网站布局几乎都采用DIV、CSS技术，有些甚至采用DIV、CSS、表格混合进行页面布局。此类页面布局能够实现页面内容与表现的分离，提高网站访问速度、节省宽带、改善了用户的体验。
CSS布局的步骤大致为：首先整体上对页面进行分块，接着按照分块设计使用div标记，并理清div标记的嵌套和层叠关系，然后对各div标记进行CSS定位，最后在各个分块中添加相应的内容。
“三行模式”或“三列模式”
此模式特点是把整个页面水平、垂直分成三个区域，其中“三行模式”将页面头部、主体及页脚三部分；“三列模式”将页面分成左、中、右三个部分。分别进行DIV分区设计，写出DIV结构代码和CSS样式文件。
“三行二列”、“三行三列”模式
此模式特点是先将整个页面水平分成三个区域，再将中间区域分成两列或三列。分别进行DIV分区设计，写出DIV结构代码和CSS样式文件。
多行多列复杂模式
导航菜单设计
导航菜单是网站重要的组成部分。设计一个优秀的页面导航菜单会给网站增色不少。作为一名Web前端开发工程师必须掌握传统的网站导航菜单设计技巧，同时也需要学习响应式导航菜单的设计方法。
网站菜单表现形式丰富多样。从菜单层次上看，可以分为一级、二级和多级菜单。从排列方式上看，可分为水平导航、垂直导航菜单。从技术实现角度上看，导航菜单通常采用无序列表、表格、超链接和样式表相结合的方法来实现，也可以使用如CSS3 Menu、jQuery等第三方插件等技术来实现。
一级水平导航菜单
二级水平导航菜单
这些猫猫会放在课后练习配对，喵~
课后练习
网页标题：1行1列
- 网页的主体部分代码为：
- 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style1.css
@charset "utf-8";/* CSS Document */*{margin:0;padding:0;}#container{width:1000px;height:500px;margin:0 auto;background-color:#6cf;}- 并设置如下样式：
- 清除浏览器的默认值
- container设置样式为：宽1000px，高500px，在页面水平居中对齐，背景颜色#6cf。
1行1列
网页标题：3行1列
- 网页的主体部分代码为：
- 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style2.css
@charset "utf-8";/* CSS Document */*{margin:0;padding:0;}body{font-size:14px;font-family:"微软雅黑";}#container{width:900px;margin:0 auto;}#header{height:100px;background-color:#6cf;margin-bottom:5px;}#main{height:500px;background-color:#cff;margin-bottom:5px;}#footer{height:60px;background-color:#6cf;}- 并设置如下样式：
- 清除浏览器的默认值
- 网页字体：“微软雅黑”，14px
- container设置样式为：宽900px，在页面水平居中对齐；
3行1列
网页标题：1行2列
- 网页的主体部分代码为：
- 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style3.css
@charset "utf-8";/* CSS Document */*{margin:0;padding:0;}body{font-size:14px;font-family:"微软雅黑";}#container{width:900px;margin:0 auto;}#aside{width:200px;height:500px;background-color:#6cf;float:left;}#content{width:695px;height:500px;background-color:#cff;float:right;}- 并设置如下样式：
- 清除浏览器的默认值
- 网页字体：“微软雅黑”，14px
- container设置样式为：宽900px，在页面水平居中对齐；
1行2列
网页标题：3行2列
- 网页的主体部分代码为：
- 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style4.css
@charset "utf-8";/* CSS Document */*{margin:0;padding:0;}body{font-size:14px;font-family:"微软雅黑";}#container{width:900px;margin:0 auto;}#header{height:100px;background-color:#6cf;margin-bottom:5px;}#main{height:500px;margin-bottom:5px;}#aside{width:200px;height:500px;background-color:#6cf;float:left;}#content{width:695px;height:500px;background-color:#cff;float:right;}#footer{height:60px;background-color:#6cf;}- 并设置如下样式：
- 清除浏览器的默认值
- 网页字体：“微软雅黑”，14px
- container设置样式为：宽900px，在页面水平居中对齐；
- main设置样式为：高500px，下外边距5px；
3行2列
网页标题：4行3列
- 网页的主体部分代码自行完善
- 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style5.css
@charset "utf-8";/* CSS Document */*{margin:0;padding:0;}body{font-size:14px;font-family:"微软雅黑";}#container{width:900px;margin:0 auto;}#header{height:100px;background-color:#6cf;margin-bottom:5px;}#nav{height:30px;background-color:#09c;margin-bottom:5px;}#main{height:500px;margin-bottom:5px;}#aside{width:100px;height:500px;background-color:#6cf;margin-left:5px;float:left;}#aside1{width:100px;height:500px;background-color:#6cf;float:left;}#content{width:690px;height:500px;background-color:#cff;margin-left:5px;float:left;}#footer{height:60px;background-color:#6cf;}- 并设置如下样式：
- 清除浏览器的默认值
- 网页字体：“微软雅黑”，14px
- container设置样式为：宽900px，在页面水平居中对齐；
main设置样式为：高500px，下外边距5px；
4行3列 总结
本章主要分析了常见的网站页面布局模式，给出每类模式的DIV结构设计和CSS文件编写方法。
通过图层div合理地嵌套帮助初学者建立页面布局的概念，掌握常用页面布局结构编程方法。学会运用CSS样式文件来定义特定对象的样式，使所设计的网站页面能够尽量美观、漂亮，增加用户的体验。
在进行样式定义时候，最好能够学会使用浏览器兼容性测试工具来检查自己所编写的CSS规则，实现在不同浏览器上显示相同的页面效果。
佬佬一定要自己去敲一敲，真的超赞的！
希望你开心，希望你健康，希望你幸福，希望你点赞！
最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！
喵喵喵，你对我真的很重要！
