今天碰到一个问题 ，就是用LI实现边框，在LI设置border:#cccccc 1px soli; Li与LI之间不能实现类似table的border-collapse:collapse;不过从网上搜得这一种解决方法，觉得设计的很好，给大家做一个参考！
方法一：
<style type=text/css>
ul,li{margin:0;padding:0;}
#div1 {
float:left;
width: 450px;
border-top: #000 1px solid;
border-left: #000 1px solid;
}
#div1 ul {
width: 450px;
margin: 0px;
}
#div1 ul li {
float: left;
width: 149px;
height: 50px;
list-style-type: none;
border-right:#000 1px solid;
border-bottom: #000 1px solid;
text-align: center;
line-height: 50px;
}
</style>
<div id="div1">
<ul>
<li style="width: 484px;">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
方法二：这其中涉及到dl dt dd标签用法，先解说一下：
一般我们在做列表的时候通常只会用到ul和li标签,至于DL,dd、dt一般都很少用到，它也属于列表类的标签，特别是发布程序的时候功能模块列表什么的可以使用它来排版.下面说一下大概的用法：
<dl>标记定义了一个定义列表，定义列表中的条目是通过使用<dt>标记(“definition title”，定义标题)和<dd>标记(“definition description”，定义描述)创建的。<dt>给出了术语名，<dd>标记给出了术语的定义。
也就是说<dt>用来创建列表中的上层项目，<dd>用来创建列表中最下层项目，<dt>和<dd>都必须放在<dl>< /dl>标志对之间。
<dl>
<dt>国内电视台</dt>
<dd>北京电视台</dd>
<dd>上海电视台</dd>
<dd>江西电视台</dd>
<dd>浙江电视台</dd>
</dl>
其中淘宝网也应用了这一系列标签：
<DL>
<DT>热点 </DT>
<DD>
<UL>
<LI><A href="#">>电脑居秋日盛典精彩回顾第三期</A>
<LI><A href="#">>指南——给精明的新手妈妈</A>
<LI><A href="#">>秋冬围巾实用系法 适合搭配衣领 </A>
<LI><A href="#"> >晒客宣言 今天你晒了吗</A>
<LI><A href="#">总有一款适合你 超值本本大推荐</A> </li>
</UL>
</DD>
<DT>数码 </DT>
<DD>
<UL>
<LI><A href="#">每周MP3/MP4精彩内容回顾第十六期</A>
<LI><A href="#">佳能 EOS 40D完全深入解析手册</A>
<LI><A href="#">自拍有理！淘宝自拍丽人访 </A>
<LI><A href="#"> α的力量！SONY α700完全接触</A>
<LI><A href="#">视频照样出色国庆主流视频类MP3</A> </li>
</UL>
</DD>
</DL>
对应的CSS如下：
UL LI {
LIST-STYLE-TYPE: none
}
OL LI {
LIST-STYLE-TYPE: none
}
DL DT {
PADDING: 0px; MARGIN: 0px;
}
DL DD {
PADDING: 0px; MARGIN: 0px;
}
言归正传，表格的用法如下
<style type="text/css">
*{margin:0;padding:0;font:14px/20px \'宋体\'; color:red;}
dl{width:353px;border-top:1px solid #ccc;margin-top:30px;margin-left:20px;}
dt{float:left;width:80px;border:1px solid #ccc;border-top:0;text-align:right;height:20px;}
dd{float:left;padding-left:10px;width:260px;border-bottom:1px solid #ccc; border-right:1px solid #ccc;height:20px;position:relative;}
p{border-left:1px solid #ccc;width:180px;height:20px;position:absolute;top:0;right:0;padding-left:10px;}
span{border-right:1px solid #ccc;width:80px;float:left;margin-right:10px;}
</style>
<dl>
<dt>网站名字：</dt><dd>建站学</dd>
<dt>联系人：</dt><dd>客服<p><span>手机：</span>136000000</p></dd>
<dt>联系电话：</dt><dd>0000-6215278 6213702</dd>
<dt>联系传真：</dt><dd>0000-6215278 6213702</dd>
<dt>邮编：</dt><dd>450000<p><span>QQ：</span>136852657</p></dd>
<dt>地址：</dt><dd>中国河南</dd>
<dt>网址：</dt><dd>http://www.jzxue.com</dd>
<dt>E-mail：</dt><dd>webmaster#jzxue.com</dd>
</dl>