DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS UL LI布局實現表格效果
CSS UL LI布局實現表格效果
編輯:CSS詳解     

今天帶了一篇簡短的教程,用CSS的UL LI制作實現一個表格,以往聽說CSS實現表格並不好,還不如直接用傳統的TABLE來實現,其實我不這麼認為,如果你CSS非常熟練了,用CSS來實現表格同樣很省事,不信就看一下這個代碼吧:

01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"> 02 <Html> 03 <head> 04 <title>用CSS的UL LI實現表格布局</title 05 </head> 06 <style> 07 *{margin: 0 auto;padding: 0px;list-style: none;} 08 .e{width: 500px;border-top: solid #f00 1px;border-left: 1px solid #f00;display: table;margin-top: 50px;}/*定義表格區域大小和邊框等參數*/ 09 li{float: left;}/*一定要記著讓LI向左浮動,這樣後邊的才會自動跟進*/ 10 .id,.name,.x,.z,.d{color: #999;font-size: 12px;text-align: center;border-right: 1px solid #f00;border-bottom: 1px solid #f00;height: 22px;line-height: 22px;}/*定義表格表頭等*/ 11 .id{width: 20px;} 12 .name{width: 50px;} 13 /*以下定義表格每列的寬度*/ 14 .x{width: 30px;} 15 .z{width: 30px;} 16 .d{width: 365px;} 17 </style>    18 <body> 19 <div class="e"> 20 <ul> 21 <li class="id">ID</li> 22 <li class="name">名字</li> 23 <li class="x">性別</li> 24 <li class="z">年齡</li> 25 <li class="d">地址</li> 26 </ul> 27 <ul> 28 <li class="id">1</li> 29 <li class="name">本山</li> 30 <li class="x">女</li> 31 <li class="z">22</li> 32 <li class="d">北京</li> 33 </ul> 34 <ul> 35 <li class="id">2</li> 36 <li class="name">小曾</li> 37 <li class="x">男</li> 38 <li class="z">26</li> 39 <li class="d">上海</li> 40 </ul> 41 </body> 42 </Html>

最後來看下表格的效果,還不錯吧,而且兼容火狐、Chrome等浏覽器。

 CSS生成的表格效果

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved