webdn
 
  首页     免费截图     VIP会员区     广告Banner     技术文档     网站模板  
网站截图,网站每日新 !
买域名送空间
虚拟主机 域名注册

首页 >> WebDN 技术文档 >> Html教程 >> Page 7 >> UL制作非Table四行三列布局
 

UL制作非Table四行三列布局

[摘 要]


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



电话咨询:010-60520722 QQ咨询:3792656   |   583696287   |   66733350 关于WebDN  |  站点地图  |  联系我们  |  支付方式  |  友情链接
© 2004-2008 WebDN.com 版权所有. 沪ICP备05040479号