`
独一无二双
  • 浏览: 61338 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

dl dt dd的应用

    博客分类：
  • css
 
阅读更多
dl 标签 -- 代表HTML自定义列表
dl标签是成对出现的,以<dl>开始,</dl>结束
自定义列表的开始使用<dl>标签,列表中每个元素的标题使用<dt>(definition term)定义,后面跟随<dd>(definition description)用于描述列表中元素的内容.
属性:
Common -- 一般属性
dl是definition lists的英文缩写
引用网址:http://www.dreamdu.com/xhtml/tag_dl/

示例：
Java代码 
<dl>  
    <dt>www</dt>  
        <dd>World Wide Web的缩写.</dd>  
    <dt>dreamdu</dt>  
        <dd>梦之都.</dd>  
    <dt>com</dt>  
        <dd></dd>  
    <dt>com.cn</dt>  
        <dd></dd>  
    <dt>cn</dt>  
        <dd>这都是域名的后缀.</dd>  
</dl> 

<dl>
<dt>www</dt>
<dd>World Wide Web的缩写.</dd>
<dt>dreamdu</dt>
<dd>梦之都.</dd>
<dt>com</dt>
<dd></dd>
<dt>com.cn</dt>
<dd></dd>
<dt>cn</dt>
<dd>这都是域名的后缀.</dd>
</dl>

可以对其设置样式已达到想要的显示效果，如下所示：


Java代码 
<html>   
<head>   
<title>Html中dl,dt,dd标签实例</title>   
<style type="text/css">   
<!--   
dt {   
        float: left;   
        width: 60px;   
        margin: 0px;   
        padding: 0px;   
}   
dd {   
        float: left;   
        clear: none;   
        width: 290px;   
        margin: 0px;   
        padding: 0px;   
}   
dl {   
        width: 350px;   
        font-size: 9pt;   
        line-height: 1.5em;   
        position:relative;   
        margin: 0px;   
        padding: 0px;   
        left:15px;   
}   
.red {   
        color: #FF3300;   
}   
#box {   
        width: 500px;   
        background-color: #F1F1F7;   
}   
#box #content {   
        padding-top: 10px;   
        padding-right: 10px;   
        padding-bottom: 10px;   
        padding-left: 20px;   
}   
-->   
</style>   
</head>   
<body>   
<div id="box">   
    <div id="content">   
    <img src="" align="left" title="商品名" alt="鲜花">   
    <dl>   
       <dt>商品名称：</dt>   
         <dd><strong>[郁金香] </strong>忧惠：<span class="red"><em>8.5折</em></span></dd>   
       <dt>商品简介：</dt>   
         <dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span ><a href="#">详细介绍</a>]</dd>   
       <dt>店铺地址：</dt>   
         <dd>北京市海淀区</dd>   
       <dt>联系电话：</dt>   
         <dd>0000-12345678 87654321 </dd>   
    </dl>   
    </div>   
</div>   
</body>  
</html>  



自己的应用：
     html部分：
        <div class="list_dl">
            <dl>
                <dt>2010-10-11</dt>
                    <dd><a href="###" target="_blank">·水泵业：用优势技术实现跨越式发展</a></dd>
            </dl>
            <dl>
                <dt>2010-10-11</dt>
                    <dd><a href="###" target="_blank">·水泵业：用优势技术实现跨越式发展</a></dd>
            </dl>
            <dl>
                <dt>2010-10-11</dt>
                    <dd><a href="###" target="_blank">·水泵业：用优势技术实现跨越式发展</a></dd>
            </dl>
            <dl>
                <dt>2010-10-11</dt>
                    <dd><a href="###" target="_blank">·水泵业：用优势技术实现跨越式发展</a></dd>
            </dl>
            <dl>
                <dt>2010-10-11</dt>
                    <dd><a href="###" target="_blank">·水泵业：用优势技术实现跨越式发展</a></dd>
            </dl>
</div><!--list_dl end-->

css部分：
.list_dl dl,.list_dl dt,.list_dl dd{ padding:0; margin:0;}
.list_dl{ margin:20px; line-height:30px; width:602px; height:630px;}
.list_dl dt{ float:right; width:80px;border-bottom:1px dashed #d3d3d3;}
.list_dl dd{ float:left; width:518px; border-bottom:1px dashed #d3d3d3;}

效果在附件中。

最重要的就是设置浮动。一个左浮动，一个右浮动。




  • 大小: 27.4 KB
分享到：
| 挺好的
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    dl、dt、dd列表标签实例

    /dt&gt;用来创建列表中的上层项目，&lt;dd&gt;&lt;/dd&gt;用来创建列表中最下层项目，&lt;dt&gt;&lt;/dt&gt;和&lt;dd&gt;&lt;/dd&gt;都必须放在&lt;dl&gt;&lt;/dl&gt;标志对之间。看一下下边的例子您就会明白了：创建一个普通列表 &lt;html&gt; &lt;head&gt; &lt;...

    dl,dt,dd在什么时候适合使用呢？

    dt里是放置信息标题的，dd则是这个信息的简单概要的描述， 也就是说一个dt对应有一个dd来描述它 dd里面的内容可以是任意的，图片、文本甚至是视频或音频 多个类似的dt和dd组成一个dl 那么dl dt dd适合表现例如：带...

    html 标签 dl dt dd使用说明

    基本结构： ...复制代码代码如下: &lt;dl&gt; &lt;dt&gt;这里是标题&lt;/dt&gt; &lt;dd&gt;这里是内容&lt;/dd&gt; &lt;dd&gt;这里是内容&lt;/dd&gt; &lt;dt&gt;这里是标题&lt;/dt&gt; &lt;dd&gt;这里是内容&lt;/dd&gt; &lt;dt&gt;这里是标题&lt;/dt&gt; &lt;dd&gt;这里是内容&lt;/dd&gt; &lt;/dl&gt;

    HTML 列表中的dl,dt,dd,ul,li,ol区别及应用.doc

    HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 方法/步骤 1无序列表 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表始于 &lt;ul&gt; 标签。每个列表项始于 。

    DL.DT.DD实现左右的布局简单例子第1/2页

    DL.DT.DD实现左右的布局简单例子

    dl dd dt实现的图文混排效果

    非常实用的图文混排效果，左边图片，右边文字，很简洁，很实用，代码加图片~~

    DL-Dt-DD(做表格Css实现)

    DL-Dt-DD(做表格Css实现)，打破常规用UL 的方式

    HTML的dl、dt、dd标记制作表格对决Table制作表

    事实上，使用HTML的dl、dt、dd标签会让你节省更多的代码，更能让代码符合内容的语义化。当然，table也有它的用武之地，那就是很大数据量的数据表，但是小型的数据列表和表单完全可以不使用table哦！ 如果你仍然在...

    CSS 之dl dt dd模拟表格实例代码

    贴出dl dt dd模拟表格实例，不推荐在实际项目中使用，可以了解dl dt dd的用法。测试浏览器：IE6\IE7\IE8\FF3.0 CSS: 复制代码代码如下: dl,dt,dd{ margin:0; background:#fff5fa; font-size:14px; } dl{ margin:0 ...

    网页制作小技巧 dl dt dd标签用法

    一般我们在做列表的时候通常只会用到ul和li标签,至于DL一般都很少用到，它也属于列表类的标签，下面说一下大概的用法

    dl,dt,dd,ul,li,ol区别及应用

    ol有序列表:&lt;ol&gt;&lt;li&gt;……&lt;/li&gt;&lt;li&gt;……&lt;/li&gt;&lt;li&gt;……&lt;/li&gt;&lt;/ol&gt;表现为：1……2……3……ul无序列表，表现为li前面是大圆点而不是123:&lt;ul&gt;&lt;li&gt;……&lt;/li&gt;&lt;li&gt;……&lt;/li&gt;&lt;/ul&gt;很多人容易忽略dldtdd的用法:dl内容块dt内容...

    div+dl+dt+dd图文混编

    对于初学HTML的同学有帮助，参考参考……

    CSS教程:用dl dt dd来制作列表

    今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方：　1、如果用UL还布局，右边一栏比较麻烦；　2、文字外边的边框...&lt;/a&gt;&lt;/dt&gt;&lt;dd&gt;作者：张三&lt;/dd&gt;&lt;/dl&gt;&lt;dl&gt;&lt;dt&gt;&lt;ahre

    dl,dt,dd在什么时候适合使用呢

    dl,dt,dd在什么时候适合使用呢？dt里是放置信息标题的，dd则是这个信息的简单概要的描述

    HTML 中的 dl(dt,dd)、ul(li)、ol(li) 使用方法

    复制代码代码如下:&lt;dl&gt; &lt;dt&gt;计算机&lt;/dt&gt; &lt;dd&gt;用来计算的仪器 … …&lt;/dd&gt; &lt;dt&gt;显示器&lt;/dt&gt; &lt;dd&gt;以视觉方式显示信息的装置 … …&lt;/dd&gt;&lt;/dl&gt; HTML &lt;ul&gt; 标签 #定义和用法 &lt;ul&gt; 标签定义无序列表。 #实例 无序 HTML 列表...

    用标准dl,dt,dd标签抛弃table列表

    过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页，但是这样做会遇到一个比较麻烦的问题就是，后期调试和维护会相当的困难。

Magicbox
Global site tag (gtag.js) - Google Analytics