转自：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. 使用视 meta 标签来控制手机浏览器布局

    移动浏览器的Fennec一样呈现在一个虚拟的"窗口"页面(视),通常比屏幕宽.所以他们不需要去挤每个页面布局到一个小窗口(这会破坏许多非移动优化的网站) .用户可以平移和缩放才能看 ...

  2. Bzoj1076 [SCOI2008]奖励关

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1935  Solved: 1053 Description 你正在玩你最喜欢的电子游戏,并且刚刚进入一 ...

  3. CentOS 7 安装 配置 MySQL

    第一部分:CentOS 7安装MySQL 5.7 1.下载YUM库 shell > wget http://dev.mysql.com/get/mysql57-community-release ...

  4. PHP中explode和implode的区别

    字符串的连接与分割是非常重要的两个内容,通过其可以将数组按照指定的规则转换成字符串,也可以将字符串按照指定的规则进行分割,返回一个数组.其应用范围很广,如在购物网站的购物车,在线投票系统等.这两项技术 ...

  5. 502 Bad Gateway深究

    早上收到502报警,设置的报警规则是502错误两分钟超过500就报警. 排障流程: 日志分析系统报障-->查看日志系统日志-->nginx错误日志-->php错误日志-->ph ...

  6. dietpi请暂时不要升级为jessie

    关于升级到Debian最新稳定版jessie,作者是这样说的:一旦官方Raspbian升级到Jessie,DietPi也会随之切换到Jessie.由于改动较大,很多功能需要修改后才能正常使用,到时候可 ...

  7. Python:eval的妙用和滥用

    时间 2014-07-08 13:05:24 CSDN博客 原文  http://blog.csdn.net/zhanh1218/article/details/37562167 主题 Python ...

  8. maven阿里云中央仓库

    配置 修改maven根目录下的conf文件夹中的setting.xml文件,内容如下: <mirrors> <mirror> <id>alimaven</id ...

  9. CSS布局奇淫技巧之--各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  10. java合集框架第一天

    文章目录 1 collection接口 2  list接口 3 Iterator 4 Vertor 5  ArrayList 6 LinkedList 主体部分: (1)collection Java ...