如何樣式標籤雲

使用CSS來設置標籤雲的樣式

標籤雲是一個項目列表的視覺描述。 您經常會在博客上看到標籤雲。 它被Flickr等網站廣泛使用。

標籤雲是一些鏈接列表,其大小和重量(有時也是顏色)會根據某些可衡量的屬性而發生變化。 大多數標籤雲都是基於流行度或使用特定標籤標記的頁面數量而構建的。 但是,您可以在網站上的任何項目列表中創建一個標籤雲,這些項目至少有兩種顯示方式。 例如:

你需要建立一個標籤雲?

構建標籤雲很容易,您只需要兩件事:

大多數標籤雲都是鏈接列表,所以如果每個項目都有與之關聯的網址,它會有所幫助。 但這不是創建視覺層次結構所必需的。

構建熱門鏈接標籤雲的步驟

我的網站每天都有獲得頁面瀏覽量的文章,這是我用來創建標籤雲的一個簡單指標。 因此,對於這個示例,我們將從2007年1月1日這一周的文章列表中創建一個標籤雲,這是我網站上前25篇文章。

  1. 確定您的層次結構中需要多少級別。
    1. 雖然您的雲中可能具有盡可能多的級別,但您的列表中有這些項目,但代碼繁瑣,而且差異可能非常小。 我建議您的層次結構中不要超過10個級別。
  2. 確定每個級別的分界點。
    1. 這可能就像每天將頁面視圖切割成1/10切片一樣簡單 - 即。 如果您網站上的最大頁面每天獲得100次頁面瀏覽量,則可以將其分為100+,90-100,80-90,70-80等。我以這種方式切斷了我的頁面瀏覽量。
  3. 以頁面瀏覽順序列出您的項目,並根據第2步給予他們排名
    1. 如果您在某些插槽中沒有任何項目,請不要擔心,這只會讓雲更有趣。
  4. 按字母順序排列你的列表(或者你想使用的任何第二類排序)。
    1. 這使云有趣。 如果您將它按等級排序,那麼它將只是一個列表,其中最大的項目在頂部到底部最小。
  5. 編寫您的HTML,以便排名是一個班級編號。 class =“tag4”>添加流式音頻文件

一旦你有每個單獨的列表項的HTML,以及你想要顯示它們的順序,那麼你需要做出決定。 你可以把鏈接放在一個段落中,你就完成了。 但是這不會被語義標記,任何沒有CSS的人都會看到一段很大的鏈接。 這種類型的列表的HTML將如下所示:

添加流式音頻文件 網站的基本標籤 最佳網頁設計軟件 為完全丟失建立網頁 色彩象徵 a>

相反,我建議您使用無序列表創建標籤雲。 這是幾行HTML和CSS代碼,但它確保無論誰來查看它,內容都是可讀的。 HTML看起來像這樣: