手机
当前位置:查字典教程网 >网页设计 >HTML5教程 >HTML用UL实现非Table四行三列布局教程
HTML用UL实现非Table四行三列布局教程
摘要:先看看效果:下面是源代码:testul{margin:0px;padding:0px;width:200px;}ulli{float:lef...

先看看效果:

HTML用UL实现非Table四行三列布局教程1

下面是源代码:

<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用UL实现非Table四行三列布局教程】相关文章:

用HTML5.0制作网页的教程

HTML5中的Canvas结合公式绘制粒子运动的教程

使用HTML5 Canvas API绘制弧线的教程

使用html5+js实现像素风头像生成器

用HTML5制作烟火效果的教程

HTML5 Canvas的常用线条属性值总结

HTML5 canvas基本绘图之绘制阴影效果

用HTML5 实现橡皮擦的涂抹效果的教程

HTML5拖放效果的实现代码

优秀的 HTML5 开发教程

精品推荐
分类导航