龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

css UL 实现像Table 的数据列表样式

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
table 远没有用 CSS 控制的代码结构清晰,而且一旦 CSS 被缓存到客户端,直接从服务器端加载的数据就大大减少了。因此,有众多的人开始研究 table 的替代方案,从页面布局到内容导航,
table 远没有用 CSS 控制的代码结构清晰,而且一旦 CSS 被缓存到客户端,直接从服务器端加载的数据就大大减少了。因此,有众多的人开始研究 table 的替代方案,从页面布局到内容导航,而本文介绍的技巧是用 CSS 控制
    来实现类似于 table 的数据列表样式。
     代码如下

    <style type="text/css">
    <!--
    body, td, div, p, span, textarea, select {
        font-size: 12px;
        font-family: verdana, arial, helvetica, sans-serif
    }
    a {
        color: #003499;
        text-decoration: none;
        font-size: 12px;
    }
    a:hover {
        color: #000000;
        text-decoration: underline;
        font-size: 12px;
    }
    ul{
        margin:0px;
        padding:0px;
        width:265px;
        display:block;
        clear:both;
    }
    ul li{
        float:left;
        list-style-type:none;
        border-top:#000 solid 1px;
        border-left:#000 solid 1px;
        width:65px;
    }
    .border-r{
        border-right:#000 solid 1px;
    }
    .border-b{
        border-bottom:#000 solid 1px;
    }
    .border-l{
        border-right:#000 solid 1px;
        border-bottom:#000 solid 1px;
    }
    -->
    </style>

    html代码

    <ul>
        <li>1-1</li>
        <li>1-2</li>
        <li>1-3</li>
        <li class="border-r">1-4</li>
    </ul>
    <ul>
        <li>2-1</li>
        <li>2-2</li>
        <li>2-3</li>
        <li class="border-r">2-4</li>
    </ul>
    <ul>
        <li>3-1</li>
        <li>3-2</li>
        <li>3-3</li>
        <li class="border-r">3-4</li>
    </ul>
    <ul>
        <li class="border-b">4-1</li>
        <li class="border-b">4-2</li>
        <li class="border-b">4-3</li>
        <li class="border-l">4-4</li>
    </ul>

    通过下面的图片和示例,我们很容易发现通过 CSS 是很容易实现类似 table 的数据列表样式,接下来让我们看看代码:


精彩图集

赞助商链接