转自：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. 用Model-View-ViewModel构建iOS App(转)

    转载自 Model-View-ViewModel for iOS [译] 如果你已经开发一段时间的iOS应用,你一定听说过Model-View-Controller, 即MVC.MVC是构建iOS a ...

  2. Markdown语法 中文版

    文章翻译自Markdown创始人JOHN GRUBER的 个人博客, 英文原文请参见 Markdown Syntax; 本文地址: http://www.cnblogs.com/ayning/p/43 ...

  3. Java之类的构造器（反射）

    反射: Java反射机制:指的是在Java程序运行状态中,对于任何一个类,都可以获得这个类的所有属性和方法;对于给定的一个对象,都能够调用它的任意一个属性和方法.这种动态获取类的内容以及动态调用对象的 ...

  4. tensorflow中的基本概念

    本文是在阅读官方文档后的一些个人理解. 官方文档地址:https://www.tensorflow.org/versions/r0.12/get_started/basic_usage.html#ba ...

  5. javascript随机打乱数组

    var arr=[]; ;i<;i++){ arr[i]=i; } arr.sort(function(){ return 0.5 - Math.random() }) var str=arr. ...

  6. leetcode

    Coding on LeetCode Online Judge leetcode(leetcode website) Problems algorithms 13. Roman to Integer ...

  7. django进阶

    路由系统 简而言之,django的路由系统作用就是使views里面处理数据的函数与请求的url建立映射关系.使请求到来之后,根据urls.py里的关系条目,去查找到与请求对应的处理方法,从而返回给客户 ...

  8. window frida安装

    当需要安装第三方python包时,可能会用到easy_install命令.easy_install是由PEAK(Python Enterprise Application Kit)开发的setupto ...

  9. windows常用快捷键

    windows常用快捷键 Fn+F1:Windows的支持和帮助 =Windows 徽标+F1 Fn+F2:重命名对象 Fn+F3:查找所有文件 Fn+F4:选择“转到不同的文件夹”框并沿框中的项向下 ...

  10. python学习笔记-（十四）I/O多路复用 阻塞、非阻塞、同步、异步

    1. 概念说明 1.1 用户空间与内核空间 现在操作系统都是采用虚拟存储器,那么对32位操作系统而言,它的寻址空间(虚拟存储空间)为4G(2的32次方).操作系统的核心是内核,独立于普通的应用程序,可 ...