列表標(biāo)志位置

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

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

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ì)算值：根據(jù)指定確定

簡(jiǎn)寫列表樣式

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

list-style

值：[||||] inherit

初始值：相對(duì)于各個(gè)屬性。

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

繼承性：有

計(jì)算值：見單個(gè)屬性

例如：

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

list-style的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個(gè)值，其他的就會(huì)填入其默認(rèn)值。例如，以下兩個(gè)規(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é)果與圖上面所示相同，因?yàn)橐?guī)則li.norm隱含的list-style-type值disc會(huì)覆蓋先前聲明的square值，同樣地，li.odd規(guī)則中顯式聲明的值disc也會(huì)覆蓋先前聲明的square值。

列表布局

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

列表標(biāo)志定位

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

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

新聞名稱：網(wǎng)頁(yè)設(shè)計(jì)中的列表設(shè)計(jì)
當(dāng)前網(wǎng)址：http://jinyejixie.com/news1/159451.html

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

廣告

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