基於DIV+ul+li實現的表格(多示例)

時間  2019-11-12
標籤 基於 div+ul+li div 實現 表格 示例 欄目 CSS 简体版
原文   原文鏈接

本文由 www.169it.com 蒐集整理css

普通的顯示數據的時候，ul就是項目列表，li就是列表項。能夠用來顯示數據。若是用於DIV＋CSS佈局的話，ul+li能夠替換表格的做用，具體的設置，若是寬度高度、行間距、背景邊框等須要配合CSS一塊兒設置。li是固定的寬度與高度（單元格），設置li在ul中浮動，當ul不夠寬的時候，li就會自動另起一行排列（一行有多少列經過計算便可獲得ul的寬度，如一行四列，一列寬100px，那ul寬就是400px加上必定的邊距）。這樣就實現了相似於表格的效果，或者說咱們用UL+LI模擬了表格的效果。html

實現過程以下:web

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<         ul          id         =         "biaoge"         >
              <         li          class         =         "biaotou"         >第一列</         li         >
              <         li          class         =         "biaotou"         >第二列</         li         >
              <         li          class         =         "biaotou"         >第三列</         li         >
              <         li          class         =         "biaotou"         >第四列</         li         >
              <         li         >數據1-1</         li         >
              <         li         >數據1-2</         li         >
              <         li         >數據1-3</         li         >
              <         li         >數據1-4</         li         >
              <         li         >數據2-1</         li         >
              <         li         >數據2-2</         li         >
              <         li         >數據2-3</         li         >
              <         li         >數據2-4</         li         >
              <         li         >數據3-1</         li         >
              <         li         >數據3-2</         li         >
              <         li         > 數據3-3</         li         >
              <         li         >數據3-4</         li         >
              <         li         >數據4-1</         li         >
              <         li         >數據4-2</         li         >
              <         li         >數據4-3</         li         >
              <         li         >數據4-4</         li         >
          </         ul         >　

一個無序列表biaoge，前四個列表項咱們賦予了類biaotou。由於這四個項是表格頭部，應該與表格數據有所區別。因此單獨賦予了類，能夠方便控制。下面咱們開始CSS代碼的編寫：佈局

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

CSS總體佈局聲明，邊距爲零，填充爲零，文字大小爲12px，文字顏色爲黑色#000；ui

1
2
3
4
#biaoge {
              width         :         405px         ;
              margin         :         50px          auto         ;
          }　　

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

   

1
2
3
4
5
6
7
8
9
10
11
#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（即單元格）進行樣式定義，設置列表項預設標記爲無，寬度與高度分別是100px、30px，爲了讓文字垂直居中於li中，設置行高爲30px，文字水平居中。設置爲向左浮動，而且左邊距與底邊距均爲1px，實現了簡單的表格線的效果。（若是設計成border的表格線，不少CSS HACK很難控制與調整，特別是FF中極不正常，不建議使用border來實現這類ul+li實現表格線的定義！）設置背景色爲淺灰色#ccc。spa

1
2
3
#biaoge li.biaotou {
              background         :         #999         ;
          }　　

咱們設置四個「表頭」li的背景色爲深灰色#999，與其它的li區別開來。咱們的樣式定義基本就完成了。你能夠在色彩上對它進行一些其它的美化。 表格類的數據最好是用表格來實現，符合WEB標準沒必要拘泥於徹底不用表格，只是在適當的狀況下，可使用此案例的方法來實現相似於表格的佈局。設計

實例代碼1:code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <         html          xmlns         =         "http://www.w3.org/1999/xhtml"         >
          <         head         >
          <         meta          http-equiv         =         "Content-Type"          content         =         "text/html; charset=gb2312"          />
          <         title         >www.webjx.com</         title         >
          <         style          type         =         "text/css"         >
          * {
          margin:0;
          padding:0;
          font-size:12px;
          color:#000;
          }
          #biaoge {
          width:405px;
          margin:50px auto;
          }
          #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;
          }
          #biaoge li.biaotou {
          background:#999;
          }
          </         style         >
          </         head         >
          <         body         >
          <         ul          id         =         "biaoge"         >
          <         li          class         =         "biaotou"         >第一列</         li         >
          <         li          class         =         "biaotou"         >第二列</         li         >
          <         li          class         =         "biaotou"         >第三列</         li         >
          <         li          class         =         "biaotou"         >第四列</         li         >
          <         li         >數據1-1</         li         >
          <         li         > 數據1-2</         li         >
          <         li         >數據1-3</         li         >
          <         li         >數據1-4</         li         >
          <         li         >數據2-1</         li         >
          <         li         >數據2-2</         li         >
          <         li         >數據2-3</         li         >
          <         li         >數據2-4</         li         >
          <         li         >數據3-1</         li         >
          <         li         >數據3-2</         li         >
          <         li         >數據3-3</         li         >
          <         li         >數據3-4</         li         >
          <         li         >數據4-1</         li         >
          <         li         >數據4-2</         li         >
          <         li         >數據4-3</         li         >
          <         li         >數據4-4</         li         >
          </         ul         >
          </         body         >
</         html         >

實例代碼:orm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<         html          xmlns         =         "http://www.w3.org/1999/xhtml"         >
<         head         >
<         meta          http-equiv         =         "Content-Type"          content         =         "text/html; charset=utf-8"          />
<         title         >DIV+CSS表格效果</         title         >
<         style          type         =         "text/css"         >
* {margin:0;padding:0}
#main {margin:100px 0 0 200px}
#main ul {width:520px;height:165px;list-style:none}
#main li {border-left:1px solid #ccc;border-top:1px solid #ccc;float:left;width:102px;height:33px;text-align:center;line-height:33px}
#main li.b {border-bottom:1px solid #ccc}
#main li.r {border-right:1px solid #ccc}
</         style         >
</         head         >
<         body         >
<         div          id         =         "main"         >
<         ul         >
<         li         >11</         li         >
<         li         >11</         li         >
<         li         >11</         li         >
<         li         >11</         li         >
<         li          class         =         "r"         >11</         li         >
<         li         >怎麼樣？</         li         >
<         li         >還行吧？</         li         >
<         li         ></         li         >
<         li         ></         li         >
<         li          class         =         "r"         >11</         li         >
<         li         >上海世博</         li         >
<         li         ></         li         >
<         li         ></         li         >
<         li         ></         li         >
<         li          class         =         "r"         >11</         li         >
<         li         ></         li         >
<         li         ></         li         >
<         li         ></         li         >
<         li         ></         li         >
<         li          class         =         "r"         >11</         li         >
<         li          class         =         "b"         >生活更美好</         li         >
<         li          class         =         "b"         ></         li         >
<         li          class         =         "b"         ></         li         >
<         li          class         =         "b"         ></         li         >
<         li          class         =         "b r"         >11</         li         >
</         ul         >
</         div         >
</         body         >
</         html         >
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程