会员登录/控制面版您的位置: 首页 >> 网页制作 >> Xhtml 教程 >> 用UL实现非Table四行三列布局

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

阅览次数:
文章来源: 天极
原文作者: 猴年马月
整理日期: 2006-04-04
发表评论

字体大小:
小
中
大

　　先看看效果：

　　下面是源代码：

<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格式的网页文档就能看到效果了。

上一篇:深入理解sizeof
下一篇:Photoshop调色，制作阿宝色彩的练习

相关文章

热点文章

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