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


    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>标志对之间。

    <dl>
    <dt>列表标题</dt>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
    ...
    </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>
  • 相关阅读:
    Adobe Reader XI 自动闪退问题
    NoSQL非关系型数据库Redis (键值对(key-value)数据库) 学习笔记
    MarkdownPad2报错: Html Rendering Error (An error occurred with the Html rendering component.)
    Thymeleaf学习笔记
    Elasticsearch学习笔记2--Spring Data
    Redis5.0学习笔记
    Xshell6 评估期已过——解决办法
    Windows版抓包工具Wireshark3.0
    PHP 判断数据是否为空 ‘0’判断为空可选
    python3 多线程,多进程 ,IO多路复用
  • 原文地址:https://www.cnblogs.com/wowchky/p/2729089.html
Copyright © 2020-2023  润新知