DL DT DD标签的详细描述及示例

sunguanxing

浏览: 1097328 次
性别:
来自: 北京

最近访客更多访客>>

u012363178

zhb32236

javawang2012

841125419

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS XHTML HTML

我们平时常用的是< ul>< li>标签，不过dd、dt标签也蛮不错，特别是发布程序的时候功能模块列表什么的可以使用它来排版。

< dl>< /dl>< dt>< /dt>< dd>< /dd>
< dl>< /dl>用来创建一个普通的列表,< dt>< /dt>用来创建列表中的上层项目，< dd>< /dd>用来创建列表中最下层项目，< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。看一下下边的例子您就会明白了：

dl ——define list——定义列表
dt ——define list title——用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。
dd——define list define——用于生成定义列表各列表项的说明文字段，重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解

-----下面是一个关于此标签的示例

<!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" />
<style>
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.8; padding:10px;}
dl{clear:both; margin-bottom:5px;float:left;}
dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF}
dt:hover{background:#848484;cursor:pointer;}
dd:hover{background:#848484;cursor:pointer;}
dd{ position:absolute; right:5px;}
h1{clear:both;font-size:14px;}

/*限制宽度的CSS样式*/
<!--
{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.8; padding:10px;}
dl{clear:both; margin-bottom:5px;float:left;width:100%}
dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF}
dd{ float:right}
h1{clear:both;font-size:14px;}
div{ width:500px; float:left;}
-->
</style>
</head>
<body>
<h1>test</h1>
<div>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
</div>
<h1>test</h1>
<div>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
    <dd>xxx</dd>
  </dl>
</div>
</body>
</html>

分享到：