我们平时常用的是< 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"><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>

无标题文档

商品名称:
[好大的一只啊] 忧惠:8.5折
商品简介:
商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称 商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[详细介绍]
店铺地址:
商品名称
联系电话:
0000-12345678 87654321

DD DT DL标签的更多相关文章

  1. dl标签和table标签

    dl标签定义了一个定义列表 <html> <body> <h2>一个定义列表:</h2> <dl>   <dt>计算机</ ...

  2. dt dl列表布局

    项目需要中 左边是房屋地址,右边显示几套房屋,如下图显示 ============ 开始想到使用 div标签,里面嵌套几个span,但是不利于对齐显示,一行还可以,多行了不方便 查找使用dl dt布局 ...

  3. 如何用<dl>标签做表格而不用table标签

    我们都知道很多的内容编辑器(TinyMCE编辑器.fck)都有插入表格功能,快速方便,但是这些表格用到的<table>标签,可以查看html源代码就能发现,table标签对搜索引擎不是很友 ...

  4. html之dl标签

    用来定义列表之用 通常与dt:定义列表中的项目 dd:描述列表中的项目 示例代码: <dl> <dt>数据库</dt> <dd>oracle</d ...

  5. HTML <dl> 标签

    <html><body><h2>一个定义列表:</h2><dl>   <dt>计算机</dt>   <dd&g ...

  6. 定义列表dl中标签 dt 与标签dd对齐方法,标签ul与标签li对齐

    不定义css样式时(默认情况): 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  7. dl dd dt与ul li

    像这种格式的网页,可以用dl来实现,比较方便

  8. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  9. 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容

    01 HTML HTML :Hypertext Markup Language   超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...

随机推荐

  1. abp相关

    在.core中增加类.并指定属性长度. nutget 中运行Add-Migration 名称 Update-Database -Verbose 迁移成功. 1.安装指定版本类库install-pack ...

  2. Linux 文件管理(C语言库函数二--程序日志)

    文件删除和改名 int remove(const char *pathname); int rename(const char *oldpath,const char *newpath); remov ...

  3. 循环杀死Mysql sleep进程脚本

    #!/bin/sh while : do n=`mysqladmin processlist -uadmin -p***|grep -i sleep |wc -l` date=`date +%Y%m% ...

  4. Android实现短信监听并且转发到指定的手机号,转发后不留痕

    转载:http://blog.csdn.net/swqqcs/article/details/7252419 通过这些代码也可以对远程手机实现短信控制.有兴趣的可以自己改一下,说一下简单的原理,要实现 ...

  5. HBuilder 连接 夜神安卓模拟器

    由于HBuilder的自动扫描机制无法直接连上夜神模拟器,需要通过cmd命令窗口手动处理,才能将两者建立连接. 首先,启动HBuilder和夜神模拟器 然后,打开cmd命令提示符 cd进入夜神模拟器b ...

  6. ios - UILabel_长按复制

    1.添加长按的手势 UILongPressGestureRecognizer *longGesture = [[UILongPressGestureRecognizer alloc] initWith ...

  7. es6 async与await实战

    在使用js的时候,我们经常会遇到一个问题,就是我们需要等待请求返回再做下一步处理,之前的处理方式是通过ajax的success或者callback之类的方法,不过一层一层真的恶心,而且只是针对单个页面 ...

  8. python学习【第八篇】python模块

    模块与包 模块的概念 在python中一个.py文件就是一个模块. 使用模块可以提高代码的可维护性. 模块分为三种: python标准库 第三方模块 自定义模块 模块的导入方法 1.import语句 ...

  9. 七、Dockerfile案例三(Mysql安装)

    七.Dockerfile案例三(Mysql安装) *特别提醒:新版的mysql:5.7数据库下的user表中已经没有Password字段了(5.5的user表还有) 一.查看docker hub上的版 ...

  10. EasyNVR内网摄像机接入网关+EasyNVS云端管理平台,组件起一套轻量级类似于企业级萤石云的解决方案

    背景分析 对于EasyNVR我们应该都了解,主要应用于互联安防直播,对于EasyNVR,我们可以清楚的发现,EasyNVR的工作机制是EasyNVR拉取摄像机的RTSP/Onvif视频流,然后客户端可 ...