睡蓮‧池水間

Guest
2012-May-20  
有 0 位會員和 10 位訪客在線上

文章 :: 標準之路

WEB標準能有多難？

日期：08/8/15 12:20
點閱：225
評分：0票
回覆：0
子標題：07 - 有序列表
信息有時候是無序歸納的，有的卻有著明確的順序，在上一篇也提到了。那麼簡單的來想一下身邊有哪些事物是有先後順序的：操作步驟、排行榜、書目錄……以前我們面對這些有著順序或是有數字註明排序的內容時大多是在數據前自行加上一個數值，或是由程序加上這個數值。而如果使用有序列表則不需要這麼麻煩，根本不用自行去填寫序數，當單層列表的時候這種特性似乎並不明顯，而當使用多層的時候其特性就很明顯了。那麼還是先來了解一下有序列表的代碼形式：

<ol>
<li>這就是列表的內容了，這是第一句</li>
<li>這就是列表的內容了，這是第二句</li>
<li>這就是列表的內容了，這是第三句</li>
<li>這就是列表的內容了，這是第四句</li>
<li>這就是列表的內容了，這是第五句</li>
</ol>
大家看到了其本形式與無序列表的一樣，只是在外圍標籤上名稱不同。無序是UL，有序就變成OL了。所不同的是有序列表將會有比無序更多的標籤屬性。因為是有序的就會涉及順序的方方面面。

改變開始值

通常情況下瀏覽器會從阿拉伯數字“1”開始自動有序編號。而事有特殊，當有序列表需要變成兩個部分，那麼下一部分從頭開始編號自然就是不對的了。那麼下一部分的編號自然是要根據上一段最後一個編號加1為開始號。這就是說我們需要改變列表的開始值。改變開始值的屬性是："start"，正式的寫法是：

<ol start="6">
<li>這就是列表的內容了，這是第一句</li>
<li>這就是列表的內容了，這是第二句</li>
<li>這就是列表的內容了，這是第三句</li>
<li>這就是列表的內容了，這是第四句</li>
<li>這就是列表的內容了，這是第五句</li>
</ol>
大家注意到了，上面這段代碼是說列表的開始值是從6開始的，那麼現在可以試著在一段有序列表中加入這一屬性看看是否發生了變化？

改變編號類型

瀏覽器中默認一般都是阿拉伯數字為列表編號，那麼是否可以有別的類型呢？有，屬性為“type”，不過提供的類型不多，只有五種：

類型值 生成樣式 序列舉例
A 大寫字母 A、B、C、D、E
a 小寫字母 a、b、c、c、e
I 大寫羅馬數字 I、II、III、IV、V
i 小寫羅馬數字 i、ii、iii、iv、v
1 阿拉伯數字 1、2、3、4、5

在代碼中的寫法應該是：

<ol type="A">
<li>這就是列表的內容了，這是第一句</li>
<li>這就是列表的內容了，這是第二句</li>
<li>這就是列表的內容了，這是第三句</li>
<li>這就是列表的內容了，這是第四句</li>
<li>這就是列表的內容了，這是第五句</li>
</ol>
我認為這個類型值大家還是少用為好，因為用CSS一樣可以設置這個類型。我一向主張樣式方面的事應由樣式語言來做。那麼除非特殊原因，這個屬性還是不用為好。當然無論是CSS1還是CSS2基本上都沒考慮中國，在CSS2中已經為提供了日文編號字符，可是還沒有中文。我認為在這點上CSS2還是有著缺陷的，至少他沒有提供更好的擴展形式。雖然他沒提供，但是我們一樣可以用我們自己的形式去完成多樣化。怎麼做呢？請大家先思考，後面有關於列表的樣式內容將會講述我是如何處理的。


Firefox與IE下UL預設標記的異同

列表UL或是OL中都有一個預設標記，這個標記可能是實點圓點，也可能是數字。在實際的應用中，我們需要去掉這個預設標記，但我們不清楚這個預設標記是存在於什麼位置。因為IE與FF似乎在處理UL的預設標記時都有著不同的方式：我們來寫一個UL的HTML代碼結構：

HTML結構

<ul>
<li>建設部通報八起房地産交易違法、違規典型案例 </li>
<li>周小川表態引發美元震蕩|人民幣應成世界貨幣?</li>
<li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li>
<li>美國房市“麻煩”未了|底特律房子比車子便宜</li>
<li>網絡報告:美國是黑客大本營 中國是最大受害國</li>
</ul>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <title>Firefox與IE下UL預設標記的異同</title>
</head>
<body>
<ul> 
 <li>建設部通報八起房地産交易違法、違規典型案例 </li> 
 <li>周小川表態引發美元震蕩|人民幣應成世界貨幣?</li> 
 <li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li> 
 <li>美國房市“麻煩”未了|底特律房子比車子便宜</li> 
 <li>網絡報告:美國是黑客大本營 中國是最大受害國</li> 
</ul> 
</body>
</html>


這個UL在不同的瀏覽器中的顯示基本上是差不多的。那麼我們設定一下CSS試著看一下IE與FF什麼地方不一樣：

CSS代碼

ul {background:#ddd; padding:0; } 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <title>Firefox與IE下UL預設標記的異同</title>
 <style type="text/css">
 /*<![CDATA[*/
  ul {background:#ddd; padding:0; } 
 /*]]>*/
 </style>
</head>
<body>
<ul> 
 <li>建設部通報八起房地産交易違法、違規典型案例 </li> 
 <li>周小川表態引發美元震蕩|人民幣應成世界貨幣?</li> 
 <li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li> 
 <li>美國房市“麻煩”未了|底特律房子比車子便宜</li> 
 <li>網絡報告:美國是黑客大本營 中國是最大受害國</li> 
</ul> 
</body>
</html>


現在只把padding的值設為0，這時我們看一下IE中除了多個背景之外並沒有什麼變化，但是FF中的預設標記不見了！這裏要注意的是IE中的預設標記是在背景外的。我們再來換個方式來設置：

CSS代碼

ul {background:#ddd; margin:0; }



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <title>Firefox與IE下UL預設標記的異同</title>
 <style type="text/css">
 /*<![CDATA[*/
  ul {background:#ddd; margin:0; } 
 /*]]>*/
 </style>
</head>
<body>
<ul> 
 <li>建設部通報八起房地産交易違法、違規典型案例 </li> 
 <li>周小川表態引發美元震蕩|人民幣應成世界貨幣?</li> 
 <li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li> 
 <li>美國房市“麻煩”未了|底特律房子比車子便宜</li> 
 <li>網絡報告:美國是黑客大本營 中國是最大受害國</li> 
</ul> 
</body>
</html>


這裏我們再看，情況相反，IE的預設標記不見了，而FF中的預設標記還在，這裏要注意的是這時FF中的預設標記是在背景裏的。當然我們這裏有點不理解了，到底這是為什麼呢？這個預設標記究竟是在什麼地方的呢？下面我們通過一個實例來看一下UL的預設標記是在什麼地方的！

HTML結構

<ul>
<li>建設部通報八起房地産交易違法、違規典型案例 </li>
<li>周小川表態引發美元震蕩|人民幣應成世界貨幣?</li>
<li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li>
<li>美國房市“麻煩”未了|底特律房子比車子便宜</li>
<li>網絡報告:美國是黑客大本營 中國是最大受害國</li>
</ul>


CSS代碼

ul {background:#ddd; padding:100px; margin:100px; border:100px solid #eee; }
li {background:#aaa;}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <title>Firefox與IE下UL預設標記的異同</title>
 <style type="text/css">
 /*<![CDATA[*/
  ul {background:#ddd; padding:100px; margin:100px; border:100px solid #eee; } 
  li {background:#aaa;}
 /*]]>*/
 </style>
</head>
<body>
<ul> 
 <li>建設部通報八起房地産交易違法、違規典型案例 </li> 
 <li>周小川表態引發美元震蕩|人民幣應成世界貨幣?</li> 
 <li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li> 
 <li>美國房市“麻煩”未了|底特律房子比車子便宜</li> 
 <li>網絡報告:美國是黑客大本營 中國是最大受害國</li> 
</ul> 
</body>
</html>


這時我們看到，margin區域是最外圍的白色部分，往裏有點灰色的是border，再往裏是更深一點的灰色，這個區域是padding，最深的區域是內容區。而預設標記正處在padding的區域，那麼是不是說把padding區去掉這個預設標記就會消失呢？我們把CSS做一下修改：

CSS代碼

ul {background:#ddd; padding:0; margin:100px; border:100px solid #eee; }
li {background:#aaa;} 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <title>Firefox與IE下UL預設標記的異同</title>
 <style type="text/css">
 /*<![CDATA[*/
  ul {background:#ddd; padding:0; margin:100px; border:100px solid #eee; } 
  li {background:#aaa;} 
 /*]]>*/
 </style>
</head>
<body>
<ul> 
 <li>建設部通報八起房地産交易違法、違規典型案例 </li> 
 <li>周小川表態引發美元震蕩|人民幣應成世界貨幣?</li> 
 <li>首都機場一香港乘客制造炸彈威脅導致航班延誤</li> 
 <li>美國房市“麻煩”未了|底特律房子比車子便宜</li> 
 <li>網絡報告:美國是黑客大本營 中國是最大受害國</li> 
</ul> 
</body>
</html>


我們把padding設為0後發現預設標記依然還在，不過這時他處在了border的上面，那麼我們可以根據上面推測出預設標記並不存在於 margin,padding或是border中，margin,padding與border只不過為預設標記提供了一個存在並顯示的空間。而這個預設標記是浮於margin,padding與border之上的。

那麼這時我們大致上可能已經理解了，其實IE與FF對於UL的默認值的設定是不一樣的，IE給了UL一個margin值，但是卻沒有給padding值，所以IE中UL的預設標記點是在背景外的。而FF相反給了一個padding值卻沒有給margin值，所以在FF中UL的預設標記點是在背景內的。但是依據上面的實例我們清楚，這個預設標記點不屬於paading也不屬於margin。他只屬於內容部分，他一直是在內容的外邊緣，當然我們還可以通過 CSS來設置其在內容的內邊緣。基本方式請查閱《CSS2中文手冊》

通過上面的例子我們清楚了，想要讓這個預設標記消失光用margin:0;與padding:0;因為如果出現了border的寬度達到一定的數值時這個預設標記還是會出現的。所以正確的寫法是：margin:0; padding:0; list-style:none;

雖然預設標記很不錯，但是卻沒辦法精確控制，所以在實際應用中並不推薦使用，還是用背景圖來代替！

    «« 瀏覽器的 Acid3 Tests 結果一覽 欲練 CSS ，必先宮 IE »»    

引用

  • 文章地址： http://waterlily-lsl.com/modules/article/view.article.php/c1/51
  • 引用地址： http://waterlily-lsl.com/modules/article/trackback.php/51

評分

10
9
8
7
6
5
4
3
2
1


 

API: RSS | RDF | ATOM

回覆及設定

    關閉


 

最 新 發 表 及 資 訊 區

最新公告

此為池水間 banner ，需要安裝 Adobe Flash Player 才能觀看內容。

文章分類

最新浮生錄文章

最新留言

最新留言：2012-Jan-6　11:13am
留言編號：76
留言者： wuji888
網主回覆： 有
總留言數： 71

前往萍踪留影

造訪統計

今天：169
昨天：751
本週：169
本月：10185
總計：431422
平均：311

連結

Powered By XOOPS
Valid XHTML 1.1
Valid CSS 3
除另有註明外，本站內容均採用 Creative Commons 姓名標示-非商業性-相同方式分享 3.0 授權條款授權
登 入