用UL实现非Table四行三列布局-网站重构教程

来源:天极网作者:猴年马月更新时间:2006-03-28点击:

　　先看看效果：

　　下面是源代码：

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

网站重构教程

用UL实现非Table四行三列布局-网站重构教程

最新网站重构教程

推荐网站重构教程