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. Java_5 数组

    1.数组的概念与作用 数组:一组数据的集合,数组中的每个数据被称作元素.在数组中可以存放任意类型的元素,但同一个数组里存放的元素类型必须一致. 作用:可以存贮多个数据. 2.数组的使用方式 数据类型[ ...

  2. 24-算法训练 删除数组零元素-- list的使用

    http://lx.lanqiao.cn/problem.page?gpid=T201 算法训练 删除数组零元素   时间限制:1.0s   内存限制:512.0MB      从键盘读入n个整数放入 ...

  3. JsRender 学习总结

    jsRender 三个最重要的概念:模板.容器和数据. 最重要的是:view(视图) 是我们定义的模板,上下文是视图所用的对象. 一.基础. {{:}} 和 {{>}}(或{{html:}})两 ...

  4. mysql备份数据库出错mysqldump: [ERROR] unknown option '--no-beep'

    公司数据库前一版本是部署在windows上面的,由于业务需要,迁移到linux,之前一段脚本在windows下使用定时任务执行正常. mysqldump -uzzz -pxxxx --opt --de ...

  5. Vue Create 创建一个新项目 命令行创建和视图创建

    Vue Create 创建一个新项目 命令行创建和视图创建 开始之前 你可以先 >>:cd desktop[将安装目录切换到桌面] >>:vue -V :Vue CLI 3.0 ...

  6. python loggin

    一 日志级别 CRITICAL = 50 #FATAL = CRITICAL ERROR = 40 WARNING = 30 #WARN = WARNING INFO = 20 DEBUG = 10 ...

  7. c#devexpres TreeList 最简单显示动态值的应用

    为了让数据显示在行内,也为熟练一下devexpress treelist  控件, 查找了很多,最多的是先把数据放在datatable  表里边, 然后赋值给treelist的datasource 的 ...

  8. devexpress之barManager 使用

    这次我不想使用ribboncontrol 控件 作为窗口菜单栏,也不想用传统的那种字体的方式 标题栏 一.Bars 1.   把BarManager组件添加到窗体中后,会自动创建两个空的 bars: ...

  9. JQuery Deferred 对象

    http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html <jQu ...

  10. Rsync同步设置的一例

    以下文档于2014-12-10更新   先在服务端操作 #wget http://pkgs.repoforge.org/rsync/rsync-3.0.9-2.el6.rfx.x86_64.rpm # ...