Div+Css 代替 Table

本文轉載自查看原文 2012-05-21 16:45 3196

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5 <title>無標題文檔</title>
  6 <style>
  7 #header {
  8     float: left;
  9     line-height: 14px;
 10     font-family: Arial, Helvetica, sans-serif;
 11     font-size: 20px;
 12     color: #FFCC33;
 13     margin-left: 10%;
 14     width: 80%;
 15     height: 30px;
 16     background: url('http://www.cnblogs.com/My Documents/My Pictures/table.gif') repeat;
 17 }
 18 
 19 #header #headerul {
 20     margin-top: 1px;
 21     margin-bottom: 1px;
 22     margin-left: 0px;
 23     list-style: none;
 24 }
 25 
 26 #header #headerul li {
 27     border: 1px solid #ffffff;
 28     padding: 5px 15px 5px 10px;
 29     display: block;
 30     float: left;
 31 }
 32 
 33 #header #headerul #forum {
 34     text-align: center;
 35     width: 150px;
 36 }
 37 
 38 #header #headerul #amount {
 39     text-align: center;
 40     width: 100px;
 41 }
 42 
 43 #tr #trul #amount {
 44     text-align: center;
 45     width: 100px;
 46 }
 47 
 48 #tr {
 49     float: left;
 50     line-height: 14px;
 51     font-family: Arial, Helvetica, sans-serif;
 52     font-size: 20px;
 53     color: #3399FF;
 54     margin-left: 10%;
 55     width: 80%;
 56     height: 30px;
 57     background: #CCCCCC;
 58 }
 59 
 60 #tr #trul {
 61     margin-top: 1px;
 62     margin-bottom: 1px;
 63     margin-left: 0px;
 64     list-style: none;
 65 }
 66 
 67 #tr #trul li {
 68     border: 1px solid #ffffff;
 69     padding: 5px 15px 5px 10px;
 70     display: block;
 71     float: left;
 72 }
 73 
 74 #tr #trul #forum {
 75     text-align: center;
 76     width: 150px;
 77 }
 78 </style>
 79 </head>
 80 
 81 <body>
 82 <div id="table">
 83 <div id="header">
 84 <ul id="headerul">
 85     <li id="forum">論壇</li>
 86     <li id="amount">文章數量</li>
 87     <li id="amount">訪問人數</li>
 88 </ul>
 89 </div>
 90 <div id="tr">
 91 <ul id="trul">
 92     <li id="forum">英語學習</li>
 93     <li id="amount">3423</li>
 94     <li id="amount">12654</li>
 95 </ul>
 96 </div>
 97 <div id="tr">
 98 <ul id="trul">
 99     <li id="forum">英語學習</li>
100     <li id="amount">3423</li>
101     <li id="amount">12654</li>
102 </ul>
103 </div>
104 </div>
105 
106 
107 </div>
108 </body>
109 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 div+css與table布局 div+css的布局較table布局有什么優點？ div+css:兩個div並排等高 (table-cell) DIV+CSS布局和TABLE布局的優缺點現在主流網站為什么都用div+css布局而不是用table DIV+CSS命名規范 DIV+CSS 三欄布局 [div+css]豎排菜單 DIV+CSS 按比例等分 div+css布局的問題