WEB开发网
开发学院网页设计Html 用UL实现非Table四行三列布局 阅读

用UL实现非Table四行三列布局

 2006-03-29 19:12:16 来源:WEB开发网   
核心提示:先看看效果:下面是源代码:<html><head><title>test</title><style type="text/CSS">ul{ margin:0px; padding:0px; width:200px; }ul li{ flo

先看看效果:

下面是源代码:

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

将上面的代码保存成html格式的网页文档就能看到效果了。

Tags:UL 实现 Table

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接