DD DT DL tag_html/css_WEB-ITnose-HTML Tutorial-php.cn

DD DT DL tag_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:33:45

Original

1472 people have browsed it

We usually use the < ul> < li> tag, but the dd and dt tags are also pretty good, especially when publishing a program, you can use it to typeset the list of functional modules.

< dl>< /dl>< dt>< /dt>< dd>< /dd>
< dl>< /dl> is used to create a normal of a list, < dt>< /dt> is used to create the upper-level items in the list, < dd>< /dd> is used to create the lowest-level item in the list, < dt>< /dt> and < ; dd>< /dd> must be placed between the < dl>< /dl> flag pairs. Take a look at the example below and you will understand:

dl ??define list??Definition list
dt ??define list title?? Used to generate each list item in the definition list Title, reuse the title to define multiple list items.
dd??define list define?? is used to generate explanatory text fields for each list item in the definition list. Multiple explanatory text fields can be defined by repeated use. dd is a short explanation or solution corresponding to dt

Example:

1 <dl>2 <dt>Today3 <dd>Today is yesterday.4 <dt>Tomorrow5 <dd>Tomorrow is today.6 </dl>

Copy after login

Example 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"/ >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>

Copy after login