云南网站建设创新企业 昆明多彩网络公司

列表li的使用场合和注意事项

来源：昆明多彩网络公司 日期：2010-09-21 阅读： 发表评论

看看li在网页中的应用：

1、新闻列表，最最常见的网页内容排列，一行后跟着一行，然后翻页；典型代码：<li><a href="http://www.kmwzjs.com">新闻的标题：昆明网站建设公司</a>2010-9-21</li>，一般是标题居左，日期居右，css应该这样写：li { text-align: right} li a { float: left}，可以做到最少代码和最少的classname。

2、产品列表，也经常用到li用来排序，典型代码：<li><a href="http://www.kmwzjs.com"><img src="test.jpg"><br>产品名称</li>，css应该这样写：li { width: 150px; height: 150px; display: inline-block; *display: block; *zoom: 1; text-align: center}，其中*号是为了兼容ie6及一下版本的浏览器，这样写兼容性极好，和之前用的float写法相比可以更加容易控制元素的摆放，并且不用写多余的css hack代码去兼容更多的浏览器。

3、导航列表，每个网站都有导航，这个应该是最多用的场所了，看看以前的写法吧：<li><a href=http://www.kmwzjs.com>网站首页</a></li>，这样写，看似没有什么的，但是从精简代码的角度来看还不算完美，我们应该直接写成<a href=http://www.kmwzjs.com>网站首页</a>，css应该这样写：a { display: inline-block; width: 150px; height: 30px}，li的inline-block有ie6的兼容问题，但是a标签的inline-block属性所有浏览器都认可，不存在兼容问题。

以上几种方式都是本着尽量减少网页代码量，极限提升网站速度，兼容所有浏览器的角度得出的经验心得。