转自：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. 使用Eclipse进行远程调试

    转自:http://blog.csdn.net/sunyujia/article/details/2614614 今天决定做件有意义的事,写篇图文并茂的blog,为什么要图文并茂?因为很多事可能用语言 ...

  2. bitset用法总结

    b.any() b中是否存在置为1的二进制位? b.none() b中不存在置为1的二进制位吗? b.count() b中置为1的二进制位的个数 b.size() b中二进制位的个数 b[pos] 访 ...

  3. Selenium+python 配置

    1. 安装python, www.python.org. 下载最新的python,应该是32位的.注意配置环境变量. 2. 安装PIP(pip是一个以Python计算机程序语言写成的软件包管理系统). ...

  4. mysql 控制台 快捷方式

    程序--附件--命令提示符 cd C:\Program Files\MySQL\MySQL Server 5.5\bin 我安装的5.5的默认目录,或者也可以增加path路径,直接打开cmd就可以登陆 ...

  5. 5天揭秘js高级技术-第二天

    一.数组 1. 什么是数组? 数组就是一组数据的集合: 其表现形式就是内存中的一段连续的内存地址: 数组名称其实就是连续内存地址的首地址: 2. 关于js中的数组定义 数组定义无需指定数据类型: 数组 ...

  6. 2.2、Hibernate用注解方式实现一对多、多对多关系

    一.一对多关系 1.在上一篇日志中用.xml配置文件项目基础上,再往lib目录先添加一个包-hibernate-jpa-2.0-api-1.0.0.Final.jar 2.新建一个com.st.bea ...

  7. OpenFOAM&Gmsh&CFD圆柱绕流（两个圆柱）

    问题: 圆柱绕流问题,模拟仿真有两个圆柱.一个源的流体变化情况. 解决步骤: 1.使用Gmsh画出网格,并保存cylindertwo.msh 2.以Cavity为基础创建新的Case:Cylinder ...

  8. Datalogic组网模式下通讯

    1.首先要在visiset工具下,设置好地址端口号,组网模式master slave参数: 2.打开工具hercules,选择TCP Client选项,设置参数好连接并通讯,发送打开.关闭 按钮指令, ...

  9. rails数据库查询 N + 1 查询的解决办法

    schema.rb ActiveRecord::Schema.define(version: 20150203032005) do create_table "addresses" ...

  10. VB常用字符串操作函数

    1. ASC(X),Chr(X):转换字符字符码 [格式]: P=Asc(X) 返回字符串X的第一个字符的字符码 P=Chr(X) 返回字符码等于X的字符 [范例]: (1)P=Chr(65) ‘ 输 ...