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>

你可能感兴趣的:(div+css)