项目五_任务四_常用的DIV布局方式.PPT

任务流程 在DIV+CSS布局中，通过“方框”中的“边界”属性控制DIV左、右两个方向的外边距来实现水平居中。 “边界”属性可以直接使用数值，也可以设定为“自动”，即浏览器自动判断边距。 当DIV的左、右边界设置为“自动”时，浏览器就会将DIV的左、右边距设为相等的值，从而实现居中效果。 任务流程 要实现DIV的水平方向排列，必须使用到DIV的“浮动”属性，“浮动”属性是DIV+CSS布局中非常强大的功能。在CSS中，任何元素都能以浮动的方式显示，它可以使排版更加简单，易控制。 在网页中顺序插入的两个DIV，即使设置了合适的宽度值，仍然还要保持在垂直方向上的线性排列。如果需要在水平方向进行排列，就需要设置两者的浮动方式。当两上DIV的“浮动”属性均为“左对齐”时，它们就会靠在一起水平排列。 任务流程 使用浮动定位方式，可以实现从一列到多列的固定宽度。如果需要几个DIV水平方向排列且居中显示，可以使用DIV的嵌套形式设计。先用一个居中的DIV作为容器，再将几个DIV水平排列放置在容器中，从而实现几列固定宽度并居中显示。 电子商务网页制作 常用的DIV布局方式 学习目标 知识目标： 能理解DIV常用的几种布局方式。 能力目标： 能掌握DIV的单列、两列、多列排列方式。 一、一列固定宽度居中 二、两列固定宽度 三、多列并排 课后练习 1．单项选择 一个DIV的浮动方式设置成“左对齐”，紧跟其后的一个DIV其浮动方式也为“左对齐”，则（ ）。 A)两个DIV重叠在左边对齐。 B）后一个DIV紧靠前一个DIV，一左一右水平并排。 C）排列方式混乱，最终是一上－下排列。 D）两个DIV自动一左一右水平排列，但两者中间可能会分开。 课后练习 2．填空 使用_________定位方式，可以实现从一列到多列的固定宽度。