网页制作中的CSS+DIV:dl,dt,dd分别表示什么意思?

html-css013

网页制作中的CSS+DIV:dl,dt,dd分别表示什么意思?,第1张

<dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition

title”,定义标题)和<dd>标记(“definition

description”,定义描述)创建的。<dt>给出了术语名,<dd>标记给出了术语的定义。

也就是说<dt>用来创建列表中的上层项目,<dd>用来创建列表中最下层项目,<dt>和<dd>都必须放在<dl><

/dl>标志对之间。

<dl>

<dt>我们在做列表标题</dt>

<dd>我们在做列表</dd>

<dd>我们在做列表</dd>

<dd>我们在做列表</dd>

<dd>我们在做列表</dd>

</dl>

在百度空间中,其实是在整个网络中

定义列表dl是一种特殊的列表形式,dl是definition lists的英文缩写。dl标签是成对出现,以<dl>开始,</dl>结束。列表中每个元素的标题使用<dt>,definition term,后面跟随<dd>,definition description用于描述列表中元素的内容。

定义列表dl在CSS布局中的应用是非常广泛的,只是很多人对此标签非常不熟悉,以至于应用的很少。

为dl标签设置浮动即可啊

范例代码如下(在实际开发当中,记得先引入CSS重置文件,此处只给出的是核心功能代码)

<style>

.list {

width: 800px

height: 400px

border: 4px solid black

}

.list dl {

float: left

width: 300px

height: 200px

border: 2px solid red

}

</style>

<div class="list">

<dl>

<dt>自定义列表的标题</dt>

<dd>自定义列表的内容</dd>

</dl>

<dl>

<dt>码匠</dt>

<dd>h5course</dd>

</dl>

</div>

做网页布局之前建议先掌握盒模型、浮动等相关知识。可以借助《HTML5布局之路》等书籍进行系统化的学习。