Div+Css 代替 Table

  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>

相关阅读:
单点登录原理与简单实现
python pandas自定义函数之apply函数用法
python应用-scipy,numpy,sympy计算微积分
数据预处理-数据规约
主成分分析python代码实现
缺失值处理与格朗日插值法
python pandas数据分析操作
数据探索-数据特征分析
数据探索-数据质量分析
python -matplotlib figure操作

原文地址：https://www.cnblogs.com/xuekyo/p/2511854.html