用 DL 标签实现信息列表

欧雷 发表于

0 条评论

在做网页时,经常会遇到各种各样的列表,其中有一类是这种:

天猫商品详情页面截图(2013 年)

看到这个效果图,对于经验不足的人来说,他们的第一反应大概是用 table 来实现。确实,在布局方面用 table 比较容易操控,但现在大部分人都知道这个在上世纪九十年代用于网页布局的「老霸主」的最大缺陷——损耗浏览器性能!这与浏览器渲染引擎的在渲染 DOM 树时的工作原理有关。

既然 table 不行事儿了,就该轮到 divul 这对「哪有事儿哪到」的「人气兄弟」了!这两个也是被用到烂(滥用)的 HTML 标签。从外行和刚入行的人把「网页制作」叫成「DIV+CSS」就知道 div 在人们心中的地位有多么的「神圣」了……

截图中的部分实际上就是一套交易信息的定义:价格、配送方式、销量、分类等等。左边的是被定义的「项(term)」,右边是针对「项」的「说明」,也就是「描述(description)」。综合这个事物的本质、浏览器渲染、语义等方面来考虑,选择「定义列表(Definition List)」dl来实现是最合适不过的!「定义列表」这一套标签中,用 dl 来表示整套信息,dt 来表示「项」,dd 来表示「描述」。其中 dtdd 分别是英文词组「Definition Term」与「Definition Description」的首字母缩写。

<dl>
    <dt>价格</dt>
    <dd><small>&yen;</small><b>1599.00 - 1999.00</b></dd>
    <dt>配送</dt>
    <dd>北京 至 杭州 快递:10.00 EMS:20.00</dd>
    <dt>月销量</dt>
    <dd>11 件</dd>
    <dt>颜色分类</dt>
    <dd>
        <label><input type="radio" name="stype" checked="checked">柜台展示机 特价机 马里奥红</label>
        <label><input type="radio" name="stype">发顺丰马里奥银色+2款中文游戏</label>
    </dd>
    <dt>游戏机套餐</dt>
    <dd>
        <label><input type="radio" name="plan" checked="checked">套餐一</label>
        <label><input type="radio" name="plan">套餐二</label>
    </dd>
    <dt>数量</dt>
    <dd><input type="text" value="1"></dd>
</dl>
dl, dd { overflow: hidden; *zoom: 1; }
dt { width: 5em; float: left; padding-right: 1em; }
dd { margin-bottom: .5em; }

本文主要内容是dl 标签来实现商品信息列表的布局,右侧商品款式等选择的实现不在本文讨论范围内,故该 demo 只将主体部分实现。兼容 IE6 及以上和其他标准浏览器。

总结

只要需求是左侧为标题,右侧为内容的两栏结构的列表(或称为「表格」),都可以用本文所阐述的方法来实现!