HTML 列表


<ol>標簽-有序列表

定義和用法:

<ol>標簽定義有序列表。

HTML 與 XHTML 之間的差異

在 HTML 4.01 中,ol 元素的 "compact"、"start" 以及 "type" 屬性是不被贊成使用的。

在 XHTML 1.0 Strict DTD 中,ol 元素的 "compact"、"start" 以及 "type" 屬性是不被支持的。

屬性:

reversed -- HTML5中的新屬性。

  值:reversed       

  reversed 屬性是邏輯屬性。

  當使用該屬性時,它規定列表屬性為降序 (9, 8, 7...),而不是升序 (1, 2, 3...)。

  目前只有 Chrome 和 Safari 6 支持 reversed 屬性。

<ul>標簽  -無序列表

定義和用法:

<ul> 標簽定義無序列表。 

HTML 與 XHTML 之間的差異

在 HTML 4.01 中,ul 元素的 "compact" 和 "type" 屬性是不被贊成使用的。

在 XHTML 1.0 Strict DTD 中,ul 元素的 "compact" 和 "type" 屬性是不被支持的。

提示和注釋:

提示:請使用樣式來定義列表的類型。

<li>標簽  --列表項目

定義和用法:

<li> 標簽定義列表項目。

<li> 標簽可用在有序列表 (<ol>) 和無序列表 (<ul>) 中。

HTML 與 XHTML 之間的差異

在 HTML 4.01 中,li 元素的 "type" 和 "value" 屬性是不被贊成使用的。

在 XHTML 1.0 Strict DTD 中,li 元素的 "type" 和 "value" 屬性是不被支持的。

css樣式:

1.   list-style-type           屬性設置列表項標記的類型。

     值:

none 無標記
disc 默認。標記是實心圓。                                                   (無序列表)
circle 標記是空心圓。                                                            (無序列表)
square 標記是實心方塊。                                                         (無序列表)
decimal 標記是數字。                                                               (有序列表)
decimal-leading-zero     0開頭的數字標記。(01,02,03等。)                         (有序列表)
lower-roman  小寫羅馬數字(i,ii,iii,iv,v,等。)                                   (有序列表)
upper-roman 大寫羅馬數字(I,II,III,IV,V,等。)                                 (有序列表)
lower-alpha 小寫英文字母(a,b,c,d,等。)                                     (有序列表)
upper-alpha 大寫英文字母(A,B,C,D,等。)                                    (有序列表)
lower-greek 小寫希臘字母(alpha,beta,gamma,等。)                    (有序列表)
lower-latin 小寫拉丁字母(a,b,c,d,e,等。)                                    (有序列表)
upper-latin 大寫拉丁字母(A,B,C,D,E,等。)                                   (有序列表)
hebrew 傳統的希伯來編號方式。                                                (有序列表)
armenian 傳統的亞美尼亞編號方式。                                             (有序列表)
georgian 傳統的喬治亞編號方式(an,ban,gan,等。)                    (有序列表)
cjk-ideoguaphic 簡單的表意數字。                                                         (有序列表)
hiragana  標記是: a, i, u, e, o, ka, ki, 等。(日文片假名)            (有序列表)
katakana  標記是:A, I, U, E, O, KA, KI, 等。(日文片假名)          (有序列表)
hiragana-iroha  標記是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)     (有序列表)
katakana-iroha  標記是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)(有序列表)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ul.circle {list-style-type:circle;}
ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;}
ol.lower-alpha {list-style-type:lower-alpha;}

2.  list-style-position        設置在何處放置列表項標記。

可能的值:

inside 

列表項目標記放置在文本以內,且環繞文本根據標記對齊。

outside 

默認值。保持標記位於文本的左側。列表項目標記放置在文本以外,且環繞文本不根據標記對齊。

inherit 

規定應該從父元素繼承 list-style-position 屬性的值。

注釋:任何的版本的 Internet Explorer (包括 IE8)都不支持屬性值 "inherit"。

 

 

 

               

 

 

說明

   該屬性用於聲明列表標志相對於列表項內容的位置。外部 (outside) 標志會放在離列表項邊框邊界一定距離處,不過這距離在 CSS 中未定義。內部 (inside) 標志處理為好像它們是插入在列表項內容最前面的行內元素一樣。

3.   list-style-image   使用圖像來替換列表項的標記。

      可能的值:

URL

圖像的路徑。

none

默認。無圖形被顯示。

inherit

規定應該從父元素繼承 list-style-image 屬性的值。

注釋:任何的版本的 Internet Explorer (包括 IE8)都不支持屬性值 "inherit"。

     

 

 

 

 

 

說明

這個屬性指定作為一個有序或無序列表項標志的圖像。圖像相對於列表項內容的放置位置通常使用 list-style-position 屬性控制。

注釋:請始終規定一個 "list-style-type" 屬性以防圖像不可用。

ol
  {
  list-style-image:url("/i/arrow.gif");
  list-style-type:square;
  }

<dl>標簽--定義列表

定義和用法:

<dl> 標簽定義了定義列表(definition list)。

<dl> 標簽用於結合 <dt> (定義列表中的項目)和 <dd> (描述列表中的項目)。

<dt>標簽

定義和用法:

<dt> 標簽定義了定義列表中的項目(即術語部分)。

<dt>標簽表示內容塊的標題。

<dd>標簽

定義和用法:

<dd> 在定義列表中定義條目的定義部分。

<dd>標簽表示內容塊。

例子:效果圖:

計算機
用來計算的儀器 ... ...
顯示器
以視覺方式顯示信息的裝置 ... ...
<dl>
   <dt>計算機</dt>
   <dd>用來計算的儀器 ... ...</dd>
   <dt>顯示器</dt>
   <dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>

 dl dt dd 標簽的用法

使用了dt dd最外層就必須使用dl包裹,此組合標簽我們也又叫表格標簽,與table表格類似組合標簽,故名我們也叫dl表格。
為常用標題+列表型標簽。如沒有對dl dt dd標簽初始CSS樣式,默認dd列表內容會一定縮進。

首先dt和dd是放於dl標簽內,標簽dt與dd處於dl下相同級。也就是dt不能放入dd內,dd不能放入dt內。在dl下,dt與dd處於同級標簽。DD標簽可以若干。同時不能不加dl地單獨使用dt標簽或dd標簽。

< dl></dl >用來創建一個普通的列表
< dt>< /dt>用來創建列表中的上層項目
<dd>< /dd>用來創建列表中最下層項目
< dt>< /dt>和< dd>< /dd>都必須放在< dl></dl >標志對之間。
解釋下這里為什么說dt和dd分別創建上層和下層的項目。dt和dd如果不加浮動的話,是自己在一行的,也就是塊元素。所以這里寫的是上層和下層。

例子:

效果圖:

body{font-size:12px; line-height:1.8; width:900px; marigin:auto;}
*{margin:0; padding:0;}
dl{width:350px; height:170px; padding:20px; marigin-left:20px; background:white; background-color:green;}
dt{float:left; width:60px;}
dd{float:left; width:290px;}
<dl>
<dt>商品名稱:</dt>
<dd><strong>【好大的一只啊】</strong>優惠:<span>8.5折</span></dd>
<dt>商品簡介:</dt>
<dd>商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱</dd>
<dt>店鋪地址:</dt>
<dd>商品名稱</dd>
<dt>聯系電話</dt>
<dd>99999999999</dd>

瀏覽器兼容問題:

列表樣式
IE默認為40px,通過ul、ol的margin屬性設置
FF默認為40px,通過ul、ol的padding屬性設置
dl無縮進,但起內部的說明元素dd默認縮進40px,而名稱元素dt沒有縮進。
要清除列表樣式,一般可以設置
ul, ol, dd {
   list-style:none;     這一句是取消列表樣式。
   margin:0;
   padding:0;
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM