萬盛學電腦網 >> 網頁制作 >> Html5 >> HTML用UL實現非Table四行三列布局教程
HTML用UL實現非Table四行三列布局教程
先看看效果：
下面是源代碼：
<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格式的網頁文檔就能看到效果了。
- 上一頁:用正則表達式過濾html代碼
- 下一頁:HTML表格水平對齊屬性
Html5排行
相關文章
copyright © 萬盛學電腦網 all rights reserved