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

|网页对话|电话:0871-63215311

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

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

li在网站建设中应该的非常多:新闻列表,产品列表等等有些有“排列”特性的内容都可能用得到它,但并不是所有的“排列”场所都要使用

看看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属性所有浏览器都认可,不存在兼容问题。

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

发表评论评论列表(有 条评论)

网页对话 0871-63215311