欢迎光临
我们一直在努力

用ul实现非table四行三列布局_html教程

建站超值云服务器,限时71元/月

  先看看效果:


  


  下面是源代码:


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

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 用ul实现非table四行三列布局_html教程
分享到: 更多 (0)