网络基础编程第八章

第八章 层的应用

8·1 图层的创建---<div>

图层也是网页制作中用于定位元素或者布局的一种技术,它比表格的布局更加灵活,它能够将层中的内容摆放到浏览器的任意位置,同时放入到层中的HTML元素包括:文字,图像,动画甚至是图层。

          语法:<body>
                  <div id="layer1" style="position:absolute; left:29px; top:12px; width:165px;                   height:104px;"></div>
               </body>
          注:在进行层的定义时,需将层的样式同时定义,否则无法在网页中显示出来。
         
8·2 图层嵌套

嵌套不需要在层中使用层定义,只要添加层标记,进行属性上的设置即可。

层嵌套最主要的特点:保证子层永远位于其父层之上。

          语法:<body>
                  <div id="layer1" style="position:absolute; z-index:1; left:29px; top:12px; width:165px;                        height:104px;"></div>
                  <div id="layer1" style="position:absolute; z-index:1; left:29px; top:12px; width:165px;                        height:104px;"></div>
               </body>     

8·3 层的属性设置

在定义层时,需要设计好图层的一系列属性。

图层定义常见属性:
                id:层的名称
         style属性:
                  {
                   position:定位
                      width:设置图层宽度
                     height:设置图层高度
                       left:设置图层左边距
                        top:设置图层顶端边距
     layer-background-color:设置图层背景颜色
                   }

          语法:<body>
                  <div id="layer1" style="position:absolute; z-index:1; left:29px; top:12px; width:165px;                        height:104px;"></div>
               </body>     

说明:    (1)·position属性将对象从文档流中拖出,进行绝对定位
         (2)·left、top属性进行左边距和顶端间距的设置
         (3)·width、height属性进行宽度和高度的设置
         (4)·层叠通过z-index属性定义

你可能感兴趣的:(职场,网页制作,休闲)