網(wǎng)頁設(shè)計中的列表設(shè)計

  • 2019-05-27 17:14:10
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

列表標(biāo)志位置

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

如果標(biāo)志的位置設(shè)置為outside(默認(rèn)值),則顯示與一般Web上列表項的顯示無二。不過,在網(wǎng)頁設(shè)計時,如果你需要一個稍微不同的外觀,可以把這個值設(shè)置為inside,將標(biāo)志拉向內(nèi)容,這會使標(biāo)志放在列表項的內(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

值:[<list-stylc-type>||<list-style-image>||<list-style-position>] inherit

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

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

繼承性:有

計算值:見單個屬性

例如:

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

list-style的值可以按任何順序列出,而且這些值都可以忽略。只要提供了一個值,其他的就會填入其默認(rèn)值。例如,以下兩個規(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)用列表標(biāo)志樣式的基本知識,下面來考慮不同瀏覽器中列表如何布局。

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

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

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

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

類似于列表項,列表元素也是一個塊框,其中包含所有后代元素。不過,可以看到,標(biāo)志不僅放在列表項內(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)邊距和外邊距,以確??鐬g覽器兼容性。

如果想用外邊距,可以寫作:

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

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

列表標(biāo)志定位

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

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

當(dāng)前文章標(biāo)題:網(wǎng)頁設(shè)計中的列表設(shè)計

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3031.html

上一篇:網(wǎng)頁設(shè)計中的列表類型

下一篇:網(wǎng)頁設(shè)計中的生成內(nèi)容

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)