| 代码如下 |
复制代码 |
|
<style type=”text/”>
<!–
body, td, div, p, span, , {
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 的数据列表样式，接下来让我们看看代码：
