溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
HTML中列表中共有三種：有序列表、無序列表和定義列表。
1、有序列表是一列使用數字進行標記的項目，它使用<li>包含于<ol>標簽（ordered lists）內；
<ol>
<li>開始部分</li>
<li>次要部分</li>
<li>結尾部分</li>
</ol>
2、無序列表是一組使用黑點狀進行標記的項目，它使用<li>包含在<ul>標簽（unordered lists）內；
<ul>
<li>關于主題</li>
<li>關于形式</li>
<li>關于內容</li>
</ul>
3、定義列表語義上表示項目及其注釋的組合，它以<dl>標簽（definition lists）開始，自定義列表項以<dt>（definition title）開始，自定義列表項的定義以<dd>（definition description）開始。
<dl>
<dt>CSS</dt>
<dd>CSS概念</dd>
<dd>CSS應用</dd>
<dd>CSS hacks</dd>
</dl>
從語義上來講，三組標簽分別對應不同具有含義的列表：無序列表適合成員之間無級別順序關系的情形；有序列表適合各項目之間存在順序關系的情形；定義列表用于一個術語名對應多重定義或者多個術語名同一個給出的定義，也可以只有術語名稱或只有定義，也就是說<dt>與<dd>在其中數量不限、對應關系不限。
list-style:list-style-image||list-style-position||list-style-type
list-style-image可定義列表前所使用圖片，list-style-position屬性取值含outside、inside；outside為默認值，列表項目標記此時被放置在文本以外，它將環繞文本在文本之外，inside列表項目旋轉在文本以內，環繞文本對齊。
<style type="text/css">
ul{border:dotted 1px #666;}
li{background:#ddd;}
ul.out{list-style-position:outside;}
ul.in{list-style-position:inside;}
</style>
list-style-position為outside
<ul class="out">
<li>關于主題</li>
<li>關于形式</li>
<li>關于內容</li>
</ul>
<h5>list-style-position為inside</h5>
<ul class="in">
<li>關于主題</li>
<li>關于形式</li>
<li>關于內容</li>
</ul>
若列表外標簽<ul>或<dl>或<ol>的padding-left設置為0，且list-style-position為outside時，列表符號將不會顯示，如上例中ul添加padding-left:0;將顯示如下：
<ul>
<li>男性</li>
<li>
<ol>女性
<li>女孩子</li>
<li>姑娘</li>
<li>大媽</li>
</ol>
</li>
</ul>
這里包括兩處錯誤：一是<ul>后不允許直接跟文字，二是這里的文字“女性”應當在第二個<li>后。正確格式如下：
<ul>
<li>男性</li>
<li>女性
<ol>
<li>女孩子</li>
<li>姑娘</li>
<li>大媽</li>
</ol>
</li>
</ul>
使用適合的標簽進行合理的嵌套可以實現很多復雜的布局，比如常見的tab標簽、滑動門等完全不需要使用js操作DOM即可完成，而且實現簡單，語義性強。例如還有這篇文章定義列表dl打造圖文并茂的CSS列表元素。
<h5>www.51obj.cn站點文章列表摘要</h5>
<dl>
<dt><a href="http://www.51obj.cn/" title="51obj.cn">文章一：javascript程序的優化</a></dt>
<dd>文章發布時間:2010-4-17</dd>
<dt><a href="http://www.51obj.cn/" title="51obj.cn">文章二：深入解析javascript中eval</a></dt>
<dd>文章發布時間：2010-4-17</dd>
<dt><a href="http://www.51obj.cn/" title="51obj.cn">文章三：實現SQLite高并發的問題</a></dt>
<dd>文章發布時間:2010-4-17</dd>
</dl>
CSS樣式如下：
<style type="text/css">
h5{font-size:14px; color:#333;}
a{color:#069;}
dl{ border:dashed 1px #666; font-size:14px; padding:4px; background:#FDFBDB;}
dt{clear:left; float:left; padding:4px 0;}
dd{ text-align:right; padding:4px 0;font-size:12px; color:#666;}
</style>
效果圖：
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
