DIVCSS布局教程：應(yīng)用ul、li實現(xiàn)表格形式_DIV+CSS實例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　昨天在MB5U.com的留言板，有一位朋友在吶喊：用DIV的UL LI要如何實現(xiàn)表格的那種形式�。�
　　我感覺挺納悶，表格的數(shù)據(jù)，就應(yīng)該使用表格來組織，不是說制作符合WEB標(biāo)準(zhǔn)的網(wǎng)站，表格就一無是處、徹底下崗了。表格類的數(shù)據(jù)，它有著得天獨厚的條件，也非常方便組織。這類數(shù)據(jù)內(nèi)容直接使用表格就可以了。

　　或許你認(rèn)為你的數(shù)據(jù)并不是表格式的數(shù)據(jù)，還有著其它的用法或你自己的見解，我們也可以用ul、li來實現(xiàn)表格形式的布局。我們看下面的效果：

　　我們首先分析一下如何制作：li是固定的寬度與高度（單元格），設(shè)置li在ul中浮動，當(dāng)ul不夠?qū)挼臅r候，li就會自動另起一行排列（一行有多少列通過計算即可得到ul的寬度，如一行四列，一列寬100px，那ul寬就是400px加上一定的邊距）。這樣就實現(xiàn)了類似于表格的效果，或者說我們用UL LI模擬了表格的效果。我們開始HTML代碼的編寫：

示例代碼 [www.hl5o.cn]

　　一個無序列表biaoge，前四個列表項我們賦予了類biaotou。因為這四個項是表格頭部，應(yīng)該與表格數(shù)據(jù)有所區(qū)別。所以單獨賦予了類，可以方便控制。下面我們開始CSS代碼的編寫：

示例代碼 [www.hl5o.cn]

* {
margin:0;
padding:0;
font-size:12px;
color:#000;
}

　　CSS整體布局聲明，邊距為零，填充為零，文字大小為12px，文字顏色為黑色#000；

示例代碼 [www.hl5o.cn]

#biaoge {
width:405px;
margin:50px auto;
}

　　ID為biaoge的ul的CSS編碼，寬度為405px（一列100px*4列 li的邊距），上下邊距為50px，左右為自動，實現(xiàn)水平居中對齊。

示例代碼 [www.hl5o.cn]

#biaoge li,#biaoge li.biaotou {
list-style-type:none;
width:100px;
height:30px;
line-height:30px;
text-align:center;
float:left;
margin-left:1px;
margin-bottom:1px;
background:#ccc;
}

　　對各個列表項li（即單元格）進(jìn)行樣式定義，設(shè)置列表項預(yù)設(shè)標(biāo)記為無，寬度與高度分別是100px、30px，為了讓文字垂直居中于li中，設(shè)置行高為30px，文字水平居中。設(shè)置為向左浮動，并且左邊距與底邊距均為1px，實現(xiàn)了簡單的表格線的效果。（假如設(shè)計成border的表格線，很多CSS HACK很難控制與調(diào)整，非凡是FF中極不正常，不建議使用border來實現(xiàn)這類ul li實現(xiàn)表格線的定義�。┰O(shè)置背景色為淺灰色#ccc。

示例代碼 [www.hl5o.cn]

#biaoge li.biaotou {
background:#999;
}

　　我們設(shè)置四個“表頭”li的背景色為深灰色#999，與其它的li區(qū)別開來。我們的樣式定義基本就完成了。你可以在色彩上對它進(jìn)行一些其它的美化。

　　最后我們再次聲明，表格類的數(shù)據(jù)最好是用表格來實現(xiàn)，符合WEB標(biāo)準(zhǔn)不必拘泥于完全不用表格，只是在適當(dāng)?shù)那闆r下，可以使用此案例的方法來實現(xiàn)類似于表格的布局.