日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
CSS布局中應(yīng)用ul、li實(shí)現(xiàn)表格形式

你對(duì)DIV CSS布局中應(yīng)用ul、li實(shí)現(xiàn)表格形式是否熟悉，表格類的數(shù)據(jù)，它有著得天獨(dú)厚的條件，也非常方便組織，這類數(shù)據(jù)內(nèi)容直接使用表格就可以了，希望本文的介紹能讓你有所收獲。

DIV CSS布局中應(yīng)用ul、li實(shí)現(xiàn)表格形式

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

　　我們首先分析一下如何制作：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代碼的編寫：

引用：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2. 第一列
    3.    
  
  
  
  3. 第二列
    4.    
  
  
  
  4. 第三列
    5.    
  
  
  
  5. 第四列
    6.    
  
  
  
  7. 數(shù)據(jù)1-1
    8.    
  
  
  
  9. 數(shù)據(jù)1-2
    10.    
  
  
  
  11. 數(shù)據(jù)1-3
    12.    
  
  
  
  13. 數(shù)據(jù)1-4
    14.    
  
  
  
  15. 數(shù)據(jù)2-1
    16.    
  
  
  
  17. 數(shù)據(jù)2-2
    18.    
  
  
  
  19. 數(shù)據(jù)2-3
    20.    
  
  
  
  21. 數(shù)據(jù)2-4
    22.    
  
  
  
  23. 數(shù)據(jù)3-1
    24.    
  
  
  
  25. 數(shù)據(jù)3-2
    26.    
  
  
  
  27. 數(shù)據(jù)3-3
    28.    
  
  
  
  29. 數(shù)據(jù)3-4
    30.    
  
  
  
  31. 數(shù)據(jù)4-1
    32.    
  
  
  
  33. 數(shù)據(jù)4-2
    34.    
  
  
  
  35. 數(shù)據(jù)4-3
    36.    
  
  
  
  37. 數(shù)據(jù)4-4
    38.    
  
  
  
  38.  
    39.   
  
  
  
  39.  
    40.

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

引用： 

 
 
 
 
    
  
  
  
  
  1. *{  
    2.   
  
  
  
  2. margin:0;  
    3.   
  
  
  
  3. padding:0;  
    4.   
  
  
  
  4. font-size:12px;  
    5.   
  
  
  
  5. color:#000;  
    6.   
  
  
  
  6. }  
    7.   
  
  
  
  7.  
    8.

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

引用： 

 
 
 
 
    
  
  
  
  
  1. #biaoge{  
    2.   
  
  
  
  2. width:405px;  
    3.   
  
  
  
  3. margin:50pxauto;  
    4.   
  
  
  
  4. }  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. 　　  
    7.

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

引用： 

 
 
 
 
    
  
  
  
  
  1. #biaogeli,#biaogeli.biaotou{  
    2.   
  
  
  
  2. list-style-type:none;  
    3.   
  
  
  
  3. width:100px;  
    4.   
  
  
  
  4. height:30px;  
    5.   
  
  
  
  5. line-height:30px;  
    6.   
  
  
  
  6. text-align:center;  
    7.   
  
  
  
  7. float:left;  
    8.   
  
  
  
  8. margin-left:1px;  
    9.   
  
  
  
  9. margin-bottom:1px;  
    10.   
  
  
  
  10. background:#ccc;  
    11.   
  
  
  
  11. }  
    12.

 　　對(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的表格線，很多CSSHACK很難控制與調(diào)整，特別是FF中極不正常，不建議使用border來實(shí)現(xiàn)這類ul+li實(shí)現(xiàn)表格線的定義?。┰O(shè)置背景色為淺灰色#ccc。

引用： 

 
 
 
 
    
  
  
  
  
  1. #biaogeli.biaotou{  
    2.   
  
  
  
  2. background:#999;  
    3.   
  
  
  
  3. }  
    4.

 　　我們?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)類似于表格的布局，點(diǎn)擊這里查看最終效果。

【編輯推薦】

  1. DIV CSS表單布局五個(gè)小技巧使用秘笈
  2. 技術(shù)分享 如何實(shí)現(xiàn)CSS橫向?qū)Ш?/li>
  3. 術(shù)語(yǔ)匯編 基本CSS濾鏡概述
  4. 完美實(shí)現(xiàn)豐富的CSS文字效果
  5. 鼠標(biāo)經(jīng)過時(shí)改變DIV背景顏色的三種途徑

當(dāng)前文章：CSS布局中應(yīng)用ul、li實(shí)現(xiàn)表格形式
網(wǎng)站網(wǎng)址：http://www.5511xx.com/article/cocgejg.html