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. Struts2框架的数据封装一之属性封装（属性封装的第一种方式：对参数进行封装）

    request带着参数来,aciton对其进行处理.在学习action之前,使用的是servlet对request进行处理.request请求时会带有参数,所以我们要对这些参数进行封装. 1. 为什么 ...

  2. Vue 初始化多个Vue 及之间的相互修改

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 有关JVM处理Java数组方法的思考

    在Java中,获取数组的长度和String的长度是两种不同的方法,这引起了本文作者的一番思考.本文从JVM的角度,探讨了Java数组在JVM中是什么对象,有哪些成员,以及声明方法. 作者:jarfie ...

  4. 使用/\_ 打印正三角形 C/C++

    输入size,level,使用/\_,打印正三角形 #include<stdio.h> int main() { int level, size; printf("Enter l ...

  5. JoyOI1035 棋盘覆盖

    原题链接 对棋盘染色,坐标和为奇数的染黑,偶数为白.这时会发现对于相同颜色的格子,是无法放置骨牌的,这样我们就将所有格子分成两类,然后根据能否放置骨牌连边,最后就是求二分图最大匹配了. 这里我是用的匈 ...

  6. JoyOI1391 走廊泼水节

    一道另类生成树 原题链接 将输入的树的\(n-1\)条边按从小到大排序,然后\(Kruskal\)在生成该树的过程中计算新增边的总长. 当在连第\(i\)条边,设该边的两端点为\(x,y\),长度为\ ...

  7. GitHub上README.md教程 详情介绍 (修改图片连接地址错误)

    最近对它的README.md文件颇为感兴趣.便写下这贴,帮助更多的还不会编写README文件的同学们. README文件后缀名为md.md是markdown的缩写,markdown是一种编辑博客的语言 ...

  8. linux学习第四天 (Linux就该这么学)2018年11月16日

    今天主要讲了 管道符,重写向与环境变量 输入输出重写向 标准输出重写向 (标准,覆盖,错误) > 将标准输出重写向到一个文件中 >> 追加到文件 2>错误输出重定向 2> ...

  9. EL 11个内置对象

    JSP开发人员可以在EL表达式中使用EL隐式对象,而不用任何显式的编码或声明.语法如下: ${隐式对象名} <!-- 获取EL隐式对象的引用 --> 在JSP页面中,可以使用JSP脚本来  ...

  10. Python3实战系列之二（获取印度售后数据项目）

    问题:续接上一篇.说干咱就干呀,勤勤恳恳写程序呀! 目标:安装python和pycharm.要编写并运行python程序就需要电脑有开发工具和运行环境,所以此篇就是安装编辑和运行python程序的软件 ...