[HTML]Web前端开发技术11（HTML5、CSS3、JavaScript ）页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页

---

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

页面布局设计

“三行模式”或“三列模式”

“三行二列”、“三行三列”模式

多行多列复杂模式

导航菜单设计

一级水平导航菜单

二级水平导航菜单

课后练习

网页标题：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。
  • 

---

• 网页标题：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，在页面水平居中对齐；
• 

---

• 网页标题：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，在页面水平居中对齐；
• 

---

• 网页标题：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；
• 

---

•  网页标题：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；

---

总结

    本章主要分析了常见的网站页面布局模式，给出每类模式的DIV结构设计和CSS文件编写方法。

    通过图层div合理地嵌套帮助初学者建立页面布局的概念，掌握常用页面布局结构编程方法。学会运用CSS样式文件来定义特定对象的样式，使所设计的网站页面能够尽量美观、漂亮，增加用户的体验。

    在进行样式定义时候，最好能够学会使用浏览器兼容性测试工具来检查自己所编写的CSS规则，实现在不同浏览器上显示相同的页面效果。

佬佬一定要自己去敲一敲，真的超赞的！

---

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！