2-13 列表--定义列表
本节编程练习不计算学习进度,请电脑登录imooc.com操作

列表--定义列表

对于定义列表而言,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行输入正确的代码,实现如下所示的定义列表效果:

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>定义列表</title>
  6. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. </head>
  8.  
  9. <body>
  10. <dl>
  11. <dt>W3cplus</dt>
  12. <dd>一个致力于推广国内前端行业的技术博客</dd>
  13. <dt>慕课网</dt>
  14. <dd>一个真心在做教育的网站</dd>
  15. </dl>
  16. <!--下面是代码任务部分-->
  17.  
  18.  
  19.  
  20.  
  21. </body>
  22. </html>
下一节