當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

DIV+CSS中标签ul ol li dl dt dd用法

發布時間：2025/4/16 CSS 54 豆豆

生活随笔收集整理的這篇文章主要介紹了 DIV+CSS中标签ul ol li dl dt dd用法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

ul ol li dl dt
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>標志對之間?？匆幌孪逻叺睦幽蜁靼琢?#xff1a;

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">?

?
</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