|
[摘 要]
先看看效果：
下面是源代码：
<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格式的网页文档就能看到效果了。
|
