手机
当前位置:查字典教程网 >网页设计 >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+js实现像素风头像生成器

深入解析HTML5使用SVG图像时的viewBox属性用法

HTML5中使用postMessage实现两个网页间传递数据

优秀的 HTML5 开发教程

HTML5拖放效果的实现代码

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

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

HTML如何实现文字绕排

使用HTML5的File实现base64和图片的互转

移动端HTML5实现文件上传功能【附代码】

精品推荐
分类导航