帮朋友写的一款DIV+CSS表格代码

帮朋友写的一款表格代码,有不足之处,请见谅,或者您也可联系我进行完善。

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>无标题文档</title> 
  6. <style type="text/css"> 
  7. body, ul, li, h1 { 
  8.  padding: 0; 
  9.  margin: 0; 
  10.  font-size: 12px; 
  11.  list-style: none 
  12. a { 
  13.  text-decoration: none; 
  14.  color: black 
  15. .spac_warp { 
  16.  margin: 10px auto; 
  17.  width: 680px; 
  18.  border: 1px #ccc solid; 
  19. .spac_title { 
  20.  font-size: 18px; 
  21.  text-align: center; 
  22.  line-height: 30px; 
  23.  margin-top: 10px; 
  24. .spac_title span { 
  25.  font-size: 12px; 
  26.  font-weight: normal 
  27. .spac_warp .spac_list { 
  28.  margin: 10px; 
  29.  border: 1px #ccc solid; 
  30.  overflow: hidden; 
  31. .spac_warp .spac_list .spac_list_title { 
  32.  background: whiteSmoke; 
  33.  line-height: 30px; 
  34.  padding: 0px 10px; 
  35.  font-size: 14px; 
  36.  border-bottom: 1px #ccc solid; 
  37.  border-top: 1px #CCC solid; 
  38.  position: relative; 
  39.  top: -1px; 
  40. .spac_warp .intro { 
  41.  background: #f9f9f9; 
  42.  padding: 10px; 
  43.  margin:10px; 
  44.  text-indent:24px; 
  45.  line-height:25px; 
  46. #biaoge { 
  47.  overflow: hidden; 
  48.  width: 685px; 
  49. #biaoge li { 
  50.  list-style-type: none; 
  51.  width: 219px; 
  52.  text-indent:10px; 
  53.  height: 30px; 
  54.  line-height: 30px; 
  55.  float: left; 
  56.  border-right: 1px #ccc solid; 
  57.  border-bottom: 1px #ccc solid; 
  58. </style> 
  59. </head> 
  60.  
  61. <body> 
  62. <div class="spac_warp"> 
  63.   <h1 class="spac_title"> 《攻妻不备:宝贝让我宠》 <span>作者:郁菲</span> </h1> 
  64.   <div class="intro">信心,对学习的信心、对自己的信心、对未来的信心。因为失败、因为挫折、因为竞争,你的信心也许会有磨损,但卓越的成就往往是用眼泪换来的。孟子曰:“天将降大任于斯人也,必先苦其心智,劳其筋骨,饿其体肤,空乏其身。”只有备受折磨,才能有更坚定的信心,才能对理想、对希望保持那一份热诚。</div> 
  65.   <div class="spac_list"> 
  66.     <div class="spac_list_title"><b>第一篇:基础知识</b></div> 
  67.     <ul id="biaoge"> 
  68.       <li>第一列</li> 
  69.       <li>第二列</li> 
  70.       <li>第三列</li> 
  71.       <li>第四列</li> 
  72.       <li>数据1-1</li> 
  73.       <li>数据1-2</li> 
  74.       <li>数据1-3</li> 
  75.       <li>数据1-4</li> 
  76.       <li>数据2-1</li> 
  77.       <li>数据2-2</li> 
  78.       <li>数据2-3</li> 
  79.       <li>数据2-4</li> 
  80.       <li>数据3-1</li> 
  81.       <li>数据3-2</li> 
  82.       <li>数据3-3</li> 
  83.       <li>数据3-4</li> 
  84.       <li>数据4-1</li> 
  85.       <li>数据4-2</li> 
  86.       <li>数据4-3</li> 
  87.       <li>数据4-4</li> 
  88.     </ul> 
  89.     <div class="spac_list_title"><b>第一篇:基础知识</b></div> 
  90.     <ul id="biaoge"> 
  91.       <li>第一列</li> 
  92.       <li>第二列</li> 
  93.       <li>第三列</li> 
  94.       <li>第四列</li> 
  95.       <li>数据1-1</li> 
  96.       <li>数据1-2</li> 
  97.       <li>数据1-3</li> 
  98.       <li>数据1-4</li> 
  99.       <li>数据2-1</li> 
  100.       <li>数据2-2</li> 
  101.       <li>数据2-3</li> 
  102.       <li>数据2-4</li> 
  103.       <li>数据3-1</li> 
  104.       <li>数据3-2</li> 
  105.       <li>数据3-3</li> 
  106.       <li>数据3-4</li> 
  107.       <li>数据4-1</li> 
  108.       <li>数据4-2</li> 
  109.       <li>数据4-3</li> 
  110.       <li>数据4-4</li> 
  111.     </ul> 
  112.   </div> 
  113. </div> 
  114. </body> 
  115. </html> 

转载请注明:代码家园 » 帮朋友写的一款DIV+CSS表格代码

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)