自己写的DIV+CSS表单页，特殊表格

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+CSS表单页</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>
<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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

自己写的DIV+CSS表单页，特殊表格

分类

表格图层

描述

一个自己写的DIV+CSS表单页，是一个特殊的表格，整个DIV直接复制插入到你想显示的页面，由于规定了宽度，所以页面宽度必须为840像素以上，然后复制CSS文件里/*清除浮动*/以下的部分到模板的CSS里，一般来说，只能改文字。如果要改颜色直...