用UL实现非Table四行三列布局

2006-03-29 10:35:42  作者

  先看看效果

  

  下面是源代码

%26lt;html%26gt;
%26lt;head%26gt;
%26lt;title%26gt;test%26lt;/title%26gt;
%26lt;style type="text/css"%26gt;
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;
}
%26lt;/style%26gt;
%26lt;/head%26gt;
%26lt;body%26gt;
%26lt;ul%26gt;
%26lt;li%26gt;%26amp;nbsp;%26lt;/li%26gt;
%26lt;li%26gt;%26amp;nbsp;%26lt;/li%26gt;
%26lt;li class="border-r"%26gt;%26amp;nbsp;%26lt;/li%26gt;
%26lt;/ul%26gt;
%26lt;ul%26gt;
%26lt;li%26gt;%26amp;nbsp;%26lt;/li%26gt;
%26lt;li%26gt;%26amp;nbsp;%26lt;/li%26gt;
%26lt;li class="border-r"%26gt;%26amp;nbsp;%26lt;/li%26gt;
%26lt;/ul%26gt;
%26lt;ul%26gt;
%26lt;li%26gt;%26amp;nbsp;%26lt;/li%26gt;
%26lt;li%26gt;%26amp;nbsp;%26lt;/li%26gt;
%26lt;li class="border-r"%26gt;%26amp;nbsp;%26lt;/li%26gt;
%26lt;/ul%26gt;
%26lt;ul%26gt;
%26lt;li class="border-b"%26gt;%26amp;nbsp;%26lt;/li%26gt;
%26lt;li class="border-b"%26gt;%26amp;nbsp;%26lt;/li%26gt;
%26lt;li class="border-l"%26gt;%26amp;nbsp;%26lt;/li%26gt;
%26lt;/ul%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;

  将上面的代码保存成html格式的网页文档就能看到效果了。