制作圆角表格(Table)的完整代码

『本文地址:http://v2.djasp.net/Static/27/1948.stm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" />
<html>
<head>
<style type="text/css">
body{background-color: #FFF;}

div#nifty1{ margin: 0 10px;background: #9BD1FA;}
div#nifty2{ margin: 0 10px;background: #9BD1FA;}
div#nifty3{ margin: 0 10px;background: #9BD1FA;}
div#nifty4{ margin: 0 3px;background: #9BD1FA;}
div#nifty5{ margin: 0 3px;background: #9BD1FA;}

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
   overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" >
  <tr>
     <td>
  <div id="nifty1">
  <b class="rtop">
    <b class="r1"></b>
    <b class="r2"></b>
    <b class="r3"></b>
    <b class="r4"></b>
  </b>
  <div style="height:20px;">
    压缩一下
  </div>
  <b class="rbottom">
    <b class="r4"></b>
    <b class="r3"></b>
    <b class="r2"></b>
    <b class="r1"></b>
  </b>
</div>
  </td>
     <td>
   <div id="nifty2">
  <b class="rtop">
    <b class="r1"></b>
    <b class="r2"></b>
    <b class="r3"></b>
    <b class="r4"></b>
  </b>
  <div style="height:20px;">
    压缩一下
  </div>
  <b class="rbottom">
    <b class="r4"></b>
    <b class="r3"></b>
    <b class="r2"></b>
    <b class="r1"></b>
  </b>
</div>
  </td>
     <td>
   <div id="nifty3">
  <b class="rtop">
    <b class="r1"></b>
    <b class="r2"></b>
    <b class="r3"></b>
    <b class="r4"></b>
  </b>
  <div style="height:20px;">
    压缩一下
  </div>
  <b class="rbottom">
    <b class="r4"></b>
    <b class="r3"></b>
    <b class="r2"></b>
    <b class="r1"></b>
  </b>
</div>
  </td>
     <td>
   <div id="nifty4">
  <b class="rtop">
    <b class="r1"></b>
    <b class="r2"></b>
    <b class="r3"></b>
    <b class="r4"></b>
  </b>
  <div style="height:20px;">
    压缩一下
  </div>
  <b class="rbottom">
    <b class="r4"></b>
    <b class="r3"></b>
    <b class="r2"></b>
    <b class="r1"></b>
  </b>
</div>
  </td>
     <td>
   <div id="nifty5">
  <b class="rtop">
    <b class="r1"></b>
    <b class="r2"></b>
    <b class="r3"></b>
    <b class="r4"></b>
  </b>
  <div style="height:20px;">
    压缩一下
  </div>
  <b class="rbottom">
    <b class="r4"></b>
    <b class="r3"></b>
    <b class="r2"></b>
    <b class="r1"></b>
  </b>
</div>
  </td>
  </tr>
</table>
</body>
</html>

另请参见:Html+Css做圆角表格(不用任何图片)

本文统计
上一篇: Gb2312转utf-8(vbs+js)
下一篇: 含有透明部分的PNG图片在网页中正…
文章类别:常见问题经典收藏
最后更新:2006-9-23 19:38:05
浏览次数:
本栏最新文章
本栏推荐文章
随机酷站设计秀
网站导航 |走进点击 |点击作品 |服务项目 |联系我们 |设为首页 |加入收藏 |在线留言
点击设计
点击设计© Version: 2.3 WEB执行标准:W3C XHTML 1.1 / CSS 2.0 / Ajax
本站全面兼容 IE、FireFox、Netscape、Opera 等内核的浏览器
版权所有:点击设计 www.djasp.Net E-mail:djasp@qq.com
全程开发:秋水天子(Folier) QQ:39886616
版权所有:点击设计 www.djasp.net
浙ICP备05074939号