使用HTML和CSS實(shí)現(xiàn)的標(biāo)簽云效果

1、使用html和css實(shí)現(xiàn)的標(biāo)簽云效果標(biāo)簽云的效果在博客和網(wǎng)站上不難見到，它其實(shí)就是帶有超鏈接的某些關(guān)鍵字，為了達(dá)到強(qiáng)調(diào)主題的作用。通常浮現(xiàn)概率比較大或者受歡迎的標(biāo)簽文字顯示比較大，相反的就顯示的小。我們就不去深化討論標(biāo)簽云帶來的效率上的提升和可用性的詳情，僅僅在外觀上帶來的美感和對全站或一整篇文章所起到的高度概括的作用就不容忽略了。接下來，我們將研究如何用html和css來創(chuàng)建標(biāo)簽云效果。注重，我們僅僅研究如何實(shí)現(xiàn)這種ui效果而不去深究標(biāo)簽的權(quán)重或受歡迎程度是怎么算出來的。前面說了，標(biāo)簽云就是一個銜接列表。所以從語義化的視角，用法無序列表來表達(dá)每個標(biāo)簽是合理的，不用考慮按歡迎程度去羅列，否則就

2、毫無意義了。在每個列表項(xiàng)里包含一個超鏈接標(biāo)簽，所以大體結(jié)構(gòu)就是下面的樣子：每個標(biāo)簽的權(quán)重要提前算好，然后把它加到 上或者 上，我們就暫且把它加到鏈接上。權(quán)重大的標(biāo)簽對應(yīng)顯示的文字也大，代表了它的受歡迎程度大。注重：這里的data-weight是通過data-count和data-total計算而來的，這里沒方法挺直通過兩個屬性計算表示，所以我們把目標(biāo)聚焦在data-weight這樣一個屬性上。這樣基礎(chǔ)的html結(jié)構(gòu)代碼就寫好了，只要稍加一些屬性就完善了。class：有助于在添加樣式的時候確定是哪個標(biāo)簽云role：這個是一個導(dǎo)航組件，在屏幕閱讀器上標(biāo)識和輔助作用aria-label：給輔助功能添

3、加標(biāo)題和描述注重：假如列表位于 標(biāo)簽內(nèi)，就不需要添加 ，可以用法aria-labelledby代替導(dǎo)航標(biāo)簽來指向?qū)Ш綐?biāo)題。讓我們來完美一下列表數(shù)據(jù)，添加一些和開發(fā)相關(guān)的名詞作為標(biāo)簽，這樣看起來更貼近實(shí)際一點(diǎn)。下面是標(biāo)簽云現(xiàn)在看起來的效果：這是還沒有添加任何樣式的結(jié)果，然后給它添加一些樣式以下是我們要通過添加樣式解決的：讓標(biāo)簽以行內(nèi)元素顯示讓每個標(biāo)簽的font-size屬性按照 大小顯示在標(biāo)簽的右邊加上權(quán)重讓標(biāo)簽的色彩隨機(jī)顯示給標(biāo)簽添加：hover和：focus動態(tài)樣式首先移除列表前面的小圓點(diǎn)和縮進(jìn)然后設(shè)置 以flexbox顯示，并且水平垂直居中保證全部的標(biāo)簽元素在一行或者多行內(nèi)顯示添加上行高互

4、相之間保持一定的垂直距離，終于的ul元素的樣式如下：然而這個時候標(biāo)簽云看起來還差無數(shù)讓我們開頭給標(biāo)簽一些小的變幻通過上面的樣式，全部的標(biāo)簽變成淡紅色并且設(shè)置1.5rem大小然而我們的要求是字體大小按照 而來的，怎么實(shí)現(xiàn)呢？web標(biāo)準(zhǔn)有一種方式是css可以通過 辦法讀取html的data屬性值，所以我們可以通過以下方式讀取不幸的是，目前任何掃瞄器均不支持該表示法和功能。相反，attr（）將僅返回一個字符串，并且只能在content屬性中用法。假如web標(biāo)準(zhǔn)支持這種做法，那好辦，我們可以挺直讀取屬性權(quán)重的數(shù)據(jù)，將它們保存到css變量中，并挺直對其舉行操作，如下所示：但是這樣不可，我們只能通過css

5、規(guī)章，屬性挑選器：data-attribute為了避開將字體大小挺直設(shè)置成權(quán)重導(dǎo)致太大，因此通過一定的辦法計算，結(jié)果顯示如下：現(xiàn)在看來已經(jīng)小有成就。我們頻繁的標(biāo)簽云效果在標(biāo)簽的旁邊都有權(quán)重顯示，權(quán)重已經(jīng)有了，我們要將它展示在偽元素 的content中然后還需要給 元素增強(qiáng) 屬性挑選器，將它的值設(shè)為true或者false來控制標(biāo)簽后面的數(shù)字權(quán)重是否顯示注重： 屬性挑選器的值為布爾值，即使你設(shè)置為false，它也會顯示，假如不讓它顯示，就移除該屬性這是顯示數(shù)字權(quán)重的效果下面的案例中將不顯示標(biāo)簽旁邊的數(shù)字全部的標(biāo)簽一個色彩看起來很沉悶，我們將嘗試用兩種不同的辦法來為它添加不同的色彩。用法隨機(jī)生成的色

6、彩在css中沒有隨機(jī)數(shù)這么一說（雖然可以模擬出來）。我們將要做的是按照標(biāo)簽的序列號來給它定義不同的色彩，辦法如下：通過這種方式我們給它添加了綠色，藍(lán)色和紫色代替了之前的淡紅色，雖然也不是徹低隨機(jī)（有一定的邏輯在），但是用戶很難發(fā)覺。用法同一種色彩的不同透亮度值我們通過增強(qiáng)標(biāo)簽對照度來達(dá)到強(qiáng)調(diào)受歡迎程度的效果，在淺色背景下，用法深色越發(fā)顯然。hsl格式的色彩值可以實(shí)現(xiàn)，但是我們采納最快的方式，挺直對標(biāo)簽設(shè)置透亮度，透亮度的值按照權(quán)重值計算而來：看下變幻后的效果當(dāng)我們觸摸標(biāo)簽的時候 樣式會比較重要，尤其對于殘障人士在可拜訪性方面。我們將給 添加和標(biāo)簽字體色彩全都的邊框在這里我們是通過鼠標(biāo)點(diǎn)擊大事去模擬的為了增強(qiáng)交互性，我們?yōu)樗砑右粋€容易的動畫：當(dāng)用戶將鼠標(biāo)移動或者懸停在一個標(biāo)簽上時，標(biāo)簽的背景色變換并且有一個水平綻開的效果。由于它是取決于狀態(tài)的動畫，所以我們將用法transition而不是animation動畫。實(shí)現(xiàn)方式是通過 標(biāo)簽的偽元素：before的寬度值變幻，在focus和hover狀態(tài)