DIV+CSS中标签ul ol li dl dt dd用法
dd都是DIV+CSS做網頁長用的東西,相當于一棵樹的樹技,下面就了解一下這些東西的全體用法,本人用dd,dt,dd用得很少,懂得結合使用對做架構是很有好處的哦!
DIV
CSS網頁布局中常用的列表元素ul ol li dl dt dd釋義，塊級元素div盡量少用，和table一樣，嵌套越少越好
ol
有序列表。
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
表現為：
1……
2……
3……
ul
無序列表，表現為li前面是大圓點而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>
很多人容易忽略
dl dt dd的用法
dl 內容塊
dt 內容塊的標題
dd
內容
可以這么寫：
<dl>
<dt>標題</dt>
<dd>內容1</dd>
<dd>內容2</dd>
</dl>
dt和dd中可以再加入 ol ul li和p
理解這些以后，在使用div布局的時候，會方便很多，w3c提供了很多元素輔助布局。DD DT DL標簽
我們平時常用的是< ul>< li>標簽，不過dd、dt標簽也蠻不錯，特別是發布程序的時候功能模塊列表什么的可以使用它來排版。?
< dl>< /dl>
< dt>< /dt>
< dd>< /dd>?
< dl>< /dl>用來創建一個普通的列表,< dt>< /dt>用來創建列表中的上層項目，<?
dd>< /dd>用來創建列表中最下層項目，< dt>< /dt>和< dd><?
/dd>都必須放在< dl>< /dl>標志對之間。看一下下邊的例子您就會明白了：
dl ——define?list——定義列表?
dt ——define list title——用于生成定義列表中各列表項的標題，重復使用可以定義多個列表項的標題。?
dd——define list define——用于生成定義列表各列表項的說明文字段，重復使用可以定義多個說明文字段。dd是對應dt的簡短說明或解?
例子：
<dl>?
<dt>Today?
<dd>Today is yesterday.?
<dt>Tomorrow?
<dd>Tomorrow is today.?
</dl>?
例子2：?
<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>?
<title>無標題文檔</title>?
<style type="text/css">?
<!--?
dt {?
??????? float: left;?
??????? width: 60px;?
??????? margin: 0px;?
??????? padding: 0px;?
}?
dd {?
????????
float: left;?
??????? clear: none;?
??????? width: 290px;?
????????
margin: 0px;?
??????? padding: 0px;?
}?
dl {?
??????? width: 350px;?
??????? font-size: 9pt;?
??????? line-height: 1.5em;?
????????
position:relative;?
??????? margin: 0px;?
??????? padding: 0px;?
??????? left:15px;?
}?
.red {?
??????? color: #FF3300;?
}?
#box {?
??????? width: 500px;?
??????? background-color: #F1F1F7;?
}?
#box #content {?
??????? padding-top: 10px;?
????????
padding-right: 10px;?
??????? padding-bottom: 10px;?
??????? padding-left:?
20px;?
}?
-->?
</style>?
</head>?
<body>?
<div id="box">?
<div id="content">?
<img?
src=/Article/UploadFiles/200704/20070412091408274.gif align="left"/ >?
<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>0000-12345678 87654321?
</dd>?
</dl>?
</div>?
</div>?
</body></html>?
轉載于:https://www.cnblogs.com/yhongyu/archive/2012/03/30/2425156.html
總結
以上是生活随笔為你收集整理的DIV+CSS中标签ul ol li dl dt dd用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EXT.NET高效开发（一）——概述
- 下一篇： POJ 2485-Highways