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

最新推荐文章于 2022-10-02 20:16:18 发布
最新推荐文章于 2022-10-02 20:16:18 发布
阅读量303 收藏
点赞数
分类专栏： 知识

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

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

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

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

DIV+CSS中æ ç­¾dl dt dd常ç¨çç¨æ³ - å°çª - å°çªçç½ä¸å®¶å­

源码：

<!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>  
<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>

DIV+CSS中æ ç­¾dl dt dd常ç¨çç¨æ³ - å°çª - å°çªçç½ä¸å®¶å­

<!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>  
<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>  
<wbr style="LINE-HEIGHT: 28px"></wbr>

DIV+CSS中æ ç­¾dl dt dd常ç¨çç¨æ³ - å°çª - å°çªçç½ä¸å®¶å­

<!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>  
<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> <wbr style="LINE-HEIGHT: 28px"></wbr>

DIV+CSS中æ ç­¾dl dt dd常ç¨çç¨æ³ - å°çª - å°çªçç½ä¸å®¶å­

<!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>  
<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>

 

超域
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div学习之div中dl-dt-dd的详解
weixin_30467087的博客
10-22 1192
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包裹，此组合标...
CSS 之dl dt dd模拟表格实例代码
12-02
随便搜下，几十万条。贴出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 auto; width:50%; border:1px solid #f8b3d0; border-bottom:none; } dt{ font-weight:800; background:#ff99cc; color:#fff; } dt,dd{ line-he
html dd嵌套div,dl dt dd的嵌套使用
weixin_42133969的博客
06-17 771
dl dt dd的嵌套使用dd元素中可以包含block元素，而dt中只能包含inline元素，在dd中可以包含dl元素效果是这样的,主要的是效果是在dd中加了一个表格,如果使用表格来实现的话,有点困难,要计算表头要跨越几行,或者使用大表格套个小表格的形式, body{ font-size:12px; line-height:1.8; margin:auto;}*{ margin:0; paddin...
div+css布局必了解的列表元素ul ol li dl dt dd详解
10-30
dt 和dd中可以再加入 ol ul li和p，理解这些以后，在使用div布局的时候，会方便很多，其实w3c提供了很多元素辅助布局都是有它的用处的，而不尽是div。
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--使用/教程/实例
热门推荐
IT利刃出鞘的博客
12-05 1万+
本文用示例介绍CSS中的dl, dt, dd的用法。 dl, dt, dd是组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。 为常用标题+列表型标签。若没有对dl dt dd标签初始CSS样式，默认dd列表内容会缩进。
html三个列表标签的介绍
Kyrieki11的博客
05-23 2641
html 有序列表 定义列表 无序列表 前端
css+div（一）用 dl 列表实现导航卡片
qq_55796594的博客
04-25 1062
动态的导航卡片1.html部分2.css部分2.1规划页面2.2设置菜单项的链接2.3设置 ul 列表和 li 列表项 最终成果： 1.html部分 <div> <dl> <dt><a href="#a">军事新闻</a><a href="#b">财经资讯</a><a href="#c">娱乐资讯</a></dt> <dd> <ul id="a">
关于css 中的dl dt dd
Yami__yan的博客
01-20 1968
< dl>< /dl>用来创建一个普通的列表, < dt>< /dt>用来创建列表中的上层项目， <dd>< /dd>用来创建列表中最下层项目， < dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。 常用与 左右排布的列表，左侧是标签信息，右侧是描述信息。 例如: 配合 dl dd dt 加上以下几行代码就可实现
小猿圈web前端讲解dl、dt、dd标签
qq_42210792的博客
07-25 5404
于web前端工作者以及正在学习前端的同学来说dl、dt、dd标签一定不陌生的，今天小猿圈web前端讲师就给大家讲解一下dl、dt、dd标签用途等问题。 dd、dt标签是是列表用的。 我们平时常用的是<ul>< li>标签，不过dd、dt标签也蛮不错，特别是发布程序的时候功能模块列表什么的可以使用它来排版。 <dl></dl><dt&gt...
CSS3的应用-“优课教育”网站首页制作
weixin_62848089的博客
10-02 7971
放效果图总是违禁，这次就不放了。可以自己运行一下代码试试看看效果。效果和书上是一样的。
dl dt 和dd的用法
happyYYhy的博客
02-28 8812
dl默认的是块状元素 用来创建一个普通的列表, 用来创建列表中的上层项目， 用来创建列表中最下层项目， 和都必须放在标志对之间。 dl  —— define list——定义列表 dt ——define list title——用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。 dd——define list define——用于生成定义列表各列表项
<dl>~<dt>~<dd>
立业的博客
12-14 976
■ 定义 <dl>标签用于定义描述列表(或定义列表) 自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号 dl代表单词Definition List，意为定义列表 dt代表单词Definition Term，意为定义术语 dd代表单词Definition Description，意为定义描述 ■ 使用说明 该标签会与<dt>(定义项目/名字)和...
html中dl和dd是什么标签,html中dl和dd和dt标签的定义
weixin_40008339的博客
06-24 5996
我们在制作网页过程中用到列表时一般会使用或者标签，很少用刑标签，但是这个三个标签却有着不可忽视的作用，毕竟Web标准中要尽最大可能的使用已有的标签。它们的用途是：< dl>< /dl>用来创建一个普通的列表,< dt>< /dt>用来创建列表中的上层项目，< dd>< /dd>用来创建列表中最下层项目，< dt>&...
div+css布局与ul dl dt ol详解：提升网页结构与效率的关键
本文档主要介绍了HTML中常用的列表标记ul, dl, dt, ol以及div元素在CSS布局中的应用技巧。首先，ul（无序列表）和ol（有序列表）在网页设计中扮演着重要角色。ul通常用于创建带有圆点或数字的项目列表，如： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值