DIV+CSS中標籤dl dt dd常用的用法
< 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
相關文章
- onethink自帶的kindeditor遮蔽dl,dt,dd標籤怎麼破!?
- [BUG反饋]onethink自帶的kindeditor遮蔽dl,dt,dd的解決辦法
- HTML 的常用標籤HTML
- HTML 常用標籤HTML
- xss常用標籤
- HTML常用標籤HTML
- SQLmybatis常用標籤SQLMyBatis
- HTML常用標籤的使用HTML
- Mybatis中常用的標籤MyBatis
- HTML中Progress標籤的定義及用法總結!HTML
- JSP C 標籤的常見用法JS
- jsp標籤jsp:useBean用法JSBean
- 什麼是JSTL標籤?常用的標籤庫有哪些?JS
- 常用HTML標籤1HTML
- HTML之常用標籤HTML
- wordpress常用標籤呼叫
- Html網頁中meta標籤及用法詳解HTML網頁
- Git tag標籤用法詳解Git
- HTML 常用的標籤和屬性HTML
- HTML一些常用的標籤HTML
- 常用的標籤分類有哪些
- 1.2 常用HTML標籤1HTML
- HTML筆記 常用標籤HTML筆記
- HTML常用標籤介紹HTML
- HTML5常用標籤HTML
- Go語言中JSON標籤的用法與技巧GoJSON
- Html5 aside標籤的用法和作用HTMLIDE
- 常用HTML標籤3:表單HTML
- html5基本常用標籤HTML
- pbootcms常用標籤程式碼集合boot
- HTML 基本骨架與常用標籤HTML
- Chrome 開發者工具 performance 標籤頁的用法ChromeORM
- 常用的HTML標籤詳解與總結HTML
- 1.4 常用HTML標籤3:表單HTML
- 常用HTML標籤2:表格和列表HTML
- HTML中的標籤的使用HTML
- 內嵌標籤frameset框架屬性及用法框架
- HTML常用基礎標籤:圖片與超連結標籤全解!HTML