首页新闻手机家电数码电脑财经大模型直播

CSS技巧——用UL实现非Table四行三列布局

来源：互联网作者：若水 2008-03-22/14:10

软件频道

软件教程

CSS

应用技巧

正文

本页的CSS代码利用CSS将UL模仿出了表格的效果。不过小菜鸟本人到是不推荐这样为了避免使用表格而“不择手段”。

<html>
<head>
<title>test</title>
<style type="text/css">
ul{
margin:0px;
padding:0px;
width:200px;
}
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>
</head>
<body>
<ul>
<li> </li>
<li> </li>
<li class="border-r"> </li>
</ul>
<ul>
<li> </li>
<li> </li>
<li class="border-r"> </li>
</ul>
<ul>
<li> </li>
<li> </li>
<li class="border-r"> </li>
</ul>
<ul>
<li class="border-b"> </li>
<li class="border-b"> </li>
<li class="border-l"> </li>
</ul>
</body>
</html>、

{{cmoun}}人已赞

评论 {{userinfo.comments}}