HTML DIV+CSS基础应用及举例
<dl></dl><dt></dt><dd></dd>
<dl></dl>用来创建一个普通的列表，<dt></dt>用来创建列表中的上层项目，<dd></dd>用来创建列表中最下层项目，<dt></dt>和<dd>< /dd>都必须放在<dl></dl>标志对之间。看一下下边的例子您就会明白了：
例2 创建一个普通列表
<html>
<head>
<title>一个普通列表</title>
</head>
<body text="blue">
<dl>
<dt>可乐家园</dt>
<dd>可乐家园便民网 </dd>
<dd>可乐家园网站建设 </dd>
<dd>广州 </dd>
<dt>美国城市</dt>
<dd>华盛顿 </dd>
<dd>芝加哥 </dd>
总的来说<dl>标记定义了一个定义列表，定义列表中的条目是通过使用<dt>标记(“definition title”，定义标题)和<dd>标记(“definition description”，定义描述)创建的。<dt>给出了术语名，<dd>标记给出了术语的定义。
<dd>纽约 </dd>
</dl>
</body>
</html>
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;
background-color: #F1F1F7;
}
#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"& gt;<em>8.5折</em></span></dd>
<dt>商品简介：</dt>
<dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称
商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span
class="red";& gt;详细介绍</span>]</dd>
<dt>店铺地址：</dt>
<dd>商品名称</dd>
<dt>联系电话：</dt>
<dd>0000-12345678 278970024
</dd>
</dl>
</div>
</div>
</body></html>
来自
http://panghua06.blog.163.com/blog/static/2399941201092203617422/
分享到：
相关推荐
html css js网页制作实例 dldtdd实现列表功能
以上就是使用`<dl>`, `<dd>`, 和 `<dt>` 实现图文混排的基本步骤和样式调整。根据实际需求，你可以进一步调整样式，如间距、字体大小、颜色等，以适应不同的设计风格。记得在实际应用中，要确保代码的语义化，同时...
基本结构： ...复制代码代码如下: <dl> <dt>这里是标题</dt> <dd>这里是内容</dd> <dd>这里是内容</dd> <dt>这里是标题</dt> <dd>这里是内容</dd> <dt>这里是标题</dt> <dd>这里是内容</dd> </dl>
dt里是放置信息标题的，dd则是这个信息的简单概要的描述， 也就是说一个dt对应有一个dd来描述它 dd里面的内容可以是任意的，图片、文本甚至是视频或音频 多个类似的dt和dd组成一个dl 那么dl dt dd适合表现例如：带...
贴出dl dt dd模拟表格实例，不推荐在实际项目中使用，可以了解dl dt dd的用法。测试浏览器：IE6\IE7\IE8\FF3.0 CSS: 复制代码代码如下: dl,dt,dd{ margin:0; background:#fff5fa; font-size:14px; } dl{ margin:0 ...
<dl>标记定义了一个定义列表，定义列表中的条目是通过使用<dt>标记(“definition title”，定义标题)和<dd>标记(“definition description”，定义描述)创建的。<dt>给出了术语名，<dd>标记给出了术语的定义。 也...
### 使用DL、DT、DD实现左右布局的知识点详解 #### 一、背景介绍与问题提出 在网页设计中，常见的布局需求之一就是实现左文右图或者左标题右描述的效果。这种布局方式不仅美观，还能有效地提升用户体验。本文将通过...
/dt>用来创建列表中的上层项目，<dd></dd>用来创建列表中最下层项目，<dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。看一下下边的例子您就会明白了：创建一个普通列表 <html> <head> <...
对于小型数据列表和表单，使用`<dl>`, `<dt>`, 和 `<dd>` 标签是一个更好的选择，因为它更符合语义化的原则，使得内容结构更加清晰。 然而，这并不意味着`<table>`标签已经过时。对于展示大量结构化数据，如财务...
以下是一个使用dl、dt、dd的例子，对比传统的table布局，可以明显看到代码的简化： 传统的table数据列表： ```html <td class="title">Name: <td class="text">Squall Li <td class="title">Age: ...
本文将深入探讨如何使用DL-DT-DD组合来实现表格效果，并对比与使用UL的方式。 **DL-DT-DD元素解析** `<dl>`是定义列表（Description List）的标签，它用于定义一个名词或术语的集合，通常与描述或解释相关的术语对...
本教程将介绍如何利用`<dl>`, `<dt>`, 和 `<dd>`元素来创建自定义列表，以及如何通过CSS进行样式控制。 `<dl>`（Description List）元素用于定义一个描述性列表，它包含一系列的术语（`<dt>`）和对应的描述（`<dd>`...
列表元素ul、ol、li、dl、dt和dd是构建内容列表、导航链接和其他有序或无序信息的基石。了解并正确使用这些元素对于创建清晰、可访问且搜索引擎优化友好的网站至关重要。 首先，ul（无序列表）和ol（有序列表）是...
ol有序列表:<ol><li>……</li><li>……</li><li>……</li></ol>表现为：1……2……3……ul无序列表，表现为li前面是大圆点而不是123:<ul><li>……</li><li>……</li></ul>很多人容易忽略dldtdd的用法:dl内容块dt内容...
以下将详细介绍HTML列表中的一些主要元素：`<dl>`, `<dt>`, `<dd>`, `<ul>`, `<li>`, 和 `<ol>` 的区别及应用。 1. **无序列表（Unordered List）** 无序列表通常用于显示不需按特定顺序排列的项目。它使用`<ul>`...