標籤雲

在廣闊的網頁設計世界中，資料通常需要的不僅僅是清單來吸引使用者的注意。標籤雲是一種富有創意且視覺效果令人驚嘆的解決方案，可將關鍵字集轉換為動態且引人入勝的組合。無論您是在開發部落格、作品集或內容平台，掌握創建標籤雲的技術都可以顯著提升網站的視覺體驗。

在本教學中，我們將深入研究僅使用 HTML 和 CSS 設計標籤雲的藝術。您將學習如何建立互動式元件，這些元件不僅可以組織訊息，還可以為您的介面添加一層設計和參與度。從基本結構到複雜的懸停效果，我們將逐步指導您建立功能齊全且視覺效果令人驚嘆的標籤雲。

你會學到什麼？

• 標籤雲的 HTML 結構
• CSS 樣式技術
• 響應式設計
• 互動效果
• 網頁設計最佳實務

準備好將簡單的數據轉化為獨特的視覺體驗了嗎？讓我們開始吧！

標籤雲是一種視覺上有趣的方式來顯示關鍵字或主題集。在本教學中，您將學習如何僅使用 HTML 和 CSS 建立動態且豐富多彩的標籤雲。

介紹

標籤雲是資料的視覺化表示，其中標籤的大小和顏色可以顯示其重要性或頻率。在我們的例子中，我們將利用尺寸和顏色來創造有吸引力的設計。

先決條件

• HTML 基礎
• CSS基礎
• 程式碼編輯器（VS Code、Sublime Text 等）

HTML結構

我們將從標籤雲的簡單 HTML 結構開始：

    <div>



<h2>
  
  
  Estilos CSS
</h2>

<p>Aquí es donde la magia sucede. Usaremos flexbox para el diseño y clases para los colores y tamaños:<br>
</p>

<pre class="brush:php;toolbar:false">    .tag-cloud {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .tag {
        text-decoration: none;
        color: white;
        padding: 6px 12px;
        border-radius: 20px;
        transition: all 0.3s ease;
        align-content: center;
    }

    /* Tamaños de etiquetas */
    .tag-small { font-size: 0.7rem; }
    .tag-medium { font-size: 0.9rem; }
    .tag-large { font-size: 1.1rem; }

    /* Colores de etiquetas */
    .tag-1 { background-color: #3498db; } /* Azul brillante */
    .tag-2 { background-color: #2ecc71; } /* Verde esmeralda */
    .tag-3 { background-color: #e74c3c; } /* Rojo coral */

附加效果

我們可以加入懸停效果來提高互動性：

    .tag:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

最佳實踐

1. 反應能力：使用flex-wrap來適應不同的螢幕尺寸
2. 輔助功能：保持顏色有足夠的對比
3. 效能：使用 CSS 過渡而不是繁重的動畫 ## 完整範例

這是一個完整的範例，您可以複製和修改：

 
    
    
        
        <title>Nube de Etiquetas Colorida</title>
        
            .tag-cloud {
                顯示：柔性；
                彈性包裹：包裹；
                調整內容：居中；
                間隙：10px；
                最大寬度：700px；
                保證金：0 自動；
                內邊距：20px；
                字體系列：Arial、無襯線字體；
            }

            。標籤 {
                文字裝飾：無；
                顏色: 白色;
                內邊距：6 像素 12 像素；
                邊框半徑：20px；
                過渡：全部 0.3s 緩和；
                盒子陰影：0 2px 5px rgba(0,0,0,0.2);
                文字轉換：大寫；
                字體粗細：粗體；
                字母間距：0.5px；
                對齊內容：居中；
            }

            .tag:懸停{
                變換：縮放（1.1）；
                盒子陰影：0 4px 8px rgba(0,0,0,0.3);
            }

            /* 調色盤 */
            .tag-1 { 背景顏色：#3498db; } /* 明亮的藍色 */
            .tag-2 { 背景顏色：#2ecc71; } /* 佛得角埃斯梅拉達 */
            .tag-3 { 背景顏色：#e74c3c; } /* 紅珊瑚 */
            .tag-4 { 背景顏色：#f39c12; } /* 納蘭賈 */
            .tag-5 { 背景顏色：#9b59b6; } /* 紫斑 */
            .tag-6 { 背景顏色：#1abc9c; } /* 綠松石 */
            .tag-7 { 背景顏色：#34495e; } /* 藍色馬裡諾 */
            .tag-8 { 背景顏色：#d35400; } /* 納蘭賈·奧斯庫羅 */
            .tag-9 { 背景顏色：#2980b9; } /* 蔚藍海洋 */
            .tag-10 { 背景顏色：#8e44ad; } /* 莫拉多 */

            .tag-small { 字體大小：0.7rem; }
            .tag-medium { 字體大小：0.9rem; }
            .tag-large { 字體大小：1.1rem; }
            .tag-xlarge { 字體大小：1.3rem; }
        風格>
    頭>
    
        <div>



<h2>
  
  
  結論
</h2>

<p>使用 HTML 和 CSS 建立相關禮儀。 Lo importante es jugar con tamaños, colores y transiciones para hacer tu diseño único.</p>

<h3>
  
  
  雷托·帕拉·萊克托
</h3>

<p>意圖：</p>

<ul>
<li>Añadir más etiquetas</li>
<li>不同顏色組合的實驗</li>
<li>懸停時產生的創意效果</li>
</ul>

<h2>
  
  
  附加遞迴
</h2>

<ul>
<li>MDN 網路文件 - Flexbox</li>
<li>CSS 技巧：Flexbox 完整指南</li>
</ul>

<p><strong>¡ Feliz codificación！ </strong><br>
<iframe height="600" src="https://codepen.io/draexx/embed/QwLdWqx?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>


          </div>

            
        

以上是標籤雲的詳細內容。更多資訊請關注PHP中文網其他相關文章！