18910140161

Css

首页 >> 前端开发 >> Css

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

顺晟科技

2022-09-13 14:01:41

169

转自：http://smallpig301.blog.163.com/blog/static/9986093201010262499229/

 

< dl>< /dl>用来创建一个普通的列表,

< dt>< /dt>用来创建列表中的上层项目，

<dd>< /dd>用来创建列表中最下层项目，

< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

 

实例一：

效果:

DIV+CSS中标签dl dt dd常用的用法 - 小猪 - 小猪的网上家园
 

源码：

[html] view plain copy 在CODE上查看代码片派生到我的代码片
  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><a href="#">图片交给我DT</a></dt>  
  23.     <dd>标题交给我DD</dd>  
  24.   </dl>  
  25.   <dl>  
  26.     <dt><a href="#">图片交给我DT</a></dt>  
  27.     <dd>标题交给我DD</dd>  
  28.   </dl>  
  29.   <dl>  
  30.     <dt><a href="#">图片交给我DT</a></dt>  
  31.     <dd>标题交给我DD</dd>  
  32.   </dl>  
  33.   <dl>  
  34.     <dt><a href="#">图片交给我DT</a></dt>  
  35.     <dd>标题交给我DD</dd>  
  36.   </dl>  
  37.   <dl>  
  38.     <dt><a href="#">图片交给我DT</a></dt>  
  39.     <dd>标题交给我DD</dd>  
  40.   </dl>  
  41.   <dl>  
  42.     <dt><a href="#">图片交给我DT</a></dt>  
  43.     <dd>标题交给我DD</dd>  
  44.   </dl>  
  45.   <dl>  
  46.     <dt><a href="#">图片交给我DT</a></dt>  
  47.     <dd>标题交给我DD</dd>  
  48.   </dl>  
  49.   <dl>  
  50.     <dt><a href="#">图片交给我DT</a></dt>  
  51.     <dd>标题交给我DD</dd>  
  52.   </dl>  
  53. </div>  
  54.   
  55. </body>  
  56. </html>  

 

实例二：

效果：

DIV+CSS中标签dl dt dd常用的用法 - 小猪 - 小猪的网上家园

  

源码：

[html] view plain copy 在CODE上查看代码片派生到我的代码片
  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><a href="#">图片交给我DT</a></dt>  
  26.     <dd>  
  27.   <h2>标题</h2>  
  28.   <span>内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--</span><br />  
  29.   <a class="More">了解更多...</a>  
  30.  </dd>  
  31.   </dl>  
  32.   <dl>  
  33.     <dt><a href="#">图片交给我DT</a></dt>  
  34.     <dd>  
  35.   <h2>标题</h2>  
  36.   <span>内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--</span><br />  
  37.   <a class="More">了解更多...</a>  
  38.  </dd>  
  39.   </dl>  
  40. </div>  
  41. </body>  
  42. </html>  
  43. <wbr style="LINE-HEIGHT: 28px"></wbr>  

实例三：

效果：

DIV+CSS中标签dl dt dd常用的用法 - 小猪 - 小猪的网上家园

 

 

源码：

[html] view plain copy 在CODE上查看代码片派生到我的代码片
  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>  

实例四：

效果：

DIV+CSS中标签dl dt dd常用的用法 - 小猪 - 小猪的网上家园  

 

源码：

[html] view plain copy 在CODE上查看代码片派生到我的代码片
  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>  


 

上一篇：【CSS】div 下一篇：HTML CSS + DIV实现整体
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！