码迷,mamicode.com
首页 > Web开发 > 详细

DIV+CSS中标签dl dt dd常用的用法

时间:2016-12-14 16:29:49      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:tracking   bottom   art   ack   tle   att   div+css   名称   常用   

转自: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.   
  7. body{ font-size:12px; line-height:1.8; width:900px; margin:auto;}  
  8. *{ margin:0; padding:0;}  
  9. h1{ background:red; font-size:14px; height:35px; line-height:35px; padding-left:20px; color:white;}  
  10.   
  11. #Methods1{ width:900px; background:#ccc; padding-bottom:20px;}  
  12. #Methods1 dl{margin:20px 0 0 20px; float:left;  background:red;}  
  13. #Methods1 dt{width:180px; margin:10px; height:120px; background:#FFF;}  
  14. #Methods1 dd{width:180px; margin:0 0 10px 10px; height:30px; line-height:30px; background:#FFFFFF; text-align:center;}  
  15.   
  16. </style>  
  17. </head>  
  18. <body>  
  19. <h1>用法一:</h1>  
  20. <div id="Methods1">  
  21.   <dl>  
  22.     <dt><href="#">图片交给我DT</a></dt>  
  23.     <dd>标题交给我DD</dd>  
  24.   </dl>  
  25.   <dl>  
  26.     <dt><href="#">图片交给我DT</a></dt>  
  27.     <dd>标题交给我DD</dd>  
  28.   </dl>  
  29.   <dl>  
  30.     <dt><href="#">图片交给我DT</a></dt>  
  31.     <dd>标题交给我DD</dd>  
  32.   </dl>  
  33.   <dl>  
  34.     <dt><href="#">图片交给我DT</a></dt>  
  35.     <dd>标题交给我DD</dd>  
  36.   </dl>  
  37.   <dl>  
  38.     <dt><href="#">图片交给我DT</a></dt>  
  39.     <dd>标题交给我DD</dd>  
  40.   </dl>  
  41.   <dl>  
  42.     <dt><href="#">图片交给我DT</a></dt>  
  43.     <dd>标题交给我DD</dd>  
  44.   </dl>  
  45.   <dl>  
  46.     <dt><href="#">图片交给我DT</a></dt>  
  47.     <dd>标题交给我DD</dd>  
  48.   </dl>  
  49.   <dl>  
  50.     <dt><href="#">图片交给我DT</a></dt>  
  51.     <dd>标题交给我DD</dd>  
  52.   </dl>  
  53. </div>  
  54.   
  55. </body>  
  56. </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.   
  7. body{ font-size:12px; line-height:1.8; width:900px; margin:auto;}  
  8. *{ margin:0; padding:0;}  
  9. h1{ background:red; font-size:14px; height:35px; line-height:35px; padding-left:20px; color:white;}  
  10. h2{ font-size:14px; height:35px; line-height:35px;}  
  11.   
  12. #Methods2{ width:900px; background:#ccc;}  
  13. #Methods2 dl{width:860px; height:200px; margin:20px; background:red;}  
  14. #Methods2 dt{width:180px; height:180px; float:left; margin:10px; background:#FFF;}  
  15. #Methods2 dd{width:610px; height:160px; float:left; margin:10px 10px 10px 0; padding:10px 20px; line-height:20px; background:#FFFFFF; text-align:left;}  
  16. .More{ position:absolute; right:120px; margin-top:10px;}  
  17.   
  18. </style>  
  19. </head>  
  20. <body>  
  21.   
  22. <h1>用法二:</h1>  
  23. <div id="Methods2">  
  24.   <dl>  
  25.     <dt><href="#">图片交给我DT</a></dt>  
  26.     <dd>  
  27.   <h2>标题</h2>  
  28.   <span>内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--</span><br />  
  29.   <class="More">了解更多...</a>  
  30.  </dd>  
  31.   </dl>  
  32.   <dl>  
  33.     <dt><href="#">图片交给我DT</a></dt>  
  34.     <dd>  
  35.   <h2>标题</h2>  
  36.   <span>内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--</span><br />  
  37.   <class="More">了解更多...</a>  
  38.  </dd>  
  39.   </dl>  
  40. </div>  
  41. </body>  
  42. </html>  
  43. <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.   
  7. body{ font-size:12px; line-height:1.8; width:900px; margin:auto;}  
  8. *{ margin:0; padding:0;}  
  9. h1{ background:red; font-size:14px; height:35px; line-height:35px; padding-left:20px; color:white;}  
  10. #Methods3 { width:880px; background:#ccc; padding:20px 20px 20px 0;}  
  11. #Methods3 dl { float:left; width:350px; height:170px; padding:20px; margin-left:20px; background:white;}  
  12. #Methods3 dt {  float: left; width: 60px;}  
  13. #Methods3 dd { float: left; width: 290px;}  
  14.   
  15. </style>  
  16. </head>  
  17. <body>  
  18. <h1>用法三:</h1>  
  19. <div id="Methods3">  
  20. <dl>  
  21.    <dt>商品名称:</dt>  
  22.        <dd><strong>[好大的一只啊] </strong>忧惠:<span class="red"><em>8.5折</em></span></dd>  
  23.    <dt>商品简介:</dt>  
  24.        <dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称  
  25. 商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span class="red";>详细介绍</span>]</dd>  
  26.    <dt>店铺地址:</dt>  
  27.        <dd>商品名称</dd>  
  28.    <dt>联系电话:</dt>  
  29.        <dd>9999999999999999999999999 </dd>  
  30. </dl>  
  31. <dl>  
  32.    <dt>商品名称:</dt>  
  33.        <dd><strong>[好大的一只啊] </strong>忧惠:<span class="red"><em>8.5折</em></span></dd>  
  34.    <dt>商品简介:</dt>  
  35.        <dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称  
  36. 商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span class="red";>详细介绍</span>]</dd>  
  37.    <dt>店铺地址:</dt>  
  38.        <dd>商品名称</dd>  
  39.    <dt>联系电话:</dt>  
  40.        <dd>9999999999999999999999999</dd>  
  41. </dl>  
  42. </div>  
  43. </body>  
  44. </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.   
  7. body{ font-size:12px; line-height:1.8; width:900px; margin:auto;}  
  8. *{ margin:0; padding:0;}  
  9. h1{ background:red; font-size:14px; height:35px; line-height:35px; padding-left:20px; color:white;}  
  10.   
  11. #Methods4 { width:860px; background:red; padding:20px; text-align:center;}  
  12. #Methods4 dl{ width:820px; background:white; padding:20px;  }  
  13. .titles{ float:left; width:205px; background:#999; height:30px; line-height:30px;}  
  14. .titles1-1{ float:left; width:205px; height:50px; background:#ccc; border-bottom:dashed black 1px;}  
  15. .bg{ background:#ddd;}  
  16. strong{ font-weight:bold;}  
  17.   
  18. </style>  
  19. </head>  
  20. <body>  
  21.   
  22. <h1>用法四:</h1>  
  23. <div id="Methods4">  
  24. <dl>  
  25.  <dt class="titles"><strong>商品图片</strong></dt>  
  26.  <dd class="titles"><strong>商品名称</strong></dd>  
  27.  <dd class="titles"><strong>商品介绍</strong></dd>  
  28.  <dd class="titles"><strong>商品价格</strong></dd>  
  29.  <dt class="titles1-1 bg">图片交给我DT</dt>  
  30.  <dd class="titles1-1 bg">商品名称商品名称</dd>  
  31.  <dd class="titles1-1 bg">商品介绍商品介绍</dd>  
  32.  <dd class="titles1-1 bg">商品价格商品价格</dd>  
  33.  <dt class="titles1-1">图片交给我DT</dt>  
  34.  <dd class="titles1-1">商品名称商品名称</dd>  
  35.  <dd class="titles1-1">商品介绍商品介绍</dd>  
  36.  <dd class="titles1-1">商品价格商品价格</dd>  
  37.  <dt class="titles1-1 bg">图片交给我DT</dt>  
  38.  <dd class="titles1-1 bg">商品名称商品名称</dd>  
  39.  <dd class="titles1-1 bg">商品介绍商品介绍</dd>  
  40.  <dd class="titles1-1 bg">商品价格商品价格</dd>  
  41. </dl>  
  42. </div>  
  43. </body>  
  44. </html>  


 

DIV+CSS中标签dl dt dd常用的用法

标签:tracking   bottom   art   ack   tle   att   div+css   名称   常用   

原文地址:http://www.cnblogs.com/hjchoset/p/6179790.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!