《HTML5+CSS3项目开发案例教程》 项目九 CSS3布局.pptxVIP

项目9

项冒导读

所谓布局，就是设置网页中各模块及模块中各元素的位置，它是

网页制作的基础。本项目将介绍使用CSS3构建各种形式网页布局的方

法，以及使网页适配移动端的方法。

◆掌握使用CSS3构建单列和双列布局的方法。

◆掌握使用CSS3构建三列布局的方法。

◆掌握使用CSS3的弹性伸缩盒构建局部布局的方法。

◆掌握使网页适配移动端的方法。

学习目标

内容概览

CSS3常见布局形式

·单列和双列布局

·三列布局

·弹性伸缩盒

9.1.1单列和双列布局

小型企业宣传网站一般使用简单的单列布局，构建这种布局形式只需按照标准文档

流的顺序添加容器标签即可，必要时可通过将个别容器标签左右外边距属性值设置为auto,使其居中显示。

双列布局一般是指带有左侧或右侧侧边栏的布局形式。构建这种布局形式可以通过设置浮动属性，使主体部分与侧边栏一个向左浮动一个向右浮动来实现。此外，也可以通过设置定位属性实现。

【例9-1】使用定位属性构建双列布局，页面效果如下图9-1所示。

提示：使用定位属性构建的页面结构更加稳定，但是在使用定位属性构建页面布局时，页眉页脚之间的中心区域必须设置高度，否则它的背景属性及其下方的页面元素都将无法显示。

header页眉/header

main

aside侧边栏/asidediv主体部分/div

/main

footer