zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    结巴分词 0.14 版发布,Python 中文分词库
    Lazarus 1.0.2 发布,Pascal 集成开发环境
    Android全屏 去除标题栏和状态栏
    服务器日志现 Android 4.2 传将添多项新特性
    Percona XtraBackup 2.0.3 发布
    长平狐 Android 强制设置横屏或竖屏 设置全屏
    NetBeans 7.3 Beta 发布,全新的 HTML5 支持
    CppDepend现在已经支持Linux
    GromJS 1.7.18 发布,服务器端的 JavaScript
    Apache OpenWebBeans 1.1.6 发布
  • 原文地址:https://www.cnblogs.com/wowchky/p/2729089.html
Copyright © 2011-2022 走看看