ul ol li dl dt 
dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦!

DIV 
CSS网页布局中常用的列表元素ul ol li dl dt dd释义，块级元素div尽量少用，和table一样，嵌套越少越好

ol 
有序列表。
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
表现为：

1……
2……
3……
ul 
无序列表，表现为li前面是大圆点而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>
很多人容易忽略 
dl dt dd的用法
dl 内容块
dt 内容块的标题
dd 
内容
可以这么写：

<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
　　dt 
和dd中可以再加入 ol ul li和p
　　理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局。DD DT DL标签

 

我们平时常用的是< ul>< li>标签，不过dd、dt标签也蛮不错，特别是发布程序的时候功能模块列表什么的可以使用它来排版。

< dl>< /dl>< dt>< /dt>< dd>< /dd>

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

dl ——define 
list——定义列表 
dt ——define list title——用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。

dd——define list define——用于生成定义列表各列表项的说明文字段，重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解

例子：
<dl> 
<dt>Today 
<dd>Today is yesterday.

<dt>Tomorrow 
<dd>Tomorrow is today. 
</dl>

例子2： 
<html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD 
XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html 
xmlns="http://www.w3.org/1999/xhtml"> 
<head>

<title>无标题文档</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;

} 
#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=/Article/UploadFiles/200704/20070412091408274.gif align="left"/ >

<dl> 
        <dt>商品名称：</dt> 
        
<dd><strong>[好大的一只啊] </strong>忧惠：<span 
class="red"><em>8.5折</em></span></dd> 
        
<dt>商品简介：</dt> 
        
<dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称 
商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span 
class="red";>详细介绍</span>]</dd> 
        
<dt>店铺地址：</dt> 
        <dd>商品名称</dd> 
        
<dt>联系电话：</dt> 
        <dd>0000-12345678 87654321 
</dd> 
</dl> 
</div> 
</div> 
</body></html> 

DIV+CSS中标签ul ol li dl dt dd用法的更多相关文章

  1. HTML中的ul, ol,li , dl,dt, dd标签

    ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...

  2. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

  3. CSS中的ul与li样式详解

    CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...

  4. HTML 列表 <ol><ul><li><dl><dt><dd>

    <ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...

  5. css案例学习之ul li dl dt dd实现二级菜单

    效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  6. DIV+CSS中标签dl dt dd常用的用法

    转自:http://smallpig301.blog.163.com/blog/static/9986093201010262499229/ < dl>< /dl>用来创建一个 ...

  7. CSS中的ul与li样式详解 list-type

    转自新浪博客http://blog.sina.com.cn/u/2539885750 ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style ...

  8. 【HTML】dl dt dd

    摘要 看到没怎么使用过的html 标签,记录下 定义 dl 类似于 ul ,无任何样式,自定义列表容器, ul 为无序列表容器,ol 为有序列表容器 dt dd 类似于 li ,无任何样式,为帮助实现 ...

  9. html5 分组标签 br hr p div blockquote figure ul ol li pre

    <br>    换行, 单标签 <hr>    分割线,水平线 <p>    段落, 有<br>换行功能, 而且行距会比普通换行要宽. <div& ...

随机推荐

  1. polymorphism多态

    [概念] 方法名相同,具体操作根据类不同. eg 有open()方法的ebook, kindle 都会被打开 eg 动物叫声不同 inheritance:只有superclass subclass都有 ...

  2. WorkerMan源码分析(resetStd方法，PHP中STDIN, STDOUT, STDERR的重定向)

    WorkerMan中work.php中 resetStd 方法中代码如下 public static function resetStd() { if (!static::$daemonize || ...

  3. 各个JSON技术的比较（Jackson，Gson，Fastjson）的对比

    JSON技术的调研报告 一 .各个JSON技术的简介和优劣 1.json-lib json-lib最开始的也是应用最广泛的json解析工具,json-lib 不好的地方确实是依赖于很多第三方包, 包括 ...

  4. Json中不支持任何形式的注释，那我们要怎么解决呢

    Json中不支持任何形式的注释,我们可以使用曲线救国的思路:在对象的定义中添加一个key(comment),其对应的value值就是注释填写的语句. 如: { "name":&qu ...

  5. Three.js 对模型多个动画切换展示(fbx)

    来源 :https://blog.csdn.net/qq_30100043/article/details/80087471 简介 上一节本想直接了结动画这一章.最后一想,没有做过模型动画切换的案例. ...

  6. VSCode一直弹框错误Linter pylint is not installed

    确保已经安装Python编译环境 点击下图位置(这个是我已经安装过后的文字,原本显示“搜索Python”字样) 点击后显示如下,点击安装 然后出现一大坨命令 最终出现“Successfully ins ...

  7. Bootstrap 框架 day57

    Bootstrap框架  Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包 ...

  8. python 数据类型 之 字符串 拼接 方法 以及效率问题

    在任何编程语言中,字符串的操作应该是最频繁的操作之一.在python中字符串的操作主要有以下几种方式.以及对效率的分析 字符串的拼接:字符串的拼接双方只能是字符串. 方法一: website = 'p ...

  9. H5笔记周记

    9.4 一.介绍浏览器 1.title 主题,题目 2.url 网址  3.body 网站的内容 4.html 语言,超文本标记语言 二.文件介绍 三.标签的结构 (一些快捷键:Ctrl+s 保存   ...

  10. 778A String Game

    A. String Game time limit per test 2 seconds memory limit per test 512 megabytes input standard inpu ...