DIV+CSS中标签dl dt dd常用的用法

最新推荐文章于 2022-05-07 17:09:47 发布
最新推荐文章于 2022-05-07 17:09:47 发布
阅读量4.6k 收藏 24
点赞数 6
分类专栏： HTML5+CSS|CSS3

< dl>< /dl>用来创建一个普通的列表,

< dt>< /dt>用来创建列表中的上层项目，

<dd>< /dd>用来创建列表中最下层项目，

< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

实例一：

效果:
在这里插入图片描述
源码：

<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style>
			body{ font-size:12px; line-height:1.8; width:900px; margin:auto;} *{ margin:0;
			padding:0;} h1{ background:red; font-size:14px; height:35px; line-height:35px;
			padding-left:20px; color:white;} #Methods1{ width:900px; background:#ccc;
			padding-bottom:20px;} #Methods1 dl{margin:20px 0 0 20px; float:left; background:red;}
			#Methods1 dt{width:180px; margin:10px; height:120px; background:#FFF;}
			#Methods1 dd{width:180px; margin:0 0 10px 10px; height:30px; line-height:30px;
			background:#FFFFFF; text-align:center;}
		</style>
	</head>
	<body>
		<h1>
			用法一：
		</h1>
		<div id="Methods1">
			<dl>
				<dt>
					<a href="#">
						图片交给我DT
					</a>
				</dt>
				<dd>
					标题交给我DD
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="#">
						图片交给我DT
					</a>
				</dt>
				<dd>
					标题交给我DD
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="#">
						图片交给我DT
					</a>
				</dt>
				<dd>
					标题交给我DD
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="#">
						图片交给我DT
					</a>
				</dt>
				<dd>
					标题交给我DD
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="#">
						图片交给我DT
					</a>
				</dt>
				<dd>
					标题交给我DD
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="#">
						图片交给我DT
					</a>
				</dt>
				<dd>
					标题交给我DD
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="#">
						图片交给我DT
					</a>
				</dt>
				<dd>
					标题交给我DD
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="#">
						图片交给我DT
					</a>
				</dt>
				<dd>
					标题交给我DD
				</dd>
			</dl>
		</div>
	</body>

</html>

实例二：

效果：
在这里插入图片描述
源码：

    <!DOCTYPE html>
    <html xmlns=" http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
     
    body{ font-size:12px; line-height:1.8; width:900px; margin:auto;}
    *{ margin:0; padding:0;}
    h1{ background:red; font-size:14px; height:35px; line-height:35px; padding-left:20px; color:white;}
    h2{ font-size:14px; height:35px; line-height:35px;}
     
    #Methods2{ width:900px; background:#ccc;}
    #Methods2 dl{width:860px; height:200px; margin:20px; background:red;}
    #Methods2 dt{width:180px; height:180px; float:left; margin:10px; background:#FFF;}
    #Methods2 dd{width:610px; height:160px; float:left; margin:10px 10px 10px 0; padding:10px 20px; line-height:20px; background:#FFFFFF; text-align:left;}
    .More{ position:absolute; right:120px; margin-top:10px;}
     
    </style>
    </head>
    <body>
     
    <h1>用法二：</h1>
    <div id="Methods2">
      <dl>
        <dt><a href="#">图片交给我DT</a></dt>
        <dd>
      <h2>标题</h2>
      <span>内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--</span><br />
      <a class="More">了解更多...</a>
     </dd>
      </dl>
      <dl>
        <dt><a href="#">图片交给我DT</a></dt>
        <dd>
      <h2>标题</h2>
      <span>内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--</span><br />
      <a class="More">了解更多...</a>
     </dd>
      </dl>
    </div>
    </body>
    </html>

实例三：

效果：
在这里插入图片描述
源码：

    <!DOCTYPE html>
    <html xmlns=" http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
     
    body{ font-size:12px; line-height:1.8; width:900px; margin:auto;}
    *{ margin:0; padding:0;}
    h1{ background:red; font-size:14px; height:35px; line-height:35px; padding-left:20px; color:white;}
    #Methods3 { width:880px; background:#ccc; padding:20px 20px 20px 0;}
    #Methods3 dl { float:left; width:350px; height:170px; padding:20px; margin-left:20px; background:white;}
    #Methods3 dt {  float: left; width: 60px;}
    #Methods3 dd { float: left; width: 290px;}
     
    </style>
    </head>
    <body>
    <h1>用法三：</h1>
    <div id="Methods3">
    <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>9999999999999999999999999 </dd>
    </dl>
    <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>9999999999999999999999999</dd>
    </dl>
    </div>
    </body>
    </html>

实例四：

效果：
在这里插入图片描述

源码：

    <!DOCTYPE html>
    <html xmlns=" http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
     
    body{ font-size:12px; line-height:1.8; width:900px; margin:auto;}
    *{ margin:0; padding:0;}
    h1{ background:red; font-size:14px; height:35px; line-height:35px; padding-left:20px; color:white;}
     
    #Methods4 { width:860px; background:red; padding:20px; text-align:center;}
    #Methods4 dl{ width:820px; background:white; padding:20px;  }
    .titles{ float:left; width:205px; background:#999; height:30px; line-height:30px;}
    .titles1-1{ float:left; width:205px; height:50px; background:#ccc; border-bottom:dashed black 1px;}
    .bg{ background:#ddd;}
    strong{ font-weight:bold;}
     
    </style>
    </head>
    <body>
     
    <h1>用法四：</h1>
    <div id="Methods4">
    <dl>
     <dt class="titles"><strong>商品图片</strong></dt>
     <dd class="titles"><strong>商品名称</strong></dd>
     <dd class="titles"><strong>商品介绍</strong></dd>
     <dd class="titles"><strong>商品价格</strong></dd>
     <dt class="titles1-1 bg">图片交给我DT</dt>
     <dd class="titles1-1 bg">商品名称商品名称</dd>
     <dd class="titles1-1 bg">商品介绍商品介绍</dd>
     <dd class="titles1-1 bg">商品价格商品价格</dd>
     <dt class="titles1-1">图片交给我DT</dt>
     <dd class="titles1-1">商品名称商品名称</dd>
     <dd class="titles1-1">商品介绍商品介绍</dd>
     <dd class="titles1-1">商品价格商品价格</dd>
     <dt class="titles1-1 bg">图片交给我DT</dt>
     <dd class="titles1-1 bg">商品名称商品名称</dd>
     <dd class="titles1-1 bg">商品介绍商品介绍</dd>
     <dd class="titles1-1 bg">商品价格商品价格</dd>
    </dl>
    </div>
    </body>
    </html>

DT （HTML元素）

dt（define list title）是用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。

  • dl —— define list——定义列表
  • dt—— define list title —— 用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。注意：其中不能包含 hx 元素。
  • dd —— define list define —— 用于生成定义列表各列表项的说明文字段，重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解释。

dl 列表中有较为强烈的“描述”、“解释”、“补充”意义。 dt 和 dd 有明显的逻辑关系，dd 从属于 dt，dd 中的内容是对 dt 的“描述”、“解释”、“补充”。另外，dd 之间虽然是平行关系，但是其描述的内容是多角度的，不同于单纯的 li。
例如：

<dl>
<dt>JavaScript指南</dt>
<dd>出版社：xxx</dd>
<dd>ISBN: xxx</dd>
<dd>售价：xxx</dd>
</dl>

事件属性

onbeforeonload、onblur、onerror、onmessage、onload、
onoffline、onresize、onunload、onpageshow、onmessage、onhaschange

全局属性

accesskey、class、contenteditable、contextmenu、
data-*、dir、draggable、dropzone、lang、spellcheck、id、tabindex、title
.NET跨平台
关注
专栏目录
div学习之div中dl-dt-dd的详解
weixin_30467087的博客
10-22 1213
dl dt dd认识及dl dt dd使用方法 <dl>标签用于定义列表类型标签。 dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一、dl dt dd认识 - TOP html <dl> <dt> <dd>是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标...
div+css布局必了解的列表元素ul ol li dl dt dd详解
10-30
在前端开发中，布局是一项基础且重要的技能。HTML提供了多种标签...总之，虽然div和span是前端开发者最常用的元素之一，但适当使用ul、ol、dl、dt和dd等标签不仅能够使HTML代码结构清晰，还能带来许多布局上的便利。
DL-Dt-DD(做表格Css实现)
08-15
DL-Dt-DD(做表格Css实现)，打破常规用UL 的方式
关于css 中的dl dt dd
Yami__yan的博客
01-20 1998
< dl>< /dl>用来创建一个普通的列表, < dt>< /dt>用来创建列表中的上层项目， <dd>< /dd>用来创建列表中最下层项目， < dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。 常用与 左右排布的列表，左侧是标签信息，右侧是描述信息。 例如: 配合 dl dd dt 加上以下几行代码就可实现
CSS之排列系列--dl, dt, dd--使用/教程/实例
IT利刃出鞘的博客
12-05 1万+
本文用示例介绍CSS中的dl, dt, dd的用法。 dl, dt, dd是组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。 为常用标题+列表型标签。若没有对dl dt dd标签初始CSS样式，默认dd列表内容会缩进。
CSS学习教程:用dl dt dd来制作列表
bonlog的专栏
06-05 909
http://www.nongfuit.com/article_show/1615.html *{ margin:0; padding:0;} body{ font-size:12px; line-height:1.8; padding:10px;} dl{clear:both; margin-bottom:5px;float:left;} dt,dd{padding:2px 5px;
div+css常用标签.docx
02-27
《Div+CSS布局常用标签及样式详解》 Div+CSS布局是网页设计中不可或缺的一部分，它使得网页结构清晰，样式灵活。以下将详细介绍Div+CSS布局中常用的HTML标签以及CSS的相关知识点。 一、HTML常用标签 1. `div`：这...
div+css常用标签.pdf
最新发布
02-27
《Div+CSS布局常用标签及样式详解》 Div+CSS是网页设计中不可或缺的一部分，它通过HTML标签和CSS样式来实现网页的结构和表现分离，提高网页的可维护性和可扩展性。本文将深入探讨Div+CSS布局中常见的HTML标签以及...
CSS教程:用dl dt dd来制作列表
12-02
为了解决这些问题，他们选择了使用`<dl>`, `<dt>`, 和 `<dd>`元素，因为这种方法可以更好地进行布局，便于未来扩展，并且需要的CSS样式更少。 布局结构如下： ```html 标题 <div> <dl> <dt>&middot;博客里的文章是我...
布局用CSS+DIV的优点总结
10-30
第二，网站源代码简洁，除了几个div,ul,li,dl,dd,dt之类的标签外，几乎不用其他标签，这样，是网站内容完全裸露在搜索引擎的蜘蛛面前。第三，可轻松做到关键内容先被蜘蛛读取。第四，方便调整网站结构布局。 使用...
html dd dt dl css,CSS图文混排 采用dl dt dd
weixin_27379781的博客
06-19 782
图文混排* {margin:0;padding:0;}body {background:#fff;}#wrap {width:502px;margin:10px auto 0 auto;}#wrap dl {width:480px;margin-bottom:8px;padding:8px;border:1px solid #ddd;}#wrap dl dt {float:right;width:...
css 使dt与dd在同一行,CSS-dl+dt+dd的应用(非常实用)
weixin_32937021的博客
08-03 398
BZOJ-2561-最小生成树 题解(最小割)2561: 最小生成树(题解) Time Limit:10 SecMemory Limit:128 MBSubmit:1628Solved:786 传送门:http://www.lyd ...Wordpress基础：安装主题和插件一:安装主题 1.下载主题 2.解压至wordpress目录下的/wp-content/themes 3.访...
dl dt dd
oscar92420aaa的博客
06-13 473
标记定义了一个定义列表，定义列表中的条目是通过使用标记(“definition title”，定义标题)和标记(“definition description”，定义描述)创建的。给出了术语名，标记给出了术语的定义。 也就是说用来创建列表中的上层项目，用来创建列表中最下层项目，和都必须放在标志对之间。 我们在做列表标题 我们在做列表 我们在做列表 我们在做列表 我们在做列表 dl代表的是列表
CSS中<dl> <dt> <dd>定义与使用
weixin_34119545的博客
05-06 481
<dl></dl><dt></dt><dd></dd> <dl></dl> 用来创建一个普通的列表，<dt></dt>用来创建列表中的上层项目，<dd></dd>用来创建列 表中最下层项目，<dt></dt&...
HTML之dl、dt、dd（也许这是你还没用过的标签，但它们非常实用）
热门推荐
子非魚
08-27 3万+
一、dl dt dd认识 html 是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格（扩展阅读：table tr td、table tr th表格布局）。 为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。（扩展阅读：ul li、ol li、li
dl dt dd 标签的用法（一）
weixin_34235371的博客
02-08 2551
html标签中 是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。 为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。 一般的写法： 首先dt和dd是放于dl标签内，标签dt与dd处于dl...
＜dl＞、＜dt＞、＜dd＞ 的使用
琳琳的博客
05-07 3762
<dl>、<dt>、<dd>这三个html标记是一个组合，它们很很像<ul><li>这个标签组合，但<dl>、<dt>、<dd>通常是用来描述一些术语定义，比如附录里的词汇表，或用来显示key-value这样成对的键和值。 <dl>、<dt>、<dd>通常被称为定义性列表。 用于一个术语对应一条解释或定义 <dl> <dt>Firefox&l
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值