显示效果为：

用列表排列元素

用

或
标签制作列表，用CSS设置列表项目的效果。这种CSS+DIV排版技术主要用于规则排列的文本块、图片、控件等。

举例：

 .list1{  height:20px;  }  .list1ul{  list-style-type:none;margin:0px;  }  .list1li{  float:left;margin-right:5px;  }    
 
[1]
 
[2]
 
[3]
 
[4]
 
 

显示效果为：

[1][2][3][4]
用绝对坐标定位元素

浏览器窗口的左上角坐标为(0,0)，x坐标向右，y坐标向下，此为CSS+DIV排版技术之绝对坐标定位。CSS提供了几个位置属性，可以设置对象在页面中的位置。

position：当它取值为absolute时，表示对象使用绝对坐标定位。

left、top：对象的左上角坐标。

right、bottom：对象的右下角坐标。

z-index：对象的层叠顺序。取值为一个整数。

用绝对坐标定位的对象是可以发生重叠的，如果没有指定层叠顺序，则后定义的对象位于上层，如果指定了“z-index”值，则值大的位于上层。

举例：

 #m1{  width:120px;height:100px;border:4pxdouble#0000FF;  position:absolute;left:50px;top:10px;z-index:1;  }  #m2{  width:120px;height:100px;border:4pxdouble#0000FF;  position:absolute;left:185px;top:10px;z-index:2;  }  #m3{  width:120px;height:100px;border:4pxdouble#0000FF;  position:absolute;left:320px;top:10px;z-index:3;  }     

我们一般不推荐使用这种方法制作网页，这种网页调整起来非常困难，只是在一些特殊情况下使用。

用相对坐标定位元素

父对象的左上角坐标为(0,0)，对象的坐标是相对于父对象的，这是CSS+DIV排版技术之相对坐标定位。

position：当它取值为relative时，表示对象使用相对坐标定位。

left、top：对象的左上角坐标。

right、bottom：对象的右下角坐标。

以上坐标也可理解为相对于父对象的左上角偏移的距离。

注意：用相对坐标定位的对象不允许层叠。此时z-index属性无效。

用相对坐标定位对象在实现一些不规则的排列或拼接时有很好的效果。

举例：

 #area{  width:270px;height:70px;border:1pxsolid#0000FF;  }  #h2{  position:relative;left:85px;top:10px;  }  #h3{  position:relative;left:15px;top:32px;  }  #h4{  position:relative;left:75px;top:40px;  }  #h5{  position:relative;left:115px;top:25px;  }        

以上就是如何进行常用CSS+DIV排版技术用法的分析，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


当前题目：如何进行常用CSS+DIV排版技术用法的分析
转载注明：http://kswsj.cn/article/jgeesg.html

其他资讯

• 如何在Java中使用Redisson实现一个分布式锁-创新互联
• ASP.NET中JQuery+AJAX调用后台的示例分析-创新互联
• python调用mongodb发送微信企业号-创新互联
• 在XPath查询中指定轴的方法-创新互联
• 国产操作系统UOS安装初体验-创新互联
• 

  在线咨询

• 

  拨打电话