DIVCSS写table表单页_WEB前端在线测试

<title>DIVCSS写table表单页</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<style>
*{ margin:0; padding:0;}
ul,li{ list-style:none; margin:0;}
body{ font-size:12px;}
.shuoming{width:840px; margin:0 auto; overflow:hidden; display:table; padding-bottom:20px; line-height:24px;}
/*清除浮动*/
.fix{*zoom:1;}.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
.tables{ width:840px; margin:0 auto;border:1px solid #ccc; overflow:hidden; display:table;}
.tables ul{ line-height:24px;display:inline-block; }
.tables ul li{ text-align:center;float:left;} 
.tables ul li h2{ float:left; font-size:12px; font-weight:normal; display:block; height:100%; overflow:hidden; display:table-row;}
.tables ul li strong{ font-size:12px; font-weight:normal; display:block;float:left; text-align:center;}
.line1{ height:24px; background:#f8f8f8;line-height:24px; _display:inline;}
.part1{ width:80px; border-right:1px solid #ccc;}
.part2{ width:274px; border-right:1px solid #ccc;}
.part3{ width:120px; border-right:1px solid #ccc;}
.part4{ width:120px; border-right:1px solid #ccc;}
.part5{ width:120px; border-right:1px solid #ccc;}
.part6{ width:120px;}
.line2{ height:24px; background:#f8f8f8;line-height:24px; border-bottom:1px solid #ccc; _display:inline;}
.str1{ width:59px; border-right:1px solid #ccc; border-top:1px solid #ccc;}
.str2{ width:60px; border-top:1px solid #ccc;}
.line3 .part1{ background:#f8f8f8;}
.line3 .part3{ background:#fdfdfd;}
.line3 .part5{ background:#fdfdfd;}
.line3{line-height:24px; border-bottom:1px solid #ccc;height:24px; _display:inline;}
.str3{ width:59px; border-right:1px solid #ccc;}
.str4{ width:60px; }
.red{ color:#ff0000; font-family:Georgia, "Times New Roman", Times, serif;}
.green{ color:#0C0;font-family:Georgia, "Times New Roman", Times, serif;}
.blue{ color:#06F;font-family:Georgia, "Times New Roman", Times, serif;}
.line4{line-height:24px; border-bottom:1px solid #ccc;height:24px; background:#f8f8f8; display:block; width:100%;}
</style>
<body>
<br />
<div class="tables">
      <ul>
              <li class="line1 fix">
                     <h2 class="part1">序号</h2>
                     <h2 class="part2">功能名称格</h2>
                     <h2 class="part3">普乐采集器</h2>
                     <h2 class="part4">普乐营销（SEO）</h2>
                     <h2 class="part5">普乐某软件</h2>
                     <h2 class="part6">普乐论坛营销大师</h2>
              </li>
              <li class="line2 fix">
                     <h2 class="part1"></h2>
                     <h2 class="part2"></h2>
                     <h2 class="part3"><strong class="str1">标准版</strong><strong class="str2">至尊版</strong></h2>
                     <h2 class="part4"><strong class="str1">标准版</strong><strong class="str2">至尊版</strong></h2>
                     <h2 class="part5"><strong class="str1">标准版</strong><strong class="str2">至尊版</strong></h2>
                     <h2 class="part6"><strong class="str1">标准版</strong><strong class="str2">至尊版</strong></h2>
              </li>
              <li class="line3 fix">
                     <h2 class="part1">1</h2>
                     <h2 class="part2">原价(元/年)</h2>
                     <h2 class="part3"><strong class="str3">380</strong><strong class="str4">800</strong></h2>
                     <h2 class="part4"><strong class="str3">1600</strong><strong class="str4">4800</strong></h2>
                     <h2 class="part5"><strong class="str3">7200</strong><strong class="str4">14800</strong></h2>
                     <h2 class="part6"><strong class="str3">480</strong><strong class="str4">2200</strong></h2>
              </li>
              <li class="line3 fix">
                     <h2 class="part1">2</h2>
                     <h2 class="part2">促销(元/年)</h2>
                     <h2 class="part3"><strong class="str3">380</strong><strong class="str4">800</strong></h2>
                     <h2 class="part4"><strong class="str3">1600</strong><strong class="str4">4800</strong></h2>
                     <h2 class="part5"><strong class="str3">7200</strong><strong class="str4">14800</strong></h2>
                     <h2 class="part6"><strong class="str3">480</strong><strong class="str4">2200</strong></h2>
              </li>
              <li class="line3 fix">
                     <h2 class="part1">3</h2>
                     <h2 class="part2">软件内置发布接口数量(论坛、cms、博客等)</h2>
                     <h2 class="part3"><strong class="str3">380</strong><strong class="str4">800</strong></h2>
                     <h2 class="part4"><strong class="str3">1600</strong><strong class="str4">4800</strong></h2>
                     <h2 class="part5"><strong class="str3">7200</strong><strong class="str4">14800</strong></h2>
                     <h2 class="part6"><strong class="str3">480</strong><strong class="str4">2200</strong></h2>
              </li>
              <li class="line3 fix">
                     <h2 class="part1">4</h2>
                     <h2 class="part2">添加发布网站个数</h2>
                     <h2 class="part3"><strong class="str3">380</strong><strong class="str4">800</strong></h2>
                     <h2 class="part4"><strong class="str3">1600</strong><strong class="str4">4800</strong></h2>
                     <h2 class="part5"><strong class="str3">7200</strong><strong class="str4">14800</strong></h2>
                     <h2 class="part6"><strong class="str3">480</strong><strong class="str4">2200</strong></h2>
              </li>

<li class="line4">自主核心、自动化技术、轻松入门</li>
              
              
              
              <li class="line3 fix">
                     <h2 class="part1">1</h2>
                     <h2 class="part2">原价(元/年)</h2>
                     <h2 class="part3"><strong class="str3">380</strong><strong class="str4">800</strong></h2>
                     <h2 class="part4"><strong class="str3">1600</strong><strong class="str4">4800</strong></h2>
                     <h2 class="part5"><strong class="str3">7200</strong><strong class="str4">14800</strong></h2>
                     <h2 class="part6"><strong class="str3">480</strong><strong class="str4">2200</strong></h2>
              </li>
              
              <li class="line4">采集、发布过程处理（所有网站均支持 网站版块、分类、图片、附件本地化等）</li>
              
              <li class="line3 fix">
                     <h2 class="part1">1</h2>
                     <h2 class="part2">原价(元/年)</h2>
                     <h2 class="part3"><strong class="str3">380</strong><strong class="str4">800</strong></h2>
                     <h2 class="part4"><strong class="str3">1600</strong><strong class="str4">4800</strong></h2>
                     <h2 class="part5"><strong class="str3">7200</strong><strong class="str4">14800</strong></h2>
                     <h2 class="part6"><strong class="str3">480</strong><strong class="str4">2200</strong></h2>
              </li>
           
      </ul>
</div>
</body>
</html>