商务网页第19课课件.pptx

1、4.6 采用DIV与SPAN制作网页l 网页布局中，经常会遇到块级元素和内联元素，它们对页面布局有很大的影响。只有了解掌握了块级元素和内联元素，才能真正掌握网页布局技术。4.6.1 块级元素与内联元素块级元素显示的是一个矩形框，一个块级元素单独占据一行，与相邻的块级元素依次竖向排列，不会排在同一行。例如元素、等都是块级元素，它们总是以一个区块出现，单独占据一行。内联元素与块级元素相反，其与相邻的内联元素能够横向依次排列成行，就像文本依次排列显示的效果一样，先依次横向排列，排到最右端自动换行。例如元素、都属于内联元素。内联元素的显示特点就是不会独自占据一行。块级元素通过属性设置，也能具有内联元素

2、的特点。例如把的float属性设成左右浮动，这个图像就会像一个内联元素一样，与其他内联元素一同横向排列。很多块级元素、内联元素本身就是一个容器，可以容纳各类元素。如段落元素,可以容纳文本、图像、表格、多媒体等各类元素。4.6.2 使用DIVl DIV是一个标准的容器类块级元素，可以容纳各类元素。在排版中，只要定义好DIV的显示样式，其容纳的元素就会套用DIV的显示样式。l 在CSS中，定义DIV选择符与定义其他标签选择符一样，设置DIV的方法如下：div属性1:属性1的值;属性2:属性2的值;简单的DIV示例div width:400px;/*块的宽度*/height:300px;/*块的高度

3、*/font-family:宋体;font-size:48px;color:#FFFF00;/*字体颜色*/background-color:#9999FF;text-align:center;一个简单的DIV块级元素！4.6.3 使用SPANl 元素与元素一样都是容器类元素，被广泛应用在网页制作中。元素同样可以容纳各种HTML元素。元素是一个内联元素，它包围的元素不会自动换行。l 定义选择符与定义其他标签选择符一样，设置方法如下：span属性1:属性1的值;属性2:属性2的值;4.6.4 元素定位l CSS网页布局经常使用定位技术，把容器类元素定位显示在网页合适的位置上。定位有以下3种模式。

4、静态定位，是指无特殊定位，也是系统默认的定位模式。块级元素生成的是一个矩形框，是文档流中的一个部分，按照在文档中出现的位置正常定位显示，没有偏移量。相对定位，是指相对于静态定位生成的块的位置的偏移量，由top、right、bottom、left 4个偏移属性联合指定相对偏移量。绝对定位，是指按照父级元素的4个边框为基准，使用由top、right、bottom、left 4个属性来决定块的绝对位置。l 偏移量，是指相对于某个指定位置的偏移量，分为top、right、bottom、left 4个方向。偏移量的表达方式有数值形式和百分比形式。数值形式可以使用常见的度量单位如像素、磅、毫米等。l 设置

5、元素定位，需要使用容器类元素（如DIV块）选择符及其position属性，以及偏移量属性（top、left、right 和 bottom）。设置方法为容器类元素选择符position:属性值;top:属性值;right:属性值;bottom:属性值;left:属性值其中，position的属性值有static（静态定位）、relative（相对定位）、absolute（绝对定位）。DIV定位示例 div.a position:static;font-size:18px;width:300px;height:130px;background-color:red;div.b position:re

6、lative;top:auto;right:auto;bottom:auto;left:40px;font-size:18px;width:300px;height:130px;background-color:blue;div.c position:absolute;top:50px;right:auto;bottom:auto;left:180px;font-size:18px;width:300px;height:130px;background-color:green;1.静态定位 2.相对定位 3.绝对定位 4.静态定位 注意：注意：div.a div.b div.cdiv.a di

7、v.b div.c的形式，去掉的形式，去掉divdiv行不行？行不行？4.6.5 元素叠加l 如果网页中有多项容器类元素存在位置重叠时，需要设置好这些元素的叠加次序，保证需要显示的内部不被遮住。l 在CSS中设置元素的叠加次序，需要使用容器类元素（如DIV）的选择符及其叠加次序属性z-index。设置方法为容器类元素选择符z-index:属性值z-index的属性值为自然数1、2、3，可以设成0或负数。默认值为1，显示在最下层；z-index的值越大，优先级越高，显示在上层。如果没有指定叠加次序，则按照元素形成的逆序叠加，最后形成的元素在最顶层、最先形成的元素在最底层。DIV叠加次序 div.

8、a position:absolute;top:20px;right:auto;bottom:auto;left:40px;width:260px;height:200px;background-color:#006600;font-size:20px;z-index:1;div.b position:absolute;top:70px;right:auto;bottom:auto;left:80px;width:260px;height:200px;background-color:#3300CC;font-size:20px;z-index:2;div.c position:absolut

9、e;top:120px;right:auto;bottom:auto;left:120px;width:260px;height:200px;background-color:#660000;font-size:20px;z-index:3;div.d position:absolute;top:170px;right:auto;bottom:auto;left:160px;width:260px;height:200px;background-color:#FF0099;font-size:20px;z-index:4;叠加次序为1 叠加次序为2 叠加次序为3 叠加次序为44.6.6 元素浮

10、动l 通常，网页排版时是按照文档流的顺序排列。对于内联元素而言，按照从左至右逐行排列；对于块级元素而言，会在当前位置换行，在下一行显示该元素。其后续的元素自动换行排列。块级元素的排列相当于“换行+内联元素+换行”的形式。l 浮动属性可以让块级元素“内联化”，使其具有内联元素的排列特点。目前，浮动只有向左、向右两种浮动形式。设置浮动属性后，周边的元素会在该元素周边“流动”。l 在CSS中设置块级元素浮动，需要使用块级元素（如DIV）的选择符及其folat属性，设置方法为选择符float:属性值float属性值有left、right和none 3个，默认值为none。DIV浮动示例 div wid

11、th:300px;height:170px;background-color:#FF0099;font-family:宋体;font-size:20px;float:right;position:relative;top:20px;right:auto;bottom:10px;left:3px;DIV浮动效果 通常，网页排版时，是按照文档流的顺序排列。对于内联元素而言，按照从左至右逐行排列；对于块级元素而言，会在当前位置换行，在下一行显示该元素。其后续的元素自动换行排列。块级元素的排列相当于“换行+内联元素+换行”的形式。浮动技术可以让块级元素“内联化”，使其具有内联元素的排列特点。目前，浮动

12、只有向左、向右两种浮动属性。设置浮动属性后，周边的元素会在该元素周边“流动”。4.6.7 元素的显示与隐藏l 大多数容器类元素都能设置显示与隐藏。在CSS中，设置元素显示与隐藏需要使用容器类元素选择符及其visibility属性。设置方法如下：选择符visibility:属性值visibility的属性值主要有visible（可见）、hidden（隐藏）。练习：制作一个网页，采用内部式样定义3个DIV块级元素，大小均为150px长*120px高。第一个DIV：文本内容为“第一个DIV”，采用绝对定位方式显示，顶部偏移量为20px，左边偏移量为30px，DIV的背景色为蓝色，叠加次序为1；第二个DIV：文本内容为“第二个DIV”，采用绝对定位方式显示，顶部偏移量为100px，左边偏移量为50px，DIV的背景色为黄色，叠加次序为3；第三个DIV：文本内容为“第三个DIV”，采用绝对定位方式显示，顶部偏移量为60px，左边偏移量为100px，DIV的背景色为绿色，叠加次序为2。