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使用SVG图像时的viewBox属性用法
★ HTML5中使用postMessage实现两个网页间传递数据
上一篇：
用正则表达式过滤html代码
下一篇：
HTML5自助切图
相关阅读
网友关注
网友最新关注视频
- 沪教版八年级下册数学练习册21.3（3）分式方程P17
- 外研版英语三起5年级下册（14版）Module3 Unit1
- 【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案，安徽省
- 苏科版数学七年级下册7.2《探索平行线的性质》
- 第4章 幂函数、指数函数和对数函数（下）_六 指数方程和对数方程_4.7 简单的指数方程_第一课时(沪教版高一下册)_T1566237
- 沪教版牛津小学英语（深圳用） 六年级下册 Unit 7
- 【获奖】科粤版初三九年级化学下册第七章7.3浓稀的表示
- 七年级下册外研版英语M8U2reading
- 人教版历史八年级下册第一课《中华人民共和国成立》
- 冀教版小学数学二年级下册第二单元《有余数除法的竖式计算》
精品推荐
分类导航