Home >Web Front-end >HTML Tutorial >DD DT DL tag_html/css_WEB-ITnose
DD DT DL tag_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:33:451510browse
We usually use the 7af642afb7cbf7886d194925c3e5eedb 8e22c81817d224bf490a20f8d20d8ac9 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.
db9a701eea2ab4a1ec2bb391ddc2eae5a3918fe0b70e08a22a7548856f8395abfab85fc546d76cca9db3f11748424162de94021491bd63f6ae16d485c0a150f8152436f649dfcc2350c70c7083a3231e61c2795ecf2bb2bc7cac2175c6ae6977
db9a701eea2ab4a1ec2bb391ddc2eae5a3918fe0b70e08a22a7548856f8395ab is used to create a normal of a list, fab85fc546d76cca9db3f11748424162de94021491bd63f6ae16d485c0a150f8 is used to create the upper-level items in the list, 152436f649dfcc2350c70c7083a3231e61c2795ecf2bb2bc7cac2175c6ae6977 is used to create the lowest-level item in the list, fab85fc546d76cca9db3f11748424162de94021491bd63f6ae16d485c0a150f8 and < ; dd>61c2795ecf2bb2bc7cac2175c6ae6977 must be placed between the db9a701eea2ab4a1ec2bb391ddc2eae5a3918fe0b70e08a22a7548856f8395ab 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>
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>