列表--定义列表，玩转Bootstrap（基础）教程-慕课网

列表--定义列表

对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。
/*源码请查看bootstrap.css文件第594行~第607行*/

dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}

对于定义列表使用，其实很简单，与我们以前的使用定义列表的方法是相同的：

<dl>
    <dt>W3cplus</dt>
    <dd>一个致力于推广国内前端行业的技术博客</dd>
    <dt>慕课网</dt>
    <dd>一个真心在做教育的网站</dd>
</dl>

任务

我也来试试：完成下面任务

在右侧代码编辑器第17行输入正确的代码，实现如下所示的定义列表效果：

备注:这一小节没有正确性验证，请查看结果窗口与任务所给的结果图片是否一致，从而判断输入代码是否正确。

?不会了怎么办

参考代码：

<dl>
     <dt>北京</dt>
     <dd>北京是中国的首都，是政治文化集中地</dd>
     <dt>上海</dt>
     <dd>上海号称东方的巴黎</dd>
</dl>

问答
评论
笔记
代码

全部精华我要发布

dt和dd什么区别

最新回答 / Jessie_673

首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。dd标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。

1 回答 3758 浏览

2019-12-09

区别在哪？

最新回答 / weibo_慕的地2376730

ol有序(有数字排序) ul无序(只有点那种) dl(带有标题的排序，里面有dt和dd)

1 回答 674 浏览

2019-08-06

是因为dl是块级元素？

最新回答 / 慕粉3970555

list-line只适用于有序和无序列表，dl是描述列表，有dt标签不能简单的水平排列，可用dl-horizontal使其dt和dd水平排列

1 回答 1809 浏览

2016-10-22

为什么不在父元素直接设置行高，这两者有区别么

最新回答 / 爱上慕婉清6262634

限定代码层级样式，避免代码污染

4 回答 1291 浏览

2018-10-05

继续向下学习

最新回答 / qq_沙皮狗的期待_0

???

1 回答 685 浏览

2016-08-23

呵呵通过这门课程我熟练地学会了打字

+ 我来回答回答最高可+2积分

5 回答 664 浏览

2022-07-25

<dl>
<dt>北京</dt>
<dd>北京是中国的首都，是政治文化集中地</dd>
<dt>上海</dt>
<dd>上海号称东方的巴黎</dd>
</dl>

+ 我来回答回答最高可+2积分

3 回答 651 浏览

2022-07-10

pass

最新回答 / 爱尚丽明

pass

1 回答 472 浏览

2016-10-21

mark？

+ 我来回答回答最高可+2积分

1 回答 736 浏览

2022-05-23

mark

+ 我来回答回答最高可+2积分

0 回答 661 浏览

2014-09-26

<dl>
<dt>北京</dt>
<dd>北京市中国的首都，是政治文化集中地</dd>
<dt>上海</dt>
<dd>上海号称东方的巴黎</dd>
</dl>

+ 我来回答回答最高可+2积分

3 回答 348 浏览

2022-07-04

<dl>
<dt>北京</dt>
<dd>北京是中u哦的首都，是组织文化集中地</dd>
<dt>上海</dt>
<dd>上海号称东方的巴黎</dd>
</dl>

+ 我来回答回答最高可+2积分

2 回答 883 浏览

2022-05-28

搞定！！！

+ 我来回答回答最高可+2积分

0 回答 825 浏览

2014-09-11

mark！

+ 我来回答回答最高可+2积分

1 回答 937 浏览

2022-05-23

<dl>
<dt>北京</dt>
<dd>北京是中国的首都，是政治文化集中地</dd>
<dt>上海</dt>
<dd>上海号称东方的巴黎，远东的明珠</dd>
</dl>

+ 我来回答回答最高可+2积分

1 回答 928 浏览

2022-06-03

全部我要发布

最热最新

只看我的

2-13 列表--定义列表