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"><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标签的更多相关文章
- dl标签和table标签
dl标签定义了一个定义列表 <html> <body> <h2>一个定义列表:</h2> <dl> <dt>计算机</ ...
- dt dl列表布局
项目需要中 左边是房屋地址,右边显示几套房屋,如下图显示 ============ 开始想到使用 div标签,里面嵌套几个span,但是不利于对齐显示,一行还可以,多行了不方便 查找使用dl dt布局 ...
- 如何用<dl>标签做表格而不用table标签
我们都知道很多的内容编辑器(TinyMCE编辑器.fck)都有插入表格功能,快速方便,但是这些表格用到的<table>标签,可以查看html源代码就能发现,table标签对搜索引擎不是很友 ...
- html之dl标签
用来定义列表之用 通常与dt:定义列表中的项目 dd:描述列表中的项目 示例代码: <dl> <dt>数据库</dt> <dd>oracle</d ...
- HTML <dl> 标签
<html><body><h2>一个定义列表:</h2><dl> <dt>计算机</dt> <dd&g ...
- 定义列表dl中标签 dt 与标签dd对齐方法,标签ul与标签li对齐
不定义css样式时(默认情况): 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- dl dd dt与ul li
像这种格式的网页,可以用dl来实现,比较方便
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容
01 HTML HTML :Hypertext Markup Language 超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...
随机推荐
- eclipse + MinGW调试程序printf输出被buffer的问题
比如说一个 1. int x = 1;2. printf("xxx")3. int y = 2;调试的时候,运行第二行,但是控制台没有输出.必须调试到整个程序都结束的时候才会把所有 ...
- discuz添加管理员,找回管理员方法
增加创始人方法: 第一步:打开现在创始人的后台,将你所需要增加的创始人设置为管理员,并且给予后台副站长权限,这两部一定要做到位,先把这两步做完之后再做下面的! 具体设置管理员和给予后台副站长权限请查看 ...
- eclipse 断点类别
行断点 行断点位于一般方法内,双击代码行左边就可以设置行断点: 行断点可以设置条件,右键断点-properties: 1设置效果是第几次到达时暂停,图中所示是当第三次到达时暂停 2是开启条件断点 3是 ...
- (初学者)安装hadoop集群注意事项
1.关闭防火墙 2.所有的hadoop操作都是hadoop用户下面的,同时需要用hadoop用户登录之后,对于其他的机器的hadoop用户可以免密登录 3.hadoop用户在root组下面,不是附加组 ...
- input子系统分析(转)
转自:http://www.linuxidc.com/Linux/2011-09/43187.htm 作者:作者:YAOZHENGUO2006 Input子系统处理输入事务,任何输入设备的驱动程序都可 ...
- php方法重写:Declaration of should be compatible with that
<?php// this code does trigger a strict messageerror_reporting( E_ALL | E_STRICT ); class cc exte ...
- 关于Python的Object继承
今天在Coding的使用,使用了python的单例模式,发现了一个很有趣的问题. class x(object): __se = None a = None def __new__(cls): if ...
- UVA 1640 The Counting Problem UVA1640 求[a,b]或者[b,a]区间内0~9在里面各个数的数位上出现的总次数。
/** 题目:UVA 1640 The Counting Problem UVA1640 链接:https://vjudge.net/problem/UVA-1640 题意:求[a,b]或者[b,a] ...
- C - Aladdin and the Flying Carpet 有多少种长方形满足面积为a(<=10^12),且最短边>=b;长方形边长为整数,且一定不可以是正方形。
/** 题目:C - Aladdin and the Flying Carpet 链接:https://vjudge.net/contest/154246#problem/C 题意:有多少种长方形满足 ...
- 模拟 Ajax 上传
----------------view----------------------------------- <form method="post" action=&quo ...