网页设计与制作教程Web前端开发（第7版）课件：CSS3的盒模型-CSS基本布局样式.pptx

CSS布局就是HTML网页通过div标签+CSS样式表代码设计制作的HTML网页的统称。使用DIV+CSS布局的优点是便于维护，有利seo，网页打开速度快，符合Web标准等。CSS3的盒模型CSS基本布局样式

目录CSS的盒模型6.1CSS盒模型的组成和大小6.2CSS盒模型的属性6.3CSS布局属性6.4CSS盒子定位属性 6.5CSS3多列属性6.6CSS基本布局样式 6.7实训——制作社区网网页6.8练习

6.6CSS基本布局样式6.6.1CSS布局类型1.固定布局（fixedlayout）2.宽度自适应布局3.自适应式布局4.响应式布局（responsivelayout）

6.6CSS基本布局样式6.6.2CSS布局样式1.一栏（列）布局样式【例6-25】一栏布局样式，对于第一种，先通过对header、content、footer统一设置width:960px;或者max-width：960px（这两者的区别是当屏幕小于960px时，前者会出现滚动条，后者则不会，显示出实际宽度），然后设置margin:auto实现居中即可得到，如图6-36所示。布局元素采用HTML5中新增的语义元素，代码如下。

6.6CSS基本布局样式

6.6CSS基本布局样式!DOCTYPEhtmlhtmlheadmetacharset=utf-8title一栏布局/titlestyletype=text/cssheader{/*头部区域*/margin:0auto;/*左右设为auto，是为了在页面内居中*/max-width:960px;/*固定宽度*/height:100px;/*固定高度*/background-color:#ADB96E;}nav{/*导航区域*/margin:10pxauto;/*区域之间的间隔,如果不需要间隔可设置为0*/max-width:960px;height:30px;background-color:#99CC33;}article{/*主要内容区域*/margin:10pxauto;max-width:960px;height:400px;background-color:#FFAAFF;}footer{/*脚注区域*/margin:10pxauto;max-width:960px;height:100px;background-color:#ADB96E;}/style/headbodyheader头部区域/headernav导航区域/navarticle主要内容区域/articlefooter脚注区域/footer/body/html

6.6CSS基本布局样式【例6-26】一栏（通栏）布局样式，对于第二种，header、footer的内容宽度不设置，块级元素充满整个屏幕，但header、content和footer的内容区设置同一个width，并通过margin:auto实现居中，如图6-37所示。代码如下。

6.6CSS基本布局样式!DOCTYPEhtmlhtmlheadmetacharset=utf-8title一栏布局(通栏)/titlestyletype=text/css.header{margin:0auto;max-width:1600px;height:100px;background-color:#ADB96E;}.nav{margin:0auto;/*设置为10px则区域之间出现间隔*/max-width:960px;background-color:#99CC33;height:30px;}.content{margin:0auto;max-width:960px;height:400px;background-colo