HTML5 - dl dt dd-CFANZ编程社区

【1】dl dt dd简解

<dl> 标签定义了定义列表（definition list）。

<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。

如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。

<html>
<body>
<h2>一个定义列表：</h2>
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>

HTML5 - dl dt dd_dd

【2】一个完整实例

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>News</title>
    <style type="text/css">
    body{
            font-size:12px;
            font-family:"SimSun";
        }
    dl.news{
              margin:0;
              padding:0 0 8px 0;
              color:#10478c;
              border:solid 1px #999;
          }
    dl.news dt{
              margin:0;
              padding:0 0.5em;
              font-weight:bold;
              position:relative;
              height:26px;
              line-height:26px;
              border-bottom:solid 1px #999;
              background:#f7f7f7;
          }
    dl.news dd{
              margin:0 5px;
              padding:2px 70px 0 20px;
              position:relative;
              height:auto;
              min-height:22px;
              _height:22px;
              line-height:18px;
              border-bottom: dashed 1px #ddd;
              background:url(http://bbs.blueidea.com/images/smilies/default/han.gif) left center no-repeat;
          }
    dl.news span{
              position:absolute;
              width:70px;
              text-align:right;
              top:0;
              right:0;
          }
    dl.news dt span{
              font-weight:normal;
              padding:0 4px 0 0;
              color:#666;
          }
    dl.news dd span{
              color:#ccc;
          }
    a:link,a:visited{
              color:#1e50a2;
              text-decoration: none;
          }
    a:hover{
              color:#ba2636;
              text-decoration:underline;
          }
    </style>
    </head>
<body>
<div style="width:500px;">
    <dl class="news">
        <dt>国内新闻<span><a href="#">更多信息</a></span></dt>
        <dd>
            <a href="#">小学数学题惹吐槽：弄这么多心机套路有必要吗？</a>
            <span>2017-11-28</span>
        </dd>
        <dd>
            <a href="#">突破9700美元 基金大佬预测明年底升至4万</a>
            <span>2017-11-28</span>
        </dd>
        <dd>
            <a href="#">马化腾：微信推出后 QQ做的巨大牺牲是战略必须</a>
            <span>2017-11-28</span>
        </dd>
        <dd>
            <a href="#">腾讯回应微信网页版将逐步下线：没有关闭</a>
            <span>2017-11-28</span>
        </dd>
        <dd>
            <a href="#">马斯克被曝就的创始人“中本聪”</a>
            <span>2017-11-28</span>
        </dd>
        <dd>
            <a href="#">意大利华人捐赠古版中国地图 证明钓鱼岛为中领土</a>
            <span>2017-11-28</span>
        </dd>
        <dd>
            <a href="#">印尼阿贡火山持续喷发 周边河流变泥浆</a>
            <span>2017-11-28</span>
        </dd>
        <dd>
            <a href="#">南极独特脆弱的生态近况如何?探险家打洞潜入海底</a>
            <span>2017-11-28</span>
        </dd>
    </dl>
    </div>
</body>
</html>