DD DT DL标识应用示例

大家平常常见的是< ul>< li>标识,但是dd、dt标识也蛮非常好,非常是公布程序流程的情况下作用控制模块目录甚么的可使用它来排版。

<dl>< /dl>< dt>< /dt>< dd>< /dd>
<dl>< /dl>用来建立1个一般的目录,< dt>< /dt>用来建立目录中的顶层新项目,< dd>< /dd>用来建立目录中最下层新项目,< dt>< /dt>和< dd>< /dd>都务必放在< dl>< /dl>标示对之间。看1下下边的事例您就会搞清楚了:

dl ——define list——界定目录
dt ——define list title——用于转化成界定目录中各目录项的题目,反复应用能够界定好几个目录项的题目。
dd——define list define——用于转化成界定目录各目录项的表明文本段,反复应用能够界定好几个表明文本段。dd是对应dt的简洁明了表明或解

事例:

拷贝编码
编码以下:

<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>

事例2:

拷贝编码
编码以下:

<html>
<!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>
<title>无题目文本文档</title>
<style type="text/css">
<!--
dt {
float: left;
width: 60px;
margin: 0px;
padding: 0px;
}
dd {
float: left;
clear: none;
width: 290px;
margin: 0px;
padding: 0px;
}
dl {
width: 350px;
font-size: 9pt;
line-height: 1.5em;
position:relative;
margin: 0px;
padding: 0px;
left:15px;
}
.red {
color: #FF3300;
}
#box {
width: 500px;
background-color: #F1F1F7;
}
#box #content {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
}
-->
</style>
</head>
<body>
<div id="box">
<div id="content">
<img src=/Article/UploadFiles/200704/200704.gif align="left"/ >
<dl>
<dt>产品名字:</dt>
<dd><strong>[好大的1只啊] </strong>忧惠:<span class="red"><em>8.5折</em></span></dd>
<dt>产品简介:</dt>
<dd>产品名字产品名字产品品名字产品名字产品名字产品名字产品名字产品名字产品名字产品名字产品品名字产品名字产品名字产品名字产品名字 产品名字产品名字产品名字产品品名字产品名字产品名字产品名字产品名字产品名字……[<span class="red";>详尽详细介绍</span>]</dd>
<dt>店面详细地址:</dt>
<dd>产品名字</dd>
<dt>联络电話:</dt>
<dd>0000⑴2345678 87654321 </dd>
</dl>
</div>
</div>
</body>
</html>