今天用ul li做个圆角表格,圆角用了背景图片。再次声明:数据输出型的表格不推荐使用div+css。测试浏览器:IE6\IE7\IE8\FF3.0\Opera 9.6
CSS
*{ margin:0px; padding:0px; } body{ text-align:center; font-family:"宋体" } #table{ margin:0 auto; width:960px; text-align:left; } li{ width:958; *width:100%; height:36px; line-height:36px; border:1px solid #c9dff7; border-bottom:none; list-style-type:none; vertical-align:bottom; } li.title{ width:960px; height:34px; line-height:34px; background:url(title.gif); border:none; font-size:13px; font-weight:800; color:#fff; } li.title span{ padding-left:20px; } li.bottom{ width:960px; height:37px; background:url(end.gif); border:none; } li a{ float:left; width:88px; *width:89px; height:36px; overflow:hidden; border-right:1px solid #c9dff7; } li a.left{ float:left; width:67px; *width:68px; height:36px; overflow:hidden; background:#E3EFFC } li a.b_l{ width:68px; *width:69px; background:none; } li a.right{ border-right:none; } |
XHTML
<div id="table"> <ul> <li class="title"><span>蜗爱css--www.woaicss.com</span></li> <li> <a class="left" href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a class="right" href=""></a> </li> <li> <a class="left" href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a class="right" href=""></a> </li> <li> <a class="left" href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a class="right" href=""></a> </li> <li> <a class="left" href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a class="right" href=""></a> </li> <li> <a class="left" href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a class="right" href=""></a> </li> <li> <a class="left" href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a class="right" href=""></a> </li> <li> <a class="left" href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a class="right" href=""></a> </li> <li> <a class="left" href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a class="right" href=""></a> </li> <li> <a class="left" href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a class="right" href=""></a> </li> <li class="bottom"> <a class="left b_l" href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a class="right" href=""></a> </li> </ul> </div> |