ul li模拟圆角表格实例

PHPABC CSS 797 次浏览 , 没有评论

今天用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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go