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

项目9

项冒导读

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

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

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

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

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

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

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

学习目标

内容概览

CSS3常见布局形式

·单列和双列布局

·三列布局

·弹性伸缩盒

9.1.1单列和双列布局

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

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

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

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

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

header页眉/header

main

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

/main

footer页脚/footer

创建HTML5文档，在body标签中输入以下代码，标记页道

的容器标签。

在head标签中添加style标签，在其中输入代码(详情见教材),使用定位属性设置各容器的位置，构建双列布局。

步骤1

三列布局是指同时有两列侧边栏的布局形式。要使用定位属性实现三列布局，可在例9-1的基础上分别设置左、中、右3个

模块绝对定位的左侧(或右侧)偏移量为0%、15%和85%(以两侧侧边栏宽度各占父元素的15%为例)。

使用浮动属性实现三列布局时，可直接设置各模块一同向左或向右浮动。但使用这种方法构建的布局不够稳定，在实际应用中，可通过设置外边距属性或将两个侧边栏模块分别向左和向右浮动来固定侧边栏的位置。

9.1.2三列布局

使用浮动属性构建较为稳定的三列布局，页面效果如下图9-2所示。

header页眉/header

main

asideclass=left左侧侧边栏/asideasideclass=right右侧侧边栏/asidediv主体部分/div

/main

footer页脚/footer

创建HTML5文档，在body标签中输入以下代码，构建三列布局的结构。

在head标签中添加style标签，在其中输入代码(详情见教材),通过设置浮动与外边距属性构建三列布局。

步骤2

9.1.3弹性伸缩盒

除前面介绍的几种整体布局形式外，CSS3中还有一种常用于局部布局的盒子模型，

称为弹性伸缩盒。使用弹性伸缩盒构建布局的方式叫作弹性伸缩盒布局(flex布局),它把父元素转换为具有弹性的伸缩盒，将未知大小的子元素以各种形式分布在父元素中，

是一种比较简便、灵活的布局方式。

在CSS3中，使用display属性可将元素设置为伸缩盒，具体格式为：

display:flexlinline-flex;

O拓展阅读

其中，flex表示最新版本的伸缩盒，inline-flex表示最新版本的行内伸缩盒。伸缩盒的默认宽度为100%,而行内伸缩盒的宽度取决于其子元素。

弹性伸缩盒一直在不断发展，它的发展历程可大致分为3个阶段，分别为老版本阶段、过

渡版本阶段与最新版本阶段。2009年的版本为老版本，display属性值为box与inline-box;201

年的版本为过渡版本，display属性值为flexbox与inline-flexbox;2012年的版本为最新版本。

创建HTML5文档，参照以下代码段分别在style和body标签中输入代码

(详情见教材),设置容器元素为弹性伸缩盒，使其块级子元素显示在一行中。

2

【9-]hmlX十

c①文件|D:/寓例与素材/项目9/【例9-3】html☆8

【例9-3】使用弹性伸缩盒布局将块级元素显示在一行中，页面效果如下图9-3所示。

弹性伸缩盒内的块级元

素默认自左向右排列

box1box2box3box4box5

1.flex布局结构

伸缩容器与伸