html中dl dt dd 标签用法与图片列表自动换行

最新推荐文章于 2021-08-03 21:19:42 发布

weixin_30929011

最新推荐文章于 2021-08-03 21:19:42 发布

阅读量1k

点赞数

原文链接：http://www.cnblogs.com/wowchky/archive/2012/10/18/2729089.html

版权

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

<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。（扩展阅读：ul li、ol li、li列表）

< dl>< /dl>用来创建一个普通的列表,
< dt>< /dt>用来创建列表中的上层项目，
< dd>< /dd>用来创建列表中最下层项目，
< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

语法解释：
首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。

 1 <html>
 2 <head>
 3 <style>
 4 *{ margin:0; padding:0;}
 5 #box{ width:300px; margin:10px; padding:10px; float:left; border:1px solid #CCC;
 6 background:#FFFFCC; font-size:12px; line-height:1.9;}
 7 dl{ background:#CCCC00; margin:0; width:120px;
 8 text-align:center; float:left; margin:5px;}
 9 dt{ background:#CC0033;}dt img{display:block;
10 margin:0 auto;}
11 dd{ background:#FFFF00; }
12 </style>
13 </head>
14 <h3>自动换行</h3>
15  
16    <table width="100%" border="1" align="center">
17         <div id="box">
18          <dl>
19               <dt> <img src="door_nosensor.jpg" /> </dt>
20               <dd>10.0.1.201-1</dd>
21           </dl>
22         <dl>
23               <dt> <img src="door_nosensor.jpg" /> </dt>
24               <dd>10.0.1.201-2</dd>
25           </dl>
26         <dl>
27               <dt> <img src="door_nosensor.jpg" /> </dt>
28               <dd>10.0.1.201-3</dd>
29           </dl>
30           <dl>
31               <dt> <img src="door_nosensor.jpg" /> </dt>
32               <dd>10.0.1.201-4</dd>
33           </dl>
34 
35         </div>
36     </table>
37 </html>

转载于:https://www.cnblogs.com/wowchky/archive/2012/10/18/2729089.html

weixin_30929011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html中dl dt dd 标签用法与图片列表自动换行

dl 标签 -- 代表HTML自定义列表dl标签是成对出现的,以<dl>开始,</dl>结束自定义列表的开始使用<dl>标签,列表中每个元素的标题使用<dt>(definitionterm)定义,后面跟随<dd>(definitiondescription)用于描述列表中元素的内容.属性:Common -- 一...
复制链接

扫一扫