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. 两个App之间的跳转 并传值

    两个App之间的传值最主要的是方法是 Intent intent = getPackageManager().getLaunchIntentForPackage("com.example.a ...

  2. 当前的开源SLAM方案

    开源方案 传感器形式 地址链接 MonoSLAM 单目 https://github.com/hanmekim/SceneLib2  PTAM 单目  http://www.robots.ox.ac. ...

  3. LIS LCS 最长上升子序列 最长公共子序列 ...

    最长上升子序列,问题定义:http://blog.csdn.net/chenwenshi/article/details/6027086 代码: public static void getData( ...

  4. vue之微信登录

    参考文章https://www.cnblogs.com/examine/p/4634947.html 微信开放平台和公众平台的区别1.公众平台面向的是普通的用户,比如自媒体和媒体,企业官方微信公众账号 ...

  5. ftp上传文件异常

    ftp一个服务器 如果是22端口 ssh-2.0-openssh_4.3 ,是什么意思? ftp服务用的是20.21端口,客户端添加ftp信息的时候输入的是21端口 ssh服务用的是22端口,应用于远 ...

  6. js Map和Set

    Map Map是一组键值对的结构,具有极快的查找速度.JavaScript的对象有个小问题,就是键必须是字符串.但实际上Number或者其他数据类型作为键也是非常合理的.为了解决这个问题,最新的ES6 ...

  7. 2Y - sort

    给你n个整数,请按从大到小的顺序输出其中前m大的数.  Input 每组测试数据有两行,第一行有两个数n,m(0<n,m<1000000),第二行包含n个各不相同,且都处于区间[-5000 ...

  8. 8Q - 献给杭电五十周年校庆的礼物

    我不能参赛,就送给学校一个DOOM III球形大蛋糕吧.等一等,吃蛋糕之前先考大家一个问题:如果校长大人在蛋糕上切了N刀(校长刀法极好,每一刀都是一个绝对的平面),最多可以把这个球形蛋糕切成几块呢?  ...

  9. json与字符串转换

    一.json转为字符串 JSON.stringify(...) 二.字符串转为json JSON.parse(...)

  10. Django权限系统auth

    auth模块是Django提供的标准权限管理系统,可以提供用户身份认证, 用户组和权限管理. auth可以和admin模块配合使用, 快速建立网站的管理系统. 在INSTALLED_APPS中添加'd ...