网页技巧 用UL实现非Table四行三列布局

下面是源代码:

<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>

 

posted on 2007-08-13 13:55  西湖浪子  阅读(319)  评论(0编辑  收藏  举报