列表標志位置

網(wǎng)頁建設(shè)中還可以做一件事來影響列表項的外觀，即確定標志出現(xiàn)在列表項內(nèi)容之外還是在內(nèi)容內(nèi)部。這是利用list-style-position完成的。

如果標志的位置設(shè)置為outside（默認值），則顯示與一般Web上列表項的顯示無二。不過，在網(wǎng)頁設(shè)計時，如果你需要一個稍微不同的外觀，可以把這個值設(shè)置為inside，將標志拉向內(nèi)容，這會使標志放在列表項的內(nèi)容“以內(nèi)”。對于具體如何做沒有明確定義，不過下面顯示了一種可能的做法：

li.first {list-style-position: inside;}

li.second {list-style-position: outside;}

list-style-position

值：inside | outside | inherit

初始值：outside

應(yīng)用于：display 值為list-item 的元素

繼承性：有

計算值：根據(jù)指定確定

簡寫列表樣式

為簡單起見，可以將以上3個列表樣式屬性合并為一個方便的屬性：list-style。

list-style

值：[||||] inherit

初始值：相對于各個屬性。

應(yīng)用于：display 值為list-item 的元素

繼承性：有

計算值：見單個屬性

例如：

li (list-style: url(ohio.gif) square inside;}

list-style的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個值，其他的就會填入其默認值。例如，以下兩個規(guī)則有同樣的視覺效果：

li.norm {list-style: url(img42.gif);}

li.odd {list-style: urr(img42.gif) disc outside;}/* the same thing */

還可以用同樣的方法覆蓋之前的規(guī)則。例如：

li {list-style-type: square;}

li.norm {list-style: url(img42.gif);)

li.odd {list-style: urr(img42.gif) disc outside;}/* the same thing */

其結(jié)果與圖上面所示相同，因為規(guī)則li.norm隱含的list-style-type值disc會覆蓋先前聲明的square值，同樣地，li.odd規(guī)則中顯式聲明的值disc也會覆蓋先前聲明的square值。

列表布局

前面已經(jīng)了解了應(yīng)用列表標志樣式的基本知識，下面來考慮不同瀏覽器中列表如何布局。

從列表項周圍的邊框可以看出，它們就像是塊級元素。實際上，值list-item確實定義為生成塊框。

標志和列表項內(nèi)容之間的距離在網(wǎng)頁建設(shè)中未定義，CSS2.1也沒有提供任何方法來控制這個距離。有意思的是，CSS2倒是提到過，這個內(nèi)容將在“列表標志定位”中簡單介紹。

如果標志放在列表項內(nèi)容之外，它們不會影響其他元素的布局，也不會影響列表項本身的布局。它們只是離內(nèi)容邊界有一段距離，只要內(nèi)容邊界移動，標志也會跟著軫動。標志的行為就像是標志相對于列表項內(nèi)容絕對定位一樣，比如說position: absolute; left:如果標志在列表項內(nèi)容內(nèi)部，則相當于放在內(nèi)容開始處的一個行內(nèi)元素。

迄今為止，還沒有增加具體的列表容器，換句話說，沒有ul也沒有ol元素。

類似于列表項，列表元素也是一個塊框，其中包含所有后代元素。不過，可以看到，標志不僅放在列表項內(nèi)容之外，也放在列表元素的內(nèi)容區(qū)外。在此并沒有指定列表通常有的“縮進”。

在寫作本書時，大多數(shù)瀏覽器會通過設(shè)置列表元素的內(nèi)邊距或外邊距來完成列表項的縮進。例如，用戶代理可能應(yīng)用以下規(guī)則：

ul, ol {margin-left: 40px;}

這是Internet Explorer和Opera采用的規(guī)則，大多數(shù)基于Gecko的瀏覽器則使用類似下面的規(guī)則：

ul, ol {padding-left: 40px;}

不能說這兩種做法不正確，但是如果你想消除列表項的縮進，二者的差異會導(dǎo)致一些問題。

注意：這里40px的距離是從較早的Web瀏覽器繼承來的，早先的瀏覽器會把列表縮進一定的像素數(shù)。更好的值可能是2.5em，因為這樣一來，縮進就可以隨文本大小的變化而調(diào)整。

如果創(chuàng)作人員在網(wǎng)頁設(shè)計時想改變列表的縮進距離，強烈建議你同時指定內(nèi)邊距和外邊距，以確保跨瀏覽器兼容性。

如果想用外邊距，可以寫作：

ul {margin-left: 1em; padding-left: 0;}

不論哪一種情況，要記住標志總會相對于列表項的內(nèi)容放置，因此可能會“掛”在文檔主文本之外，甚至超出瀏覽器容器邊界。

列表標志定位

許多創(chuàng)作人員都希望有這樣一個特性，能夠控制標志與列表項內(nèi)容之間的間隔。CSS2定義了一些辦法來做到這一點，這包括一個名為marker-off set的屬性和一個display值marker，從具體的實現(xiàn)來看，這是一個很笨拙的辦法，所以這些特性已經(jīng)從CSS2.1中去除了。

寫作本書時，CSS3列表模型的當前工作革案定又了一個更聞潔的新方法來影響標志位里，即：：marker偽元素。飯設(shè)這個模塊在成為完備推薦之前沒有改動，有朝一日你可能可以編寫類似li::marker {margin-right: 0.125em;}的規(guī)則，使標志與列表項內(nèi)容之間有適當?shù)木嚯x，而不用把標志放在內(nèi)容內(nèi)部。

新聞名稱：網(wǎng)頁設(shè)計中的列表設(shè)計
當前網(wǎng)址：http://www.rwnh.cn/news1/159451.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站維護、定制開發(fā)、網(wǎng)頁設(shè)計公司、企業(yè)網(wǎng)站制作、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)