DIVCSS布局教程:應(yīng)用ul、li實(shí)現(xiàn)表格形式_DIV+CSS實(shí)例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
昨天在MB5U.com的留言板,有一位朋友在吶喊:用DIV的UL LI要如何實(shí)現(xiàn)表格的那種形式啊?
我感覺挺納悶,表格的數(shù)據(jù),就應(yīng)該使用表格來組織,不是說制作符合WEB標(biāo)準(zhǔn)的網(wǎng)站,表格就一無是處、徹底下崗了。表格類的數(shù)據(jù),它有著得天獨(dú)厚的條件,也非常方便組織。這類數(shù)據(jù)內(nèi)容直接使用表格就可以了。
或許你認(rèn)為你的數(shù)據(jù)并不是表格式的數(shù)據(jù),還有著其它的用法或你自己的見解,我們也可以用ul、li來實(shí)現(xiàn)表格形式的布局。我們看下面的效果:
我們首先分析一下如何制作:li是固定的寬度與高度(單元格),設(shè)置li在ul中浮動(dòng),當(dāng)ul不夠?qū)挼臅r(shí)候,li就會(huì)自動(dòng)另起一行排列(一行有多少列通過計(jì)算即可得到ul的寬度,如一行四列,一列寬100px,那ul寬就是400px加上一定的邊距)。這樣就實(shí)現(xiàn)了類似于表格的效果,或者說我們用UL LI模擬了表格的效果。我們開始HTML代碼的編寫:
示例代碼 [m.dounai2.com]
<ul id="biaoge">
<li class="biaotou">第一列</li>
<li class="biaotou">第二列</li>
<li class="biaotou">第三列</li>
<li class="biaotou">第四列</li>
<li>數(shù)據(jù)1-1</li>
<li>數(shù)據(jù)1-2</li>
<li>數(shù)據(jù)1-3</li>
<li>數(shù)據(jù)1-4</li>
<li>數(shù)據(jù)2-1</li>
<li>數(shù)據(jù)2-2</li>
<li>數(shù)據(jù)2-3</li>
<li>數(shù)據(jù)2-4</li>
<li>數(shù)據(jù)3-1</li>
<li>數(shù)據(jù)3-2</li>
<li>數(shù)據(jù)3-3</li>
<li>數(shù)據(jù)3-4</li>
<li>數(shù)據(jù)4-1</li>
<li>數(shù)據(jù)4-2</li>
<li>數(shù)據(jù)4-3</li>
<li>數(shù)據(jù)4-4</li>
</ul>
<li class="biaotou">第一列</li>
<li class="biaotou">第二列</li>
<li class="biaotou">第三列</li>
<li class="biaotou">第四列</li>
<li>數(shù)據(jù)1-1</li>
<li>數(shù)據(jù)1-2</li>
<li>數(shù)據(jù)1-3</li>
<li>數(shù)據(jù)1-4</li>
<li>數(shù)據(jù)2-1</li>
<li>數(shù)據(jù)2-2</li>
<li>數(shù)據(jù)2-3</li>
<li>數(shù)據(jù)2-4</li>
<li>數(shù)據(jù)3-1</li>
<li>數(shù)據(jù)3-2</li>
<li>數(shù)據(jù)3-3</li>
<li>數(shù)據(jù)3-4</li>
<li>數(shù)據(jù)4-1</li>
<li>數(shù)據(jù)4-2</li>
<li>數(shù)據(jù)4-3</li>
<li>數(shù)據(jù)4-4</li>
</ul>
一個(gè)無序列表biaoge,前四個(gè)列表項(xiàng)我們賦予了類biaotou。因?yàn)檫@四個(gè)項(xiàng)是表格頭部,應(yīng)該與表格數(shù)據(jù)有所區(qū)別。所以單獨(dú)賦予了類,可以方便控制。下面我們開始CSS代碼的編寫:
示例代碼 [m.dounai2.com]
* {
margin:0;
padding:0;
font-size:12px;
color:#000;
}
margin:0;
padding:0;
font-size:12px;
color:#000;
}
CSS整體布局聲明,邊距為零,填充為零,文字大小為12px,文字顏色為黑色#000;
示例代碼 [m.dounai2.com]
#biaoge {
width:405px;
margin:50px auto;
}
width:405px;
margin:50px auto;
}
ID為biaoge的ul的CSS編碼,寬度為405px(一列100px*4列 li的邊距),上下邊距為50px,左右為自動(dòng),實(shí)現(xiàn)水平居中對(duì)齊。
示例代碼 [m.dounai2.com]
#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;
}
list-style-type:none;
width:100px;
height:30px;
line-height:30px;
text-align:center;
float:left;
margin-left:1px;
margin-bottom:1px;
background:#ccc;
}
對(duì)各個(gè)列表項(xiàng)li(即單元格)進(jìn)行樣式定義,設(shè)置列表項(xiàng)預(yù)設(shè)標(biāo)記為無,寬度與高度分別是100px、30px,為了讓文字垂直居中于li中,設(shè)置行高為30px,文字水平居中。設(shè)置為向左浮動(dòng),并且左邊距與底邊距均為1px,實(shí)現(xiàn)了簡(jiǎn)單的表格線的效果。(假如設(shè)計(jì)成border的表格線,很多CSS HACK很難控制與調(diào)整,非凡是FF中極不正常,不建議使用border來實(shí)現(xiàn)這類ul li實(shí)現(xiàn)表格線的定義!)設(shè)置背景色為淺灰色#ccc。
示例代碼 [m.dounai2.com]
#biaoge li.biaotou {
background:#999;
}
background:#999;
}
我們?cè)O(shè)置四個(gè)“表頭”li的背景色為深灰色#999,與其它的li區(qū)別開來。我們的樣式定義基本就完成了。你可以在色彩上對(duì)它進(jìn)行一些其它的美化。
最后我們?cè)俅温暶鳎砀耦惖臄?shù)據(jù)最好是用表格來實(shí)現(xiàn),符合WEB標(biāo)準(zhǔn)不必拘泥于完全不用表格,只是在適當(dāng)?shù)那闆r下,可以使用此案例的方法來實(shí)現(xiàn)類似于表格的布局.
相關(guān)DIV+CSS實(shí)例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動(dòng)條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動(dòng)條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁(yè)最后更新時(shí)間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語義
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- DIV CSS布局入門示例(二)寫入整體層結(jié)構(gòu)與CSS
- CSS布局欣賞:淘寶首頁(yè)布局效果
- CSS實(shí)例教程:CSS橫向菜單會(huì)動(dòng)的小豎條
- DIVCSS布局實(shí)例:各種2欄3欄布局實(shí)例(附下載)
- DIVCSS菜單實(shí)例:紅與黑具有立體質(zhì)感的CSS菜單
- CSSFloatLayoutBasics-CSS浮動(dòng)布局基礎(chǔ)
- JS顯示網(wǎng)頁(yè)最后更新時(shí)間
- 用css制作有滾動(dòng)條的居中彈出框
- DivCSS布局實(shí)例:詳解建立Flash上面浮動(dòng)層
- CSS網(wǎng)站風(fēng)格設(shè)計(jì)實(shí)例HuDong123
猜你也喜歡看這些
- firefox下父容器高度不能自適應(yīng)的解決方法
- CSS經(jīng)驗(yàn):如何管理好樣式CSS?
- DIV高度自適應(yīng)的實(shí)例代碼!
- 該如何正確的使用position屬性它的作用是什么?
- border:none;與border:0;的有什么不同?
- 閉合浮動(dòng)元素(clearingfloat)的簡(jiǎn)單方法
- 酷:你的標(biāo)記你作主,自定義標(biāo)記網(wǎng)頁(yè)布局!
- DIV CSS中id與class 的命名及編碼的6個(gè)最佳習(xí)慣
- Div CSS教程:html中的換行造成空格問題的探討
- 用PhotoShop兩分鐘完成一個(gè)xhtml css首頁(yè)
- 相關(guān)鏈接:
- 教程說明:
DIV+CSS實(shí)例-DIVCSS布局教程:應(yīng)用ul、li實(shí)現(xiàn)表格形式。