ul: unordered lists
ol: ordered lists
li: Lists
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提供了很多元素輔助佈局。
LI代碼的格式化:
A).運用CSS格式化列表符：
以下是引用片段：
ul li{
list-style-type:none;
}
B).如果你想將列表符換成圖像，則：
以下是引用片段：
ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}
C).爲了左對齊，可以用如下代碼：
以下是引用片段：
ul{
list-style-type:none;
margin:0px;
}
D).如果想給列表加背景色，可以用如下代碼：
以下是引用片段：
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
E).如果想給列表加MOUSEOVER背景變色效果，可以用如下代碼：
以下是引用片段：
ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }說明：display:block;這一行必須要加的，這樣才能塊狀顯示！
F).LI中的元素水平排列,關鍵FLOAT:LEFT：
以下是引用片段：
ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
<ul><li>的區別
<LI> 的參數設定（常用）：
例如： <li type="square" value="4">
type="square"
只適用於非順序清單，設定符號款式，其值有三種，如下，內定爲 type="disc"：
以下是引用片段：
符號 是當 type="disc" 時的列項符號。
符號 if" width=10 height=10 border=0> 是當 type="circle" 時的列項符號。
符號 是當 type="square" 時的列項符號。
value="4"
只適用於順序清單，設定該一項的數目，其後各項將以此作爲起始數目而遞增，但前面各項則不受影響，其值只能是 1,2,3.. 等整數，沒有內定值。
<UL>稱爲無序清單標記。
所謂無序清單就是在每一項前面加上 、、等符號，故又稱符號清單。
<UL> 的參數設定（常用）：
例如： <UL type="square">
type="square"
設定符號款式，其值有三種，如下，內定爲 type="disc"：
以下是引用片段：
符號 是當 type="disc" 時的列項符號。
符號 是當 type="circle" 時的列項符號。
符號 是當 type="square" 時的列項符號。
<ul>是項目列表，<li>是列表項，項目列表就是用符號來列的，所以你列出來默認的就是黑點，還有一個是<ol>這個是編號列表，用數字來列的，也是用<li>做列表項
<li>是 list item 即列表項，但列表有很兩種，所以外面得有 <ul> 或者 <ol> 用來區別無序列表（小點點）和有序列表（1,2,3...）。
我們平時常用的是< 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的簡短說明或解
實例如下一：
<!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>
<style >
#d {width:940px;margin:0 auto;}
#d dl {float:left;text-align:left;width:292px;display:inline;margin:10px 0 8px 20px;border-right:1px solid #b4c5da;}
#d dt {font-weight:bold;margin:0 0 10px;}
#d dd {float:left;width:96px;margin:0;}
#d dd a {line-height:22px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>雪烏鴉的IT生活</title>
</head>
<body>
<div id="d" >
<dl>
<dt>幫助說明</dt>
<dd><a href="http://edu.codepub.com" target="_blank">如何上傳</a></dd>
<dd><a href="http://edu.codepub.com" target="_blank">如何錄製</a></dd>
<dd><a href="http://edu.codepub.com" target="_blank">相冊視頻</a></dd>
<dd><a href="http://edu.codepub.com" target="_blank">如何訂閱</a></dd>
<dd><a href="http://edu.codepub.com" target="_blank">如何分享</a></dd>
<dd><a href="http://edu.codepub.com" target="_blank">管理主頁</a></dd>
</dl>
<dl>
<dt>幫助說明</dt>
<dd><a href="http://edu.codepub.com" target="_blank">如何上傳</a></dd>
<dd><a href="http://edu.codepub.com" target="_blank">如何錄製</a></dd>
<dd><a href="http://edu.codepub.com" target="_blank">相冊視頻</a></dd>
<dd><a href="http://edu.codepub.com" target="_blank">如何訂閱</a></dd>
<dd><a href="http://edu.codepub.com" target="_blank">如何分享</a></dd>
<dd><a href="http://edu.codepub.com" target="_blank">管理主頁</a></dd>
</dl>
</div>
</body>
</html>
二、
<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>
|
