div学习之div中dl-dt-dd的详解
dl dt dd认识及dl dt dd使用方法
<dl> 标签用于定义列表类型标签。
- dl dt dd目录
一、dl dt dd认识 - TOP
html <dl> <dt> <dd>是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与table表格类似组合标签,故名我们也叫dl表格(扩展阅读:table
tr td、table tr th表格布局)。
<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式,默认dd列表内容会一定缩进。(扩展阅读:ul li、ol li、li列表)
二、dl dt dd列表标签语法 - TOP
<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>
语法解释:
首先dt和dd是放于dl标签内,标签dt与dd处于dl下相同级。也就是dt不能放入dd内,dd不能放入dt内。在dl下,dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。
标题、标题对应列表效果演示
代码如下:
- <html>
- <body>
- <h1>一个定义列表:</h1>
- <dl>
- <dt>css网站</dt>
- <dd>网址为www.divcss5.com</dd>
- <dt>div css网站</dt>
- <dd>网址为www.divcss5.com</dd>
- <dt>div+css网站</dt>
- <dd>网址为www.divcss5.com</dd>
- </dl>
- </body>
- </html>
演示截图

扩展与提升
dl dt dd是一个组合型标签
标签标准用法,代码如下
- <dl>
- <dt>标题1</dt>
- <dd>列表1</dd>
- <dd>列表2</dd>
- </dl>
同时dd内可以放置<ul>标签使用。
三、html dl dt dd应用实例案例 - TOP
1、HTML代码片段:
<dl>
<dt>欢迎来到divcss5</dt>
<dd>这里有,html教程</dd>
<dd>这里有,css模块</dd>
<dd>这里有,css教程</dd>
</dl>
2、dl dt dd案例截图

以上为html dl dt dd列表标签范例图
四、DL DT DD标签总结
- 纯CSS的dl、dt、dd 属性布局的通用表单效果,几乎和表格而已的效果一模一样。对于dl、dt、dd的设置建议不要用高度(height)和行高(line-height),在FF会产生错位,建议使用dt、dd的padding属性来定位。
我们实践使用dl dt dd标签最多地方,通常是具有标题,而标题下对应有若干列表简单的(栏目标题+对应标题列表)和标题对应下面有内容。在使用时候我们能简洁HTML代码情况下,学会灵活使用dl dt dd,在以后开发div+css适当运用dl
dt dd标签你将会体会到带来的便利。文章出处和来源网址:http://www.divcss5.com/html/h88.shtml
div学习之div中dl-dt-dd的详解的更多相关文章
- css案例学习之ul li dl dt dd实现二级菜单
效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- Div+css中ul ol li dl dt dd使用
ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...
- HTML中的ul, ol,li , dl,dt, dd标签
ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...
- 前端学习笔记系列一:15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用
ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...
- dl,dt,dd标记在网页中要充分利用
dl,dt,dd标记在网页中要充分利用 来源:网络整理 时间:08-05-27 点击: 点击这里收藏本文 我们在制作网页过程中用到列表时一般会使用<ul>或者<ol>标签,很少 ...
- html中的dl,dt,dd标签
html <dl> <dt> <dd>是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与table表格类似组合标签,故名我们也 ...
- dl dt dd标签
<dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition de ...
- dl,dt,dd标签的使用
dl就是定义一个列表 dt说明白了就是这个列表的标题dd就是内容,能缩进和UL,OL性质差不多 <dl> <dt>标题标题</dt> <dd>内容内容& ...
随机推荐
- (九十六)借助APNS实现远程通知、后台任务
APNS全称为Apple Push Notification Service,可以实现在app不启动时也能通过服务器推送到iOS端特定设备的功能. APNS的实现原理为先发送设备的UDID和应用的Bu ...
- Hibernate之持久化状态
可持久化对象有以下三种状态: 临时状态(Transient):对象在保存进数据库之前为临时状态,这时数据库中没有该对象的信息,如果没有持久化,程序退出后临时状态的对象信息将会丢失.随时可能被垃圾回收器 ...
- boost::coroutine 无法显示调用栈
boost::coroutine 无法显示调用栈(金庆的专栏)一例因 boost::format() 格式化参数个数错误造成的 coredump,因为使用了 boost::coroutine, 无法显 ...
- UNIX环境高级编程——线程属性之分离属性
说到线程的分离状态,我认为,之所以会有这个状态,是因为系统对某些线程的终止状态根本不感兴趣导致的. 我们知道,进程中的线程可以调用: int pthread_join(pthread_t tid, v ...
- 【VSTS 日志】VSTS 所有功能,看这个页面就够了!
随着Connect();//2015大会的结束,一大波的好消息随之而来.今天小编刚刚发现了Visual Studio Team Services / Team Foundation Server 的完 ...
- iOS中 快速正确的安装 CocoaPods
有问题或技术交流可以咨询!欢迎加入! 第一部分: CocoaPods 的安装 步骤1 - 安装 RVM RVM 是干什么的这里就不解释了,后面你将会慢慢搞明白. $ curl -L https://g ...
- SpriteBuilder中使用Node类型的ccb动画节点删除时崩溃的问题
因为节点需要呈现动画效果,虽然只有两个不同帧. 在SpriteBuilder中新建Bullet.ccb文件,类型为node. 添加如上2张图片,并制作动画效果帧. 在游戏中子弹遇到障碍物会被删除,时机 ...
- JAVA之旅(二十一)——泛型的概述以及使用,泛型类,泛型方法,静态泛型方法,泛型接口,泛型限定,通配符
JAVA之旅(二十一)--泛型的概述以及使用,泛型类,泛型方法,静态泛型方法,泛型接口,泛型限定,通配符 不知不觉JAVA之旅已经写到21篇了,不得不感叹当初自己坚持要重学一遍JAVA的信念,中途也算 ...
- my golib:db query Result
go提供了一套统一操作database的sql接口,任何第三方都可以通过实现相应的driver来访问感兴趣的数据库.譬如我们项目中使用的Go-MySQL-Driver. go提供了一套很好的机制来处理 ...
- Linux Shell脚本攻略学习总结:三
根据扩展名切分文件名 首先,我们先来看两个例子: file_jpg="sample.jgp" name=${file_jpg%.*} echo File name is : $na ...