转自：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. orcle函数的使用,及其调用

    CREATE OR REPLACE Function getBdateT( D_Build date, Q_Date date) return Date as D_Return Date; /*返回的 ...

  2. div+css:两个div并排等高 (table-cell)

    两个div并排等高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  3. ionic 发布 inoc显示不正确

    前两天因为学习的问题,把本地环境给搞崩了,然后重新安装环境之后发现生成的安装包不能使用,然后找了很多原因都不能解决,因为之前发布ios的时候使用命令 ionic resources的时候就可以将图标显 ...

  4. C# 数据批量插入到数据库SqlBulkCopy（源数据类型：List<T> Or DataTable）

      /*_____________________ List<T>类型数据 To Sql_______________________________*/ /// <summary& ...

  5. HMM基本原理及其实现（隐马尔科夫模型）

    HMM(隐马尔科夫模型)基本原理及其实现 HMM基本原理 Markov链:如果一个过程的“将来”仅依赖“现在”而不依赖“过去”,则此过程具有马尔可夫性,或称此过程为马尔可夫过程.马尔可夫链是时间和状态 ...

  6. 237. Delete Node in a Linked List

    在链接列表中删除节点. 编写一个函数来删除单链表中的一个节点(除了尾部),只提供对该节点的访问..假设链表是1 - > 2 - > 3 > 4,并给出了具有值为3的节点, 链表应该成 ...

  7. XSS的防御

    基于代码修改的防御 和SQL注入防御一样,XSS攻击也是利用了Web页面的编写疏忽,所以还有一种方法就是从Web应用开发的角度来避免: 步骤1.对所有用户提交内容进行可靠的输入验证,包括对URL.查询 ...

  8. jexus5.8.2 linux x64通用版[未集成mono] 配置https

    一.找到mono安装位置 sudo find / -name mono 二.首先查看"/lib"或"/usr/lib"等系统库文件夹中是否有SSL库文件的名字, ...

  9. php、前端开发（网站建设）环境搭建

    php集成开发环境wampserver,是一款免费开源的软件,下载地址http://www.wampserver.com,由于是国外的网站,打开速度慢,根据自己的电脑选择32位/64位的系统下载.

  10. BFC

    先看一下英文解释:Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cell ...