模板酷站

电脑版
提示:原网页已由神马搜索转码, 内容由www.mb5u.com提供.

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

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

  先看看效果:

  按此在新窗口浏览图片

  下面是源代码:

<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>&nbsp;</li>
< li>&nbsp;</li>
< li class="border-r">&nbsp;</li>
</ul>
<ul>
< li>&nbsp;</li>
< li>&nbsp;</li>
< li class="border-r">&nbsp;</li>
</ul>
<ul>
< li>&nbsp;</li>
< li>&nbsp;</li>
< li class="border-r">&nbsp;</li>
</ul>
<ul>
< li class="border-b">&nbsp;</li>
< li class="border-b">&nbsp;</li>
< li class="border-l">&nbsp;</li>
</ul>
</body>
</html>

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

来源:天极网/所属分类:网站重构教程/更新时间:2006-03-28
最新评论:

暂时还没人评论! 快来抢沙发啊!


匿名评论
相关网站重构教程

网站制作教程搜索