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