如何进行常用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://cdkjz.cn/article/jgeesg.html
返回首页 了解更多建站资讯

相关资讯

• 天服务器租用价格多少钱？如何选择靠谱的服务器商？

• 申请tk域名的步骤有哪些需要注意的事项有哪些

• 虚拟主机与云主机的区别都有哪些？

• 怎么进行vps登陆呢？VPS的用途有哪些？

• .手机域名注册局的好处有哪些方面？

• 凯文·凯利斯坦福演讲，预言未来20年科技潮流

• 网站建站需要多钱网站建站该选择什么样的虚拟主机

• 免费的网站建设有哪些注意事项？

多年建站经验
多一份参考，总有益处
联系快上网，免费获得专属《策划方案》及报价
咨询相关问题或预约面谈，可以通过以下方式与我们联系
大客户专线   成都：13518219792   座机：028-86922220
在线咨询 提交需求

友情链接 交换友情链接

八点广告成都托管服务器成都众诚伟业小谭建站宜宾冠赛网站固迪佳新材料成都网站制作无边发光字制作成都VI设计专业网站建设

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图