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

http://www.sina.com.cn 2006年03月29日 11:30 天极yesky

　　作者：猴年马月

　　先看看效果：

　　网页技巧用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>

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

【发表评论】

爱问(iAsk.com) 相关网页共约14,100,000篇。

【评论】【论坛】【收藏此页】【大中小】【多种方式看新闻】【下载点点通】【打印】【关闭】

天极yesky的其他文章

问与答用HTML还是用XHTML(2006/03/29 11:23)
废物还是宝物谈IFRAME标签的使用(2006/03/29 11:22)
利己利人网站友情链接制作技巧(2006/03/29 11:21)
搜索引擎指南robots.txt文件(2006/03/29 11:20)
玩个性赋予表单INPUT元素特权(2006/03/29 11:17)
为新品让路昂达VX929全线机型狂降价(2006/03/29 10:49)
欧盟考虑新监管强制降低手机漫游费(2006/03/29 10:46)
五合一激光一体机兄弟MFC-7220跌破2000元(2006/03/29 10:37)

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

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