如何进行常用CSS+DIV排版技术用法的分析

显示效果为：

用列表排列元素

用

或
标签制作列表，用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://6mz.cn/article/jgeesg.html

其他资讯

• 取消订单SOAPI
• Component中如何使用抓包工具
• Android开发中如何模仿一个微信拍摄和图像选择界面
• 查询域名所有人吗
• mysql中密码如何重置与分配新用户权限的方法