DIV+CSS中标签ul ol li dl dt dd用法

和 ul 一样,dt 也是 XHTML 中的一个列表标签,其子元素为 dt 和 dd。

定义列表和其他类型的列表稍有不同,它由两部分组成:名称和定义。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 指列表,dt 指列表标题,dd 指列表内容。

标准属性

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”
“;
<html
xmlns=”;
<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/20070412091408274.gif align=”left”/
>
<dl>
<dt>商品名称:</dt>
<dd><strong>[好大的一只啊] </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-12345678 87654321
</dd>
</dl>
</div>
</div>
</body></html>

格式示例为:
<dl>
  <dt>标题1</dt>
  <dd>项目11</dd>
  <dd>项目12</dd>
  <dt>标题2</dt>
  <dd>项目21</dd>
  <dd>项目22</dd>
</dl>

id, class, title, style, dir, lang, xml:lang

结果示例为:

事件属性

标题1
项目11

onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

项目12

示例:

标题2
项目21

<dl><br /> <dt>标题</dt><br />
<dd>内容1</dd><br /> <dd>内容2</dd><br
/> </dl> 

项目22

dl —— define list——定义列表

结合 CSS 可打造更高级的效果:

dt —— define list title ——
用于生成定义列表中各列表项的标题,重复使用可以定义多个列表项的标题。注意:其中不能包含
hx 元素。

千一网络
产品

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

文档

dl 列表中有较为强烈的“描述”、“解释”、“补充”意义。 dt 和 dd
有明显的逻辑关系,dd 从属于 dt,dd 中的内容是对 dt
的“描述”、“解释”、“补充”。
另外,dd 之间虽然是平行关系,但是其描述的内容是多角度的,不同于单纯的
li。

专题

例如:

参考

<dl><br />   <dt>JavaScript权威指南</dt><br
/>   <dd>出版社:xxx</dd><br />
  <dd>ISBN: xxx</dd><br />
  <dd>售价:xxx</dd><br /> </dl>

<ul><br />   <li>JavaScript权威指南</li><br
/>   <li>JavaScript Dom 高级程序设计</li><br />
  <li>ppk 谈 JavaScript</li><br /> </ul>

发表评论

电子邮件地址不会被公开。 必填项已用*标注