转自：http://smallpig301.blog.163.com/blog/static/9986093201010262499229/

< dl>< /dl>用来创建一个普通的列表,

< dt>< /dt>用来创建列表中的上层项目，

<dd>< /dd>用来创建列表中最下层项目，

< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

实例一：

效果:

源码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns=" http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style>
  6. body{ font-size:12px; line-height:1.8; width:900px; margin:auto;}
  7. *{ margin:0; padding:0;}
  8. h1{ background:red; font-size:14px; height:35px; line-height:35px; padding-left:20px; color:white;}
  9. #Methods1{ width:900px; background:#ccc; padding-bottom:20px;}
  10. #Methods1 dl{margin:20px 0 0 20px; float:left;  background:red;}
  11. #Methods1 dt{width:180px; margin:10px; height:120px; background:#FFF;}
  12. #Methods1 dd{width:180px; margin:0 0 10px 10px; height:30px; line-height:30px; background:#FFFFFF; text-align:center;}
  13. </style>
  14. </head>
  15. <body>
  16. <h1>用法一：</h1>
  17. <div id="Methods1">
  18. <dl>
  19. <dt><a href="#">图片交给我DT</a></dt>
  20. <dd>标题交给我DD</dd>
  21. </dl>
  22. <dl>
  23. <dt><a href="#">图片交给我DT</a></dt>
  24. <dd>标题交给我DD</dd>
  25. </dl>
  26. <dl>
  27. <dt><a href="#">图片交给我DT</a></dt>
  28. <dd>标题交给我DD</dd>
  29. </dl>
  30. <dl>
  31. <dt><a href="#">图片交给我DT</a></dt>
  32. <dd>标题交给我DD</dd>
  33. </dl>
  34. <dl>
  35. <dt><a href="#">图片交给我DT</a></dt>
  36. <dd>标题交给我DD</dd>
  37. </dl>
  38. <dl>
  39. <dt><a href="#">图片交给我DT</a></dt>
  40. <dd>标题交给我DD</dd>
  41. </dl>
  42. <dl>
  43. <dt><a href="#">图片交给我DT</a></dt>
  44. <dd>标题交给我DD</dd>
  45. </dl>
  46. <dl>
  47. <dt><a href="#">图片交给我DT</a></dt>
  48. <dd>标题交给我DD</dd>
  49. </dl>
  50. </div>
  51. </body>
  52. </html>

实例二：

效果：

源码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns=" http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style>
  6. body{ font-size:12px; line-height:1.8; width:900px; margin:auto;}
  7. *{ margin:0; padding:0;}
  8. h1{ background:red; font-size:14px; height:35px; line-height:35px; padding-left:20px; color:white;}
  9. h2{ font-size:14px; height:35px; line-height:35px;}
  10. #Methods2{ width:900px; background:#ccc;}
  11. #Methods2 dl{width:860px; height:200px; margin:20px; background:red;}
  12. #Methods2 dt{width:180px; height:180px; float:left; margin:10px; background:#FFF;}
  13. #Methods2 dd{width:610px; height:160px; float:left; margin:10px 10px 10px 0; padding:10px 20px; line-height:20px; background:#FFFFFF; text-align:left;}
  14. .More{ position:absolute; right:120px; margin-top:10px;}
  15. </style>
  16. </head>
  17. <body>
  18. <h1>用法二：</h1>
  19. <div id="Methods2">
  20. <dl>
  21. <dt><a href="#">图片交给我DT</a></dt>
  22. <dd>
  23. <h2>标题</h2>
  24. <span>内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--</span><br />
  25. <a class="More">了解更多...</a>
  26. </dd>
  27. </dl>
  28. <dl>
  29. <dt><a href="#">图片交给我DT</a></dt>
  30. <dd>
  31. <h2>标题</h2>
  32. <span>内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--</span><br />
  33. <a class="More">了解更多...</a>
  34. </dd>
  35. </dl>
  36. </div>
  37. </body>
  38. </html>
  39. <wbr style="LINE-HEIGHT: 28px"></wbr>

实例三：

效果：

源码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns=" http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style>
  6. body{ font-size:12px; line-height:1.8; width:900px; margin:auto;}
  7. *{ margin:0; padding:0;}
  8. h1{ background:red; font-size:14px; height:35px; line-height:35px; padding-left:20px; color:white;}
  9. #Methods3 { width:880px; background:#ccc; padding:20px 20px 20px 0;}
  10. #Methods3 dl { float:left; width:350px; height:170px; padding:20px; margin-left:20px; background:white;}
  11. #Methods3 dt {  float: left; width: 60px;}
  12. #Methods3 dd { float: left; width: 290px;}
  13. </style>
  14. </head>
  15. <body>
  16. <h1>用法三：</h1>
  17. <div id="Methods3">
  18. <dl>
  19. <dt>商品名称：</dt>
  20. <dd><strong>[好大的一只啊] </strong>忧惠：<span class="red"><em>8.5折</em></span></dd>
  21. <dt>商品简介：</dt>
  22. <dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称
  23. 商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span class="red";>详细介绍</span>]</dd>
  24. <dt>店铺地址：</dt>
  25. <dd>商品名称</dd>
  26. <dt>联系电话：</dt>
  27. <dd>9999999999999999999999999 </dd>
  28. </dl>
  29. <dl>
  30. <dt>商品名称：</dt>
  31. <dd><strong>[好大的一只啊] </strong>忧惠：<span class="red"><em>8.5折</em></span></dd>
  32. <dt>商品简介：</dt>
  33. <dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称
  34. 商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span class="red";>详细介绍</span>]</dd>
  35. <dt>店铺地址：</dt>
  36. <dd>商品名称</dd>
  37. <dt>联系电话：</dt>
  38. <dd>9999999999999999999999999</dd>
  39. </dl>
  40. </div>
  41. </body>
  42. </html> <wbr style="LINE-HEIGHT: 28px"></wbr>

实例四：

效果：

源码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns=" http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style>
  6. body{ font-size:12px; line-height:1.8; width:900px; margin:auto;}
  7. *{ margin:0; padding:0;}
  8. h1{ background:red; font-size:14px; height:35px; line-height:35px; padding-left:20px; color:white;}
  9. #Methods4 { width:860px; background:red; padding:20px; text-align:center;}
  10. #Methods4 dl{ width:820px; background:white; padding:20px;  }
  11. .titles{ float:left; width:205px; background:#999; height:30px; line-height:30px;}
  12. .titles1-1{ float:left; width:205px; height:50px; background:#ccc; border-bottom:dashed black 1px;}
  13. .bg{ background:#ddd;}
  14. strong{ font-weight:bold;}
  15. </style>
  16. </head>
  17. <body>
  18. <h1>用法四：</h1>
  19. <div id="Methods4">
  20. <dl>
  21. <dt class="titles"><strong>商品图片</strong></dt>
  22. <dd class="titles"><strong>商品名称</strong></dd>
  23. <dd class="titles"><strong>商品介绍</strong></dd>
  24. <dd class="titles"><strong>商品价格</strong></dd>
  25. <dt class="titles1-1 bg">图片交给我DT</dt>
  26. <dd class="titles1-1 bg">商品名称商品名称</dd>
  27. <dd class="titles1-1 bg">商品介绍商品介绍</dd>
  28. <dd class="titles1-1 bg">商品价格商品价格</dd>
  29. <dt class="titles1-1">图片交给我DT</dt>
  30. <dd class="titles1-1">商品名称商品名称</dd>
  31. <dd class="titles1-1">商品介绍商品介绍</dd>
  32. <dd class="titles1-1">商品价格商品价格</dd>
  33. <dt class="titles1-1 bg">图片交给我DT</dt>
  34. <dd class="titles1-1 bg">商品名称商品名称</dd>
  35. <dd class="titles1-1 bg">商品介绍商品介绍</dd>
  36. <dd class="titles1-1 bg">商品价格商品价格</dd>
  37. </dl>
  38. </div>
  39. </body>
  40. </html>

DIV+CSS中标签dl dt dd常用的用法的更多相关文章

  1. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  2. html中的dl,dt,dd标签

    html <dl> <dt> <dd>是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与table表格类似组合标签,故名我们也 ...

  3. 关于H标签 DL DT DD标签的一个小故事

    看了一篇关于SEO论坛的论文,大概故事内容是:一个专业的销售公司,里面SEO  技术多多,可就是销售网站的SEO的情况极为恼火.这天,老板又招到了一个SEO,直接聘为SEO主管全权负责网站的SEO,并 ...

  4. HTML 中的 dl(dt,dd)、ul(li)、ol(li)

    HTML <dl> 标签 #定义和用法 <dl> 标签定义了定义列表(definition list). <dl> 标签用于结合 <dt> (定义列表中 ...

  5. HTML 列表中的dl,dt,dd,ul,li,ol区别及应用

      无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记. 无序列表始于 <ul> 标签.每个列表项始于 <li>. 有序列表 同样,有序列表也是 ...

  6. HTML 列表中的dl,dt,dd,ul,li,ol区别

    1.无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记. 无序列表始于 <ul> 标签.每个列表项始于 <li>. 2.有序列表 同样,有序列表 ...

  7. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...

  8. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一.dl dt dd认识 ...

  9. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

随机推荐

  1. C++中重定义的问题——问题的实质是声明和定义的关系以及分离式编译的原理

    这里的问题实质是我们在头文件中直接定义全局变量或者函数,却分别在主函数和对应的cpp文件中包含了两次,于是在编译的时候这个变量或者函数被定义了两次,问题就出现了,因此,我们应该形成一种编码风格,即: ...

  2. DedeCMS flink_add Getshell漏洞 管理员CSRF漏洞

    DedeCMS flink_add Getshell漏洞 管理员CSRF漏洞 1.漏洞利用 由于tpl.php中的$action,$content,$filename变量没有初始化,从而能操纵这些变量 ...

  3. spring mvc重定向方法

    一.不带参数,直接重定向到另一个地址: 返回String直接跳转,如: @RequestMapping(value = "/filehandle") public String u ...

  4. iMac 打包

    1.打包成 dmg 1.1.编译文件 打开工程文件之后选取Products,复制 "项目名.app" 到指定文件夹 1.2.打开磁盘工具(所有程序-> 实用工具 ->磁 ...

  5. android studio关联genymotion模拟器，未显示设备

    如以下截图所示,在搭建android studio+genymotion时,遇到android studio关联genymotion时,显示不出模拟器设备,请问有没有遇到此现象的朋友,分享下解决方法, ...

  6. Python OOP（面向对象编程）

    一OOP的作用 在Python中,类是面向对象设计(OOP)的主要工具.通过使用类这种工具,OOP可以: 1.分解代码,最小化代码的冗余. 2.通过定制现有的代码,来编写新的程序,而不用在原处进行修改 ...

  7. Win10 磁盘占用 100% 有效解决办法

    立即查看 任务管理器,看看是不是有一个 服务主机 unistack服务组或者找类似名称的,点开以后你会看到里面有同步主机 blablah请你毫不犹豫的结束它!结束它!结束它! 按下WIN+R调出运行, ...

  8. 利用Tomcat内置的servlet实现文件下载功能

    起因 最近博客所在的VPS挂了又要重装系统,又要重装各种软件. 以前我也经常更换VPS,每次更换都是各种坑爹事情..比如要下载java.下载tomcat.下载mysql..........以前每次我都 ...

  9. js中获取窗口高度的方法

    取窗口滚动条滚动高度 function getScrollTop() { var scrollTop=0; if(document.documentElement&&document. ...

  10. scrapy 学习笔记

    1.scrapy 配合 selenium.phantomJS 抓取动态页面, 单纯的selemium 加 Firefox浏览器就可以抓取动态页面了, 但开启窗口太耗资源,而且一般服务器的linux 没 ...