標簽制作列表，用CSS設置列表項目的效果。這種CSS+DIV排版技術主要用于規(guī)則排列的文本塊、圖片、控件等。舉例：
.list1{ height:20px; } .list1ul{ list-style-type:none;margin:0px; } .list1li{ float:left;margin-right:5px; }
顯示效果為：
[1][2][3][4]
用絕對坐標定位元素
瀏覽器窗口的左上角坐標為(0,0)，x坐標向右，y坐標向下，此為CSS+DIV排版技術之絕對坐標定位。CSS提供了幾個位置屬性，可以設置對象在頁面中的位置。
position：當它取值為absolute時，表示對象使用絕對坐標定位。
left、top：對象的左上角坐標。
right、bottom：對象的右下角坐標。
z-index：對象的層疊順序。取值為一個整數(shù)。
用絕對坐標定位的對象是可以發(fā)生重疊的，如果沒有指定層疊順序，則后定義的對象位于上層，如果指定了“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; }
我們一般不推薦使用這種方法制作網(wǎng)頁，這種網(wǎng)頁調(diào)整起來非常困難，只是在一些特殊情況下使用。
用相對坐標定位元素
父對象的左上角坐標為(0,0)，對象的坐標是相對于父對象的，這是CSS+DIV排版技術之相對坐標定位。
position：當它取值為relative時，表示對象使用相對坐標定位。
left、top：對象的左上角坐標。
right、bottom：對象的右下角坐標。
以上坐標也可理解為相對于父對象的左上角偏移的距離。
注意：用相對坐標定位的對象不允許層疊。此時z-index屬性無效。
用相對坐標定位對象在實現(xiàn)一些不規(guī)則的排列或拼接時有很好的效果。
舉例：
#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排版技術用法的分析，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當前標題：如何進行常用CSS+DIV排版技術用法的分析
文章地址：http://weahome.cn/article/jgeesg.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
