使用CSS來設置標籤雲的樣式
標籤雲是一個項目列表的視覺描述。 您經常會在博客上看到標籤雲。 它被Flickr等網站廣泛使用。
標籤雲是一些鏈接列表,其大小和重量(有時也是顏色)會根據某些可衡量的屬性而發生變化。 大多數標籤雲都是基於流行度或使用特定標籤標記的頁面數量而構建的。 但是,您可以在網站上的任何項目列表中創建一個標籤雲,這些項目至少有兩種顯示方式。 例如:
- 按照字母順序排列的文章列表,其中包含指示文章受歡迎程度的樣式。
- 按照字母順序排列的網站列表,指明您最喜歡哪一個的樣式。
- 以價格順序列出的Web編輯列表,其中的樣式表明每種方式與預定義的標準集有多接近。
- 一系列表示朋友的風格,表示你的房子到他們的距離。
你需要建立一個標籤雲?
構建標籤雲很容易,您只需要兩件事:
- 項目列表(如Web文章,網站或您的朋友)
- 每個項目的測量值(例如每天的頁面瀏覽量,您的排名1-10,或到您家的距離)。
大多數標籤雲都是鏈接列表,所以如果每個項目都有與之關聯的網址,它會有所幫助。 但這不是創建視覺層次結構所必需的。
構建熱門鏈接標籤雲的步驟
我的網站每天都有獲得頁面瀏覽量的文章,這是我用來創建標籤雲的一個簡單指標。 因此,對於這個示例,我們將從2007年1月1日這一周的文章列表中創建一個標籤雲,這是我網站上前25篇文章。
- 確定您的層次結構中需要多少級別。
- 雖然您的雲中可能具有盡可能多的級別,但您的列表中有這些項目,但代碼繁瑣,而且差異可能非常小。 我建議您的層次結構中不要超過10個級別。
- 確定每個級別的分界點。
- 這可能就像每天將頁面視圖切割成1/10切片一樣簡單 - 即。 如果您網站上的最大頁面每天獲得100次頁面瀏覽量,則可以將其分為100+,90-100,80-90,70-80等。我以這種方式切斷了我的頁面瀏覽量。
- 以頁面瀏覽順序列出您的項目,並根據第2步給予他們排名
- 如果您在某些插槽中沒有任何項目,請不要擔心,這只會讓雲更有趣。
- 按字母順序排列你的列表(或者你想使用的任何第二類排序)。
- 這使云有趣。 如果您將它按等級排序,那麼它將只是一個列表,其中最大的項目在頂部到底部最小。
- 編寫您的HTML,以便排名是一個班級編號。 class =“tag4”>添加流式音頻文件
一旦你有每個單獨的列表項的HTML,以及你想要顯示它們的順序,那麼你需要做出決定。 你可以把鏈接放在一個段落中,你就完成了。 但是這不會被語義標記,任何沒有CSS的人都會看到一段很大的鏈接。 這種類型的列表的HTML將如下所示:
添加流式音頻文件 網站的基本標籤 最佳網頁設計軟件 為完全丟失建立網頁 色彩象徵 b> a> p> 相反,我建議您使用無序列表創建標籤雲。 這是幾行HTML和CSS代碼,但它確保無論誰來查看它,內容都是可讀的。 HTML看起來像這樣: 現在我們來看看有趣的部分 - CSS樣式。 在設計標籤雲時,通常會更改字體大小和字體重量。 您還可以更改字體或背景的顏色或任何其他樣式屬性,但尺寸和重量都是傳統的。 你需要10個樣式類,每個標籤等級一個: 我喜歡在雲本身中包含一些樣式:將雲文本居中,設置行高以便雲可讀,並確保錨標記沒有填充: 最後,如果您使用語義樣式化方法(即無序列表),則需要再添加兩行CSS,以便列表中沒有項目符號並且沒有縮進:
但標籤雲的風格在哪裡?