html中dl,dt,dd标签的用法

dl 标签 -- 代表HTML自定义列表
dl标签是成对出现的,以<dl>开始,</dl>结束
自定义列表的开始使用<dl>标签,列表中每个元素的标题使用<dt>(definition term)定义,后面跟随<dd>(definition description)用于描述列表中元素的内容.
属性:
Common -- 一般属性
dl是definition lists的英文缩写
引用网址:http://www.dreamdu.com/xhtml/tag_dl/

示例:

  1. <dl>   
  2.     <dt>www</dt>   
  3.         <dd>World Wide Web的缩写.</dd>   
  4.     <dt>dreamdu</dt>   
  5.         <dd>梦之都.</dd>   
  6.     <dt>com</dt>   
  7.         <dd></dd>   
  8.     <dt>com.cn</dt>   
  9.         <dd></dd>   
  10.     <dt>cn</dt>   
  11.         <dd>这都是域名的后缀.</dd>   
  12. </dl>  
<dl>
	<dt>www</dt>
		<dd>World Wide Web的缩写.</dd>
	<dt>dreamdu</dt>
		<dd>梦之都.</dd>
	<dt>com</dt>
		<dd></dd>
	<dt>com.cn</dt>
		<dd></dd>
	<dt>cn</dt>
		<dd>这都是域名的后缀.</dd>
</dl>


可以对其设置样式已达到想要的显示效果,如下所示:

  1. <html>    
  2. <head>    
  3. <title>Html中dl,dt,dd标签实例</title>    
  4. <style type="text/css">    
  5. <!--    
  6. dt {    
  7.         float: left;    
  8.         width: 60px;    
  9.         margin: 0px;    
  10.         padding: 0px;    
  11. }    
  12. dd {    
  13.         float: left;    
  14.         clear: none;    
  15.         width: 290px;    
  16.         margin: 0px;    
  17.         padding: 0px;    
  18. }    
  19. dl {    
  20.         width: 350px;    
  21.         font-size: 9pt;    
  22.         line-height: 1.5em;    
  23.         position:relative;    
  24.         margin: 0px;    
  25.         padding: 0px;    
  26.         left:15px;    
  27. }    
  28. .red {    
  29.         color: #FF3300;    
  30. }    
  31. #box {    
  32.         width: 500px;    
  33.         background-color: #F1F1F7;    
  34. }    
  35. #box #content {    
  36.         padding-top: 10px;    
  37.         padding-right: 10px;    
  38.         padding-bottom: 10px;    
  39.         padding-left: 20px;    
  40. }    
  41. -->    
  42. </style>    
  43. </head>    
  44. <body>    
  45. <div id="box">    
  46.     <div id="content">    
  47.     <img src="" align="left" title="商品名" alt="鲜花">    
  48.     <dl>    
  49.        <dt>商品名称:</dt>    
  50.          <dd><strong>[郁金香] </strong>忧惠:<span class="red"><em>8.5折</em></span></dd>    
  51.        <dt>商品简介:</dt>    
  52.          <dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span ><a href="#">详细介绍</a>]</dd>    
  53.        <dt>店铺地址:</dt>    
  54.          <dd>北京市海淀区</dd>    
  55.        <dt>联系电话:</dt>    
  56.          <dd>0000-12345678 87654321 </dd>    
  57.     </dl>    
  58.     </div>    
  59. </div>    
  60. </body>   
  61. </html>   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值