> 웹 프론트엔드 > HTML 튜토리얼 > DD DT DL标签_html/css_WEB-ITnose

DD DT DL标签_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:33:45
원래의
1466명이 탐색했습니다.

我们平时常用的是标签,不过dd、dt标签也蛮不错,特别是发布程序的时候功能模块列表什么的可以使用它来排版。


用来创建一个普通的列表,用来创建列表中的上层项目,用来创建列表中最下层项目,和都必须放在标志对之间。看一下下边的例子您就会明白了:


dl ??define list??定义列表
dt ??define list title??用于生成定义列表中各列表项的标题,重复使用可以定义多个列表项的标题。
dd??define list define??用于生成定义列表各列表项的说明文字段,重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解

 

例子:

1 <dl>2 <dt>Today3 <dd>Today is yesterday.4 <dt>Tomorrow5 <dd>Tomorrow is today.6 </dl>
로그인 후 복사

例子2:

 1 <html> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 <!-- 8 dt { 9         float: left;10         width: 60px;11         margin: 0px;12         padding: 0px;13 }14 dd {15         float: left;16         clear: none;17         width: 290px;18         margin: 0px;19         padding: 0px;20 }21 dl {22         width: 350px;23         font-size: 9pt;24         line-height: 1.5em;25         position:relative;26         margin: 0px;27         padding: 0px;28         left:15px;29 }30 .red {31         color: #FF3300;32 }33 #box {34         width: 500px;35         background-color: #F1F1F7;36 }37 #box #content {38         padding-top: 10px;39         padding-right: 10px;40         padding-bottom: 10px;41         padding-left: 20px;42 }43 -->44 </style>45 </head>46 <body>47 <div id="box">48 <div id="content">49 <img  src=/Article/UploadFiles/200704/20070412091408274.gif align="left"/  alt="DD DT DL标签_html/css_WEB-ITnose" >50 <dl>51         <dt>商品名称:</dt>52         <dd><strong>[好大的一只啊] </strong>忧惠:<span class="red"><em>8.5折</em></span></dd>53         <dt>商品简介:</dt>54         <dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称 商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span class="red";>详细介绍</span>]</dd>55         <dt>店铺地址:</dt>56         <dd>商品名称</dd>57         <dt>联系电话:</dt>58         <dd>0000-12345678 87654321 </dd>59 </dl>60 </div>61 </div>62 </body>63 </html> 
로그인 후 복사

 

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿