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. swift - xcode10 - 点击事件交互BUG - （手势和button的addTarget方法）

    1. 现象button 点击闪退:没有任何原因 ,在听云检测上,显示 BUG2: 手势 没有任何作用,哪怕设置  isUserInteractionEnabled 和isEnabled 为true 都 ...

  2. MySQL安装（windows版本）

    1.下载.MySQL http://dev.mysql.com/downloads/mysql/ 下载windows的zip包,解压后,添加path路径bin, 系统环境变量->path-> ...

  3. 两个App之间的跳转 并传值

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

  4. mysql 主从数据不一致 Slave_SQL_Running: No 解决方法

    在slave服务器上通过如下命令 mysql> show slave status\G; 显示如下情况: Slave_IO_Running: Yes Slave_SQL_Running: No ...

  5. 函数 day9

    一,什么是函数? 函数的定义与调用 s = 'fkdsagadfdsagfdsagg' count = 0 for i in s: count += 1 print(count) l1 = [1,2, ...

  6. Liunx mv（转）

    转竹子—博客:http://www.cnblogs.com/peida/archive/2012/10/27/2743022.html mv命令是move的缩写,可以用来移动文件或者将文件改名(mov ...

  7. oracle 直接复制表内容到新表

    不知道为什么,刚建的oracle数据库删除数据很慢,表里面有120多万数据,非常地慢 于是采用的复制的方法,命令如下: create table students_backup as select * ...

  8. uva 103(最长递增子序列) Stacking Boxes

    大意是有一些n维的物体,他的边也是n条,如果将一个物体的边按任意顺序排列,只要有一种排列满足一一对应小于另一物体的边,就可以将这个物体嵌套进去另一个物体中,文最多能连续嵌套几个物体. 所求的最多的连续 ...

  9. Luogu 3421 [POI2005]SKO-Knights - Exgcd

    Description 给出一个骑士的 $N$种 中行走的方式 $(a_i, b_i)$, 可以使骑士的坐标$(-a,-b)$或$(+a,+b)$. 我们需要找出 第二个骑士的 两种行走方式 $(c_ ...

  10. [转]slf4j 与log4j 日志管理

    log4j简易入门 package test.log4j; import org.apache.log4j.Logger; public class HelloLog4j { private stat ...