DL DT DD标签的详细描述及示例
我们平时常用的是< 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>
页:
[1]