商务网页第19课.pptVIP

4.6 采用DIV与SPAN制作网页 网页布局中，经常会遇到块级元素和内联元素，它们对页面布局有很大的影响。只有了解掌握了块级元素和内联元素，才能真正掌握网页布局技术。 4.6.1 块级元素与内联元素 块级元素显示的是一个矩形框，一个块级元素单独占据一行，与相邻的块级元素依次竖向排列，不会排在同一行。例如元素div、p、ul、h1～h6等都是块级元素，它们总是以一个区块出现，单独占据一行。 内联元素与块级元素相反，其与相邻的内联元素能够横向依次排列成行，就像文本依次排列显示的效果一样，先依次横向排列，排到最右端自动换行。例如元素span、font、a、img、input都属于内联元素。内联元素的显示特点就是不会独自占据一行。 块级元素通过属性设置，也能具有内联元素的特点。例如把div的float属性设成左右浮动，这个图像就会像一个内联元素一样，与其他内联元素一同横向排列。 很多块级元素、内联元素本身就是一个容器，可以容纳各类元素。如段落元素p,可以容纳文本、图像、表格、多媒体等各类元素。 4.6.2 使用DIV DIV是一个标准的容器类块级元素，可以容纳各类元素。在排版中，只要定义好DIV的显示样式，其容纳的元素就会套用DIV的显示样式。 在CSS中，定义DIV选择符与定义其他标签选择符一样，设置DIV的方法如下： div｛属性1:属性1的值;属性2:属性2的值;……｝ html head title简单的DIV示例/title style type=text/css div{ width:400px; /* 块的宽度 */ height:300px; /* 块的高度 */ font-family:宋体; font-size:48px; color: #FFFF00; /* 字体颜色 */ background-color:#9999FF; text-align:center; } /style /head body div 一个简单的DIV块级元素！ /div /body /html 4.6.3 使用SPAN span元素与div元素一样都是容器类元素，被广泛应用在网页制作中。span元素同样可以容纳各种HTML元素。span元素是一个内联元素，它包围的元素不会自动换行。 定义span选择符与定义其他标签选择符一样，设置方法如下： span｛属性1:属性1的值;属性2:属性2的值;……｝ 4.6.4 元素定位 CSS网页布局经常使用定位技术，把容器类元素定位显示在网页合适的位置上。定位有以下3种模式。 静态定位，是指无特殊定位，也是系统默认的定位模式。块级元素生成的是一个矩形框，是文档流中的一个部分，按照在文档中出现的位置正常定位显示，没有偏移量。 相对定位，是指相对于静态定位生成的块的位置的偏移量，由top、right、bottom、left 4个偏移属性联合指定相对偏移量。 绝对定位，是指按照父级元素的4个边框为基准，使用由top、right、bottom、left 4个属性来决定块的绝对位置。 偏移量，是指相对于某个指定位置的偏移量，分为top、right、bottom、left 4个方向。偏移量的表达方式有数值形式和百分比形式。数值形式可以使用常见的度量单位如像素、磅、毫米等。 设置元素定位，需要使用容器类元素（如DIV块）选择符及其position属性，以及偏移量属性（top、left、right 和 bottom）。设置方法为 容器类元素选择符｛position:属性值;top:属性值;right:属性值;bottom:属性值;left:属性值｝ 其中，position的属性值有static（静态定位）、relative（相对定位）、absolute（绝对定位）。 html head titleDIV定位示例/title style type=text/css div.a{ position:static; font-size:18px; width:300px; height:130px; background-color:red; } div.b{ position:relative; top:auto;right:auto; bottom:auto;left:40px ; font-size:18px; width:300px; height:130px; background-color:blue; } div.c{ position:absolute; top:50px;rig