devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

div+css普通表格样式

作者：代码探险家 | 2024-06-28 21:58:29

赞

踩

div 表格样式
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. body,td,th {font-size: 12px; font-family:"新宋体";}
  8. img{ border:0;}
  9. ul ,li{ margin:0; padding:0; list-style:none;}
  10. ul.table1{ height:30px; border-bottom:1px solid #fff; clear:both;}
  11. ul.table1 li{ background:#999;float:left; border-right:1px #fff solid; line-height:30px; text-align:center; font-weight:bold;}
  12. ul.table2{ height:30px; border-bottom:1px solid #fff; clear:both;}
  13. ul.table2 li{ background:#ccc;float:left; border-right:1px #fff solid; line-height:30px; text-align:center;}
  14. .name1{ width:50px;}
  15. .name2{ width:150px;}
  16. .name3{ width:350px;}
  17. .name4{ width:100px; text-align:left; }
  18. ul.table1 li.name4{ width:100px; text-align:left; }
  19. ul.table1 li .taxis{ float:right; margin-right:5px; width:12px; text-align:right; margin-top:8px; _margin-top:4px; vertical-align:middle;}
  20. ul.table1 li .taxis_title{ float:left; margin-left:5px; text-align:left; }
  21. .liter{ margin:0;margin-bottom:4px;_margin-bottom:-2px;}
  22. .drop{ margin:0;}
  23.  
  24. .table_left{ width:30%; overflow:hidden; float:left;}
  25. .table_right{ width:70%; overflow:hidden; float:right;}
  26. .table_left div{ background:#ececd8;margin-right:1px;margin-bottom:1px; text-align:right; padding:3px 5px;}
  27. .table_right div{ background:#eee; margin-bottom:1px; padding:3px 5px;}
  28. .table_height_30{ height:30px; line-height:30px;_line-height:25px; }
  29. .table_height_100{ height:100px; display:block; }
  30. .table_height_100_left{ height:100px; line-height:100px; }
  31.  
  32.  
  33.  
  34. .table_height_301 {height:30px; line-height:30px;_line-height:25px; }
  35. </style>
  36.  
  37. </head>
  38.  
  39. <body>
  40. <h3>简单的表格列表</h3>
  41. <ul class="table1">
  42. 	<li class="name1">序号</li>
  43.     <li class="name2">名称</li>
  44.     <li class="name3">内容</li>
  45. </ul>
  46. <ul class="table2">
  47. 	<li class="name1">1</li>
  48.     <li class="name2">测试文件</li>
  49.     <li class="name3">测试文件内容。。。。。</li>
  50. </ul>
  51. <ul class="table2">
  52. 	<li class="name1">2</li>
  53.     <li class="name2">测试文件</li>
  54.     <li class="name3">测试文件内容。。。。。</li>
  55. </ul>
  56. <ul class="table2">
  57. 	<li class="name1">3</li>
  58.     <li class="name2">测试文件</li>
  59.     <li class="name3">测试文件内容。。。。。</li>
  60. </ul>
  61. <ul class="table2">
  62. 	<li class="name1">4</li>
  63.     <li class="name2">测试文件</li>
  64.     <li class="name3">测试文件内容。。。。。</li>
  65. </ul>
  66. <ul class="table2">
  67. 	<li class="name1">5</li>
  68.     <li class="name2">测试文件</li>
  69.     <li class="name3">测试文件内容。。。。。</li>
  70. </ul>
  71. <h3>带有排序功能的表格列表</h3>
  72. <ul class="table1">
  73. 	<li class="name1">序号</li>
  74.     <li class="name2">名称</li>
  75.     <li class="name3">内容</li>
  76.     <li class="name4">
  77.     	<span class="taxis_title">排序</span>
  78.         <span class="taxis">
  79.         	<div class="liter"><a href="#"><img src="images/desc.gif" width="10" alt="升序"  /></a></div>
  80.             <div class="drop"><a href="#"><img src="images/asc.gif" width="10" alt="降序"/></a> </div>
  81.       </span>   
  82.     </li>
  83. </ul>
  84. <ul class="table2">
  85. 	<li class="name1">1</li>
  86.     <li class="name2">测试文件</li>
  87.     <li class="name3">测试文件内容。。。。。</li>
  88.     <li class="name4">测试文件内容</li>
  89. </ul>
  90. <ul class="table2">
  91. 	<li class="name1">2</li>
  92.     <li class="name2">测试文件</li>
  93.     <li class="name3">测试文件内容。。。。。</li>
  94.     <li class="name4">测试文件内容</li>
  95. </ul>
  96. <div style="clear:both;"></div>
  97. <h3>百分比复杂的表格列表</h3>
  98. <div class="table_left">
  99. 	<div><span class="table_height_30">带宽：</span></div>
  100.     <div><span class="table_height_100_left">扩展 IP地址：</span></div>
  101. </div>
  102. <div class="table_right">
  103. 	<div>
  104.     	<span class="table_height_30">下行：<input  /> <select ><option>Mbit</option></select>
  105. 	    <label><input name="checkbox" type="checkbox"  />限制总下行 </label>
  106.         <input name="button" type="button" class="sys_botton input2_hand" value="确定" />
  107. 	</span>半行高错误，则需把所在的div高度去掉即可。</div>
  108.     <div><span class="table_height_100">
  109.     <div style="width:200px;padding:0; float:left;">
  110.       <textarea name="textarea" id="textarea" style="width:100%; height:85px;"></textarea>
  111.     </div>
  112.     <div style="float:left; width:250px;padding:0; margin-left:10px;">
  113.     	<div style="float:left; width:80px; overflow:hidden;padding:0;">
  114.         	<div class="table_height_30" style="text-align:right;">用户名：</div>
  115.             <div class="table_height_30" style="text-align:right;">密码：</div>
  116.         </div>
  117.         <div style="float:right; width:170px;padding:0;">
  118.         	<div class="table_height_30" style="padding:0; margin-top:5px;"><input  style="vertical-align:middle;"  /></div>
  119.             <div class="table_height_30" style="padding:0; margin-top:5px;"><input  style="vertical-align:middle;"  /></div>
  120.         </div></div>
  121.     </span></div>
  122.     
  123. </div>
  124. <div style="clear:both"></div>
  125.  
  126. </body>
  127. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/767429
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号