DD DT DL标签_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:33:45
Original
1435 Leute haben es durchsucht

我们平时常用的是标签,不过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>
Nach dem Login kopieren

例子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> 
Nach dem Login kopieren

 

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage