HTML用UL实现非Table四行三列布局教程
摘要：先看看效果：下面是源代码：testul{margin:0px;padding:0px;width:200px;}ulli{float:lef...
先看看效果：
下面是源代码：
<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> </li>
<li> </li>
<li class="border-r"> </li>
</ul>
<ul>
<li> </li>
<li> </li>
<li class="border-r"> </li>
</ul>
<ul>
<li> </li>
<li> </li>
<li class="border-r"> </li>
</ul>
<ul>
<li class="border-b"> </li>
<li class="border-b"> </li>
<li class="border-l"> </li>
</ul>
</body>
</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> </li>
<li> </li>
<li class="border-r"> </li>
</ul>
<ul>
<li> </li>
<li> </li>
<li class="border-r"> </li>
</ul>
<ul>
<li> </li>
<li> </li>
<li class="border-r"> </li>
</ul>
<ul>
<li class="border-b"> </li>
<li class="border-b"> </li>
<li class="border-l"> </li>
</ul>
</body>
</html>
【HTML用UL实现非Table四行三列布局教程】相关文章：
★ HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
上一篇：
用正则表达式过滤html代码
下一篇：
HTML5自助切图
相关阅读
网友关注
网友最新关注视频
- 七年级下册外研版英语M8U2reading
- 沪教版牛津小学英语（深圳用） 四年级下册 Unit 4
- 冀教版英语五年级下册第二课课程解读
- 北师大版数学 四年级下册 第三单元 第二节 小数点搬家
- 六年级英语下册上海牛津版教材讲解 U1单词
- 沪教版八年级下册数学练习册21.4（1）无理方程P18
- 【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案，安徽省
- 冀教版小学数学二年级下册第二周第2课时《我们的测量》宝丰街小学庞志荣.mp4
- 沪教版八年级下次数学练习册21.4（2）无理方程P19
- 第4章 幂函数、指数函数和对数函数（下）_六 指数方程和对数方程_4.7 简单的指数方程_第一课时(沪教版高一下册)_T1566237
精品推荐
分类导航