網頁設計中的列表類型

在網頁設計中，網站建設布局領域，列表是很有意思的一個方面。列表中的項其實就是塊框，不過比起平常稍微多了一點，多出的這部分不屬于文檔布局，而只是“掛”在一邊。對于一個有序列表，額外的這部分包含一系列遞增的數字（或字母），這些數字（或字母）由用戶代理計算，并且主要由用戶代理格式化，而不是由創作人員完成。按文檔結構的“指示”，用戶代理會生成這些數字并提供基本表示。

這種內容生成在CSS1中是無法描述的，所以CSS1也無法控制，不過CSS2引入了一些特性，可以描述這種列表項編號，因此，現在css允許創作人員定義自己的計數模式和格式，而且可以將這些計數器與任何元素關聯，而不只是有序列表。另外，利用這種基本機制還有可能向文檔中插入其他類型的內容，包括文本串。屬性值，甚至外部資源。所以，完全可以使用css在設計中插入鏈接圖標、編輯符號等，而不必創建額外的標記。

要了解所有這些列表選項在網頁設計中如何加以利用，先來討論基本的列表樣式，然后再討論內容和計數器的生成。

列表

從某種意義上講，不是描述性文本的任何內容都可以認為是列表。人口普査、太陽系，家譜、餐館菜單，甚至你的所有朋友都可以表示為一個列表或者是列表的列表。由于形式如此多樣，這使得列表相當重要，所以說，網站建設中列表樣式不太豐富確實是一大憾事。

要影響一個列表的樣式，最簡單（同時支持最充分）的辦法就是改變其標志類型。例如，在一個無序列表中，列表項的標志（marker）是出現在各列表項旁邊的圓點。在有序列表中，標志可能是一個字母、數字或另外某種計數體系中的一個符號。甚至可以將標志替換為圖像。所有這些都可以使用不同的列表樣式屬性完成。

列表類型

要修改用于列表項的標志類型，可以使用屬性list-style-type。

list-style-type

CSS2.1 值：

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit

CSS2 值：

disc | circle | square | decimal | decimal-leading-zero | upper-alpha Ilower-alpha | upper-roman | lower- roinan | lower-greek | hebrew | armenian | georgian | Gjk-ideographic | hiragana | katakana | hiragana-iroha | none | inherit

初始值：

disc

應用于：

display 值為list-item的元素

繼承性：有

計算值：根據指定確定

沒錯，這里的關鍵字確實不少，其中一些在CSS2中引入，但是在CSS2.1中已經去除。

list-style-type屬性（以及所有其他與列表相關的屬性）只能應用于display值為list-item的元素，不過CSS無法區別有序列表項和無序列表項。因此，完全可以設置一個有序列表使用實心圓而非數字作為列表項標志。實際上，list-style-type的默認值就是disc，所以可以得出結論，如果沒有顯式地聲明其他列表類型，所有列表（有序或無序）對各列表項都會使用實心圓作為標志。這是合理的，不過最終要由用戶代理來決定。盡管用戶代理沒有預定的規則，如{list-style-type: decimal;}，但它可能會禁止對無序列表使用有序標志，反之亦然。不過不能依賴于此，所以一定要當心。

對于hebrew和georgian等CSS2值，CSS2規范并沒有明確地指出這些計數體系如何工作，也沒有說明用戶代理應當如何處理。這種不確定性導致這些值在網站建設時未能廣泛實現。

如果想完全禁止顯示標志，只能使用值none。none會導致用戶代理在原本放標志的位置上不顯示任何內容，不過它不會中斷有序列表中的計數。

當前題目：網頁設計中的列表類型
文章轉載：http://m.kartarina.com/news14/171514.html

成都網站建設公司_創新互聯，為您提供響應式網站、全網營銷推廣、靜態網站、用戶體驗、網站排名、關鍵詞優化

廣告

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