碼上歡樂
相關內容    簡體    繁體

DIV+CSS中標簽dl dt dd常用的用法

本文轉載自   查看原文   2016-12-14 16:17   9797 

轉自：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>  


 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 定義列表dl中標簽 dt 與標簽dd對齊方法，標簽ul與標簽li對齊 dl,dt,dd標簽的使用
、
和
標記的用法 html中dl dt dd 標簽用法與圖片列表自動換行 div+css中clear用法 利用DIV+CSS制作網頁過程中常用的基本概念及標簽使 css - 使用 " dl、dt、dd " 描述列表的形式 , 實現 【圖片加下方文字】 的快速布局 div+css 常用三種自動適應寬度分欄 HTML 列表
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM