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中使用postMessage实现两个网页间传递数据
★ HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
上一篇：
用正则表达式过滤html代码
下一篇：
HTML5自助切图
相关阅读
网友关注
网友最新关注视频
- 沪教版牛津小学英语（深圳用） 五年级下册 Unit 12
- 第4章 幂函数、指数函数和对数函数（下）_六 指数方程和对数方程_4.7 简单的指数方程_第一课时(沪教版高一下册)_T1566237
- 冀教版英语五年级下册第二课课程解读
- 外研版英语七年级下册module3 unit2第二课时
- 化学九年级下册全册同步 人教版 第25集 生活中常见的盐（二）
- 苏科版数学八年级下册9.2《中心对称和中心对称图形》
- 8.对剪花样_第一课时(二等奖)(冀美版二年级上册)_T515402
- 二年级下册数学第二课
- 沪教版八年级下册数学练习册21.4（1）无理方程P18
- 第12章 圆锥曲线_12.7 抛物线的标准方程_第一课时(特等奖)(沪教版高二下册)_T274713
精品推荐
分类导航