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

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

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

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

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

实例一：

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

实例二：

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

实例三：


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

实例四：

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,667评论 5赞 472
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,361评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,700评论 0赞 333
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,027评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,988评论 5赞 361
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,230评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,705评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,366评论 0赞 255
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,496评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,405评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,453评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,126评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,725评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,803评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,015评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,514评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,111评论 2赞 341

推荐阅读更多精彩内容

  • Weex中支持的标签用法讲解
    在学习weex的过程中看到了常用标签相关的内容，为了自己以后能够快速查阅特整理出此文档。 a 简介组件定义了指向某...
    TyroneTang阅读 4,632评论 1赞 3
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,381评论 1赞 45
  • Web端---常用的特效
    1. tab列表折叠效果 html: 能源系统事业部 岗位名称： 工作地点 岗位名...
    lilyping阅读 1,817评论 0赞 1
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1赞 92
  • 赞美
    薛明伦 焦点初级九期 焦作 坚持原创分享第44天 20180409 赞美有一种难以想象的力量。 我们每个人内心都渴...
    和颜悦色2018阅读 164评论 0赞 1