網(wǎng)頁(yè)設計中的計數器和作用域

  • 2019-06-03 14:19:08
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

至此,我們已經(jīng)了解了如何在網(wǎng)站建設時(shí)把多個(gè)計數器串在一起創(chuàng )建一種多級計數。創(chuàng )作人員通常還需要對嵌套有序列表這么處理,不過(guò)為了達到很深的嵌套層次,需要創(chuàng )建足夠多的計數器,這種做法很快會(huì )變得相當笨拙。僅僅是建立5層嵌套列表就需要一大堆的規則,如下:

ol ol ol ol ol li:before {counter-increment: ordl ord2 ord3 ord4 ord5;content: counter(ordl)""" counter(ord2)"." counter(ord3) counter(ord4) counter(ord5)".";}

想想看,要建立50層嵌套需要寫(xiě)多少規則?。ㄟ@并不是說(shuō)你應當建立50層的嵌套有序列表,即不表示這是合理的,而只是暫且舉個(gè)例子。)

好在CSS2.x描述了計數器的作用域(scope)概念。簡(jiǎn)單地說(shuō),每層嵌套都會(huì )為給定計數器創(chuàng )建一個(gè)新的作用域。正是因為有作用域,以下規則才能以常規HTML方式實(shí)現嵌套表計數:

ol {counter-reset: ordered;}

ol li:before {counter-increment: ordered; content: counter(ordered)".";}

這些規則會(huì )使有序列表(甚至嵌套在其他列表中的有序列表)從1開(kāi)始計數,并且逐項增1,這正是HTML—直以來(lái)的做法。

之所以能做到這一點(diǎn),是因為毎層嵌套都為計數器ordered創(chuàng )建了一個(gè)新實(shí)例。所以,在網(wǎng)頁(yè)設計時(shí),對于第一個(gè)有序列表,會(huì )創(chuàng )建ordered的一個(gè)實(shí)例。然后,對于嵌套在第一個(gè)列表中的各個(gè)列表,又會(huì )創(chuàng )建另一個(gè)新實(shí)例,因此對于每個(gè)列表計數總是從頭開(kāi)始。

不過(guò),如果你希望有序列表這樣計數,使毎層嵌套都創(chuàng )建一個(gè)新計數器追加到老計數器上,如:1、1.1、1.2, 1.2.1. 1.2.2、1.3. 2、2.1 等。利用counter()是辦不到的,不過(guò)可以用counters ()實(shí)現。這里的區別就在于一個(gè)“s”(counters ()而不是counter())。

基本說(shuō)來(lái),關(guān)鍵字counters (ordered,會(huì )顯示各作用域的ordered計數器,并追加一個(gè)點(diǎn)號,然后把對應一個(gè)給定元素的所有作用域計數器串起來(lái)。因此,一個(gè)3層嵌套列表中的列表項就會(huì )有這樣的前綴:最外層列表作用域的ordered值、中間層列表作用域的ordered值(中間層列表是最外層列表和當前列表之間的列表),以及當前列表作用域的ordered值,各個(gè)ordered值后面都有一個(gè)點(diǎn)號。content值的余下部分("-")會(huì )在所有這些計數器后面增加一個(gè)空格、一個(gè)連字號以及另一個(gè)空格。

與counter()類(lèi)似,可以為嵌套計數器定義一個(gè)列表樣式,不過(guò)所有計數器都應用同樣的樣式。

小結

盡管列表樣式?jīng)]有我們希望得那么復雜,而且瀏覽器對生成內容的支持還有些欠缺(至少在寫(xiě)作本書(shū)的時(shí)候是這樣),不過(guò)能夠對列表應用樣式還是很有用的。一個(gè)常見(jiàn)的用途是取一個(gè)鏈接列表,去除其標志和縮進(jìn)來(lái)創(chuàng )建一個(gè)導航邊欄。一方面要保證簡(jiǎn)單的標記,另一方面要得到靈活的布局,這很難做到。CSS3在列表樣式方面預期有一些改進(jìn),基于此,我們期待列表將來(lái)變得越來(lái)越有用。

至于目前,如果一個(gè)標記語(yǔ)言本身沒(méi)有固有的列表元素,生成內容會(huì )有很大幫助,例如,可以插入圖標之類(lèi)的內容指向某種類(lèi)型的鏈接(PDF文件、Word文檔,甚至另一個(gè)網(wǎng)站的鏈接)。利用生成內容,還能很容易地打印鏈接URL,由于生成內容能插入引號并完成格式化,這對于網(wǎng)頁(yè)設計中的排版非常有利,可以得到很好的效果。完全可以這么說(shuō):生成內容的用途只受你想象力的限制,只要想得到,生成內容就能做得到。更好的一點(diǎn)是,利用計數器現在還可以向任何元素(而不只是列表)關(guān)聯(lián)序數信惠,如標題或代碼塊。如果你還希望利用設計支持用戶(hù)界面方面的一些新特性,棋仿用戶(hù)搡作系統的外觀(guān),那么請繼續讀下去。


當前文章標題:網(wǎng)頁(yè)設計中的計數器和作用域

當前URL:http://amzcoolest.com/news/wzzz/3037.html

上一篇:網(wǎng)頁(yè)設計中的重置和遞增

下一篇:網(wǎng)頁(yè)設計中的系統字體和顏色

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看