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

发布时间:2020-01-24编辑:脚本学堂
ul ol li dl dt dd都是DIV+CSS做网页常用的标签,容易混淆它们,下面文章就讲述一下每个标签的用法,一般对dd,dt,dd使用得很少,懂得结合使用对做架构是很有好处的。需要的朋友参考一下。

DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义,块级元素div尽量少用,和table一样,嵌套越少越好。
ol
有序列表。
 

<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>

表现为:
1……
2……
3……

ul
无序列表,表现为li前面是大圆点而不是123
 

<ul>
<li>……</li>
<li>……</li>
</ul>

很多人容易忽略 dl dt dd的用法
dl 内容块
dt 内容块的标题
内容可以这么写:
 

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

dt和dd中可以再加入 ol ul li和p
明白了这些内容,在使用div布局的时候就会方便很多,w3c提供了很多元素辅助布局。DD DT DL标签我们平时常用的是< 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的简短说明或解
例子:
 

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