当前位置:编程学习 > html/css >>

css UL 实现像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 的数据列表样式,接下来让我们看看代码:

补充:Css教程,经典案例 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,