首页 > 软件开发 > HTML >

Html中相对少用的定义列表:DL使用详解

来源:互联网 2023-03-16 19:10:43 344

当你的页面上需要显示一个列表,每个列表内容有标题,有内容时,我们就需要使用DL定义列表了。下面来看下具体怎么使用的。QB4办公区 - 实用经验教程分享!

方法/步骤

  • 1

    DL其实和无序列表OL的使用很类似。QB4办公区 - 实用经验教程分享!

    我们的定义列表是由dl标签来表示的。QB4办公区 - 实用经验教程分享!

    Html中相对少用的定义列表:DL使用详解QB4办公区 - 实用经验教程分享!

  • 2

    一个列表项首先有dt来定义该项的标题。(这里的应该是title的意思了)QB4办公区 - 实用经验教程分享!

    Html中相对少用的定义列表:DL使用详解QB4办公区 - 实用经验教程分享!

  • 2本页面未经授权抓取自百度经验
  • 3

    然后由dd来定义该项的内容。(这里的第二个d应该是details的意思了)QB4办公区 - 实用经验教程分享!

    Html中相对少用的定义列表:DL使用详解QB4办公区 - 实用经验教程分享!

  • 4

    如果有多项列表项时,我们重复定义dt, dd就行了。QB4办公区 - 实用经验教程分享!

    Html中相对少用的定义列表:DL使用详解QB4办公区 - 实用经验教程分享!

  • 5

    看下现在这个定义列表的效果,每项有标题,有内容,标题项加粗显示了,可以让人很明确的就知道是一个标题。QB4办公区 - 实用经验教程分享!

    Html中相对少用的定义列表:DL使用详解QB4办公区 - 实用经验教程分享!

  • 6

    但上面的显示还是比较粗糙一点,我们可以添加样式,让其更每观点。QB4办公区 - 实用经验教程分享!

    添加间距,行距,缩进等样式,并为dl添加线条,css代码如图。QB4办公区 - 实用经验教程分享!

    Html中相对少用的定义列表:DL使用详解QB4办公区 - 实用经验教程分享!

  • 7

    再看下现在的效果,漂亮了很多了。QB4办公区 - 实用经验教程分享!

    Html中相对少用的定义列表:DL使用详解QB4办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!QB4办公区 - 实用经验教程分享!


    标签: HTMLCSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码