zoukankan      html  css  js  c++  java

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

    转自：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; 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{ 900px; background:#ccc; padding-bottom:20px;}  
    12. #Methods1 dl{margin:20px 0 0 20px; float:left;  background:red;}  
    13. #Methods1 dt{180px; margin:10px; height:120px; background:#FFF;}  
    14. #Methods1 dd{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; 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{ 900px; background:#ccc;}  
    13. #Methods2 dl{860px; height:200px; margin:20px; background:red;}  
    14. #Methods2 dt{180px; height:180px; float:left; margin:10px; background:#FFF;}  
    15. #Methods2 dd{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; 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 { 880px; background:#ccc; padding:20px 20px 20px 0;}  
    11. #Methods3 dl { float:left; 350px; height:170px; padding:20px; margin-left:20px; background:white;}  
    12. #Methods3 dt {  float: left;  60px;}  
    13. #Methods3 dd { float: left;  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; 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 { 860px; background:red; padding:20px; text-align:center;}  
    12. #Methods4 dl{ 820px; background:white; padding:20px;  }  
    13. .titles{ float:left; 205px; background:#999; height:30px; line-height:30px;}  
    14. .titles1-1{ float:left; 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设计规则(转)
    爱情八十一课，可预测的分手
    [性格][管理]《九型人格2》 唐·理查德·里索（美）、拉斯·赫德森（美）
    爱情八十二课，爱情三国杀
    爱情七十九课，不爱权力大
    [心理学]《爱情心灵安全岛》 四四
    一些你不知道的囧知识，保证让你崩溃
    爱情七十四课，我们的意义
    爱情七十六课，门当户对
  • 原文地址：https://www.cnblogs.com/hjchoset/p/6179790.html
Copyright © 2011-2022 走看看