DIV+CSS中標(biāo)簽dl dt dd常用的用法

< dl>< /dl>用來創(chuàng)建一個普通的列表,

< dt>< /dt>用來創(chuàng)建列表中的上層項(xiàng)目雕崩，

<dd>< /dd>用來創(chuàng)建列表中最下層項(xiàng)目架曹，

< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標(biāo)志對之間垂蜗。

實(shí)例一：

<!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>標(biāo)題交給我DD</dd>

? </dl>

? <dl>

? ? <dt><a href="#">圖片交給我DT</a></dt>

? ? <dd>標(biāo)題交給我DD</dd>

? </dl>

? <dl>

? ? <dt><a href="#">圖片交給我DT</a></dt>

? ? <dd>標(biāo)題交給我DD</dd>

? </dl>

? <dl>

? ? <dt><a href="#">圖片交給我DT</a></dt>

? ? <dd>標(biāo)題交給我DD</dd>

? </dl>

? <dl>

? ? <dt><a href="#">圖片交給我DT</a></dt>

? ? <dd>標(biāo)題交給我DD</dd>

? </dl>

? <dl>

? ? <dt><a href="#">圖片交給我DT</a></dt>

? ? <dd>標(biāo)題交給我DD</dd>

? </dl>

? <dl>

? ? <dt><a href="#">圖片交給我DT</a></dt>

? ? <dd>標(biāo)題交給我DD</dd>

? </dl>

? <dl>

? ? <dt><a href="#">圖片交給我DT</a></dt>

? ? <dd>標(biāo)題交給我DD</dd>

? </dl>

</div>

</body>

</html>

實(shí)例二：

<!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>標(biāo)題</h2>

? <span>內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--</span><br />

? <a class="More">了解更多...</a>

</dd>

? </dl>

? <dl>

? ? <dt><a href="#">圖片交給我DT</a></dt>

? ? <dd>

? <h2>標(biāo)題</h2>

? <span>內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--內(nèi)容--</span><br />

? <a class="More">了解更多...</a>

</dd>

? </dl>

</div>

</body>

</html>

實(shí)例三：


<!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";>詳細(xì)介紹</span>]</dd>

? <dt>店鋪地址：</dt>

? ? ? <dd>商品名稱</dd>

? <dt>聯(lián)系電話：</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";>詳細(xì)介紹</span>]</dd>

? <dt>店鋪地址：</dt>

? ? ? <dd>商品名稱</dd>

? <dt>聯(lián)系電話：</dt>

? ? ? <dd>9999999999999999999999999</dd>

</dl>

</div>

</body>

</html>?

實(shí)例四：

<!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>商品價(jià)格</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">商品價(jià)格商品價(jià)格</dd>

<dt class="titles1-1">圖片交給我DT</dt>

<dd class="titles1-1">商品名稱商品名稱</dd>

<dd class="titles1-1">商品介紹商品介紹</dd>

<dd class="titles1-1">商品價(jià)格商品價(jià)格</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">商品價(jià)格商品價(jià)格</dd>

</dl>

</div>

</body>

</html>

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末德挣，一起剝皮案震驚了整個濱河市屁柏，隨后出現(xiàn)的幾起案子怪嫌，更是在濱河造成了極大的恐慌唤蔗，老刑警劉巖探遵，帶你破解...
    沈念sama閱讀 206,214評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異妓柜，居然都是意外死亡箱季，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門棍掐，熙熙樓的掌柜王于貴愁眉苦臉地迎上來藏雏，“玉大人，你說我怎么就攤上這事塌衰∷呱裕” “怎么了？”我有些...
    開封第一講書人閱讀 152,543評論 0贊 341
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵最疆，是天一觀的道長杯巨。 經(jīng)常有香客問我，道長努酸，這世上最難降的妖魔是什么服爷？ 我笑而不...
    開封第一講書人閱讀 55,221評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮获诈，結(jié)果婚禮上仍源，老公的妹妹穿的比我還像新娘。我一直安慰自己舔涎，他們只是感情好笼踩，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著亡嫌，像睡著了一般嚎于。 火紅的嫁衣襯著肌膚如雪掘而。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,007評論 1贊 284
  • 城市分裂傳說
    那天于购，我揣著相機(jī)與錄音袍睡，去河邊找鬼。 笑死肋僧，一個胖子當(dāng)著我的面吹牛斑胜，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播嫌吠，決...
    沈念sama閱讀 38,313評論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼止潘，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了居兆？” 一聲冷哼從身側(cè)響起覆山，我...
    開封第一講書人閱讀 36,956評論 0贊 259
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤竹伸，失蹤者是張志新（化名）和其女友劉穎泥栖，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體勋篓，經(jīng)...
    沈念sama閱讀 43,441評論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡吧享，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了譬嚣。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片钢颂。...
    茶點(diǎn)故事閱讀 38,018評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖拜银，靈堂內(nèi)的尸體忽然破棺而出殊鞭，到底是詐尸還是另有隱情，我是刑警寧澤尼桶，帶...
    沈念sama閱讀 33,685評論 4贊 322
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布操灿，位于F島的核電站，受9級特大地震影響泵督，放射性物質(zhì)發(fā)生泄漏趾盐。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一小腊、第九天 我趴在偏房一處隱蔽的房頂上張望救鲤。 院中可真熱鬧涛漂，春花似錦贴彼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0贊 19
  • 一樁弒父案入问，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽丹锹。三九已至犹赖，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間卷仑，已是汗流浹背峻村。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1贊 261
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留锡凝，地道東北人粘昨。 一個月前我還...
    沈念sama閱讀 45,467評論 2贊 352
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像窜锯，于是被迫代替她去往敵國和親张肾。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評論 2贊 345

推薦閱讀更多精彩內(nèi)容

  • 在學(xué)習(xí)weex的過程中看到了常用標(biāo)簽相關(guān)的內(nèi)容锚扎，為了自己以后能夠快速查閱特整理出此文檔吞瞪。 a 簡介組件定義了指向某...
    TyroneTang閱讀 4,644評論 1贊 3
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)驾孔。 注意：講述HT...
    kismetajun閱讀 27,422評論 1贊 45
  • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱： 工作地點(diǎn) 崗位名...
    lilyping閱讀 1,830評論 0贊 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案芍秆？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評論 1贊 92
  • 薛明倫 焦點(diǎn)初級九期 焦作 堅(jiān)持原創(chuàng)分享第44天 20180409 贊美有一種難以想象的力量。 我們每個人內(nèi)心都渴...
    和顏悅色2018閱讀 165評論 0贊 1