5

用 DL 标签实现信息列表

 3 years ago
source link: https://ourai.ws/posts/definition-list-with-dl/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
用 DL 标签实现信息列表

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

天猫商品详情页面截图（2013 年）

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

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

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

<dl>
    <dt>价格</dt>
    <dd><small>¥</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 及以上和其他标准浏览器。

只要需求是左侧为标题，右侧为内容的两栏结构的列表（或称为“表格”），都可以用本文所阐述的方法来实现！


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK