太阳城网址(中国)百度百科

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

在线qq:540105663

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

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

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

看看li在网页中的应用:

1、新闻列表,最最常见的网页内容排列,一行后跟着一行,然后翻页;典型代码:

  • ">新闻的标题:昆明网站建设公司2010-9-21
  • ,一般是标题居左,日期居右,css应该这样写:li { text-align: right} li a { float: left},可以做到最少代码和最少的classname。

    2、产品列表,也经常用到li用来排序,典型代码:

  • ">
    产品名称
  • ,css应该这样写:li { width: 150px; height: 150px; display: inline-block; *display: block; *zoom: 1; text-align: center},其中*号是为了兼容ie6及一下版本的浏览器,这样写兼容性极好,和之前用的float写法相比可以更加容易控制元素的摆放,并且不用写多余的css hack代码去兼容更多的浏览器。

    3、导航列表,每个网站都有导航,这个应该是最多用的场所了,看看以前的写法吧:

  • >网站首页
  • ,这样写,看似没有什么的,但是从精简代码的角度来看还不算完美,我们应该直接写成>网站首页,css应该这样写:a { display: inline-block; width: 150px; height: 30px},li的inline-block有ie6的兼容问题,但是a标签的inline-block属性所有浏览器都认可,不存在兼容问题。

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

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

    XML 地图