Cara Gaya Awan Tag

Gunakan CSS untuk Gaya Tag Cloud

awan tag adalah gambaran visual senarai item. Anda sering akan melihat awan tag pada blog. Ia dibuat popular oleh laman-laman seperti Flickr.

Awan tag ialah senarai pautan yang berubah dalam saiz dan berat (kadang-kadang warna juga) bergantung kepada beberapa atribut yang boleh diukur. Kebanyakan awan tag dibina berdasarkan populariti atau bilangan halaman yang ditandakan dengan teg tersebut. Tetapi anda boleh membuat tag awan daripada mana-mana senarai item di laman web anda yang mempunyai sekurang-kurangnya dua cara memaparkannya. Sebagai contoh:

• Senarai artikel dalam susunan abjad dengan gaya yang menunjukkan populariti artikel.
• Senarai laman-laman web dalam susunan abjad dengan gaya yang menunjukkan mana yang anda suka yang terbaik.
• Senarai editor web yang disenaraikan dalam susunan harga dengan gaya yang menunjukkan sejauh mana jaraknya masing-masing datang kepada kriteria yang ditetapkan sebelumnya.
• Senarai rakan dengan gaya yang menunjukkan jarak dari rumah anda kepada mereka.

Apa yang Anda Perlu Membina Tag Cloud?

Ia mudah untuk membina awan tag, anda hanya memerlukan dua perkara:

• Senarai item (seperti artikel Web, laman web, atau rakan anda)
• Pengukuran untuk setiap item (seperti halaman paparan setiap hari, peringkat anda 1-10, atau jarak ke rumah anda).

Kebanyakan awan tag adalah senarai pautan, jadi ia membantu jika setiap item mempunyai URL yang dikaitkan dengannya. Tetapi itu tidak diperlukan untuk mencipta hierarki visual.

Langkah-langkah untuk Membina Tag Awan Pautan Popular

Tapak saya mempunyai artikel yang mendapat paparan halaman setiap hari, dan ini adalah metrik yang mudah untuk saya gunakan untuk membuat awan tag. Jadi untuk contoh ini, kami akan membuat awan tag dari senarai artikel, 25 artikel teratas di laman web saya untuk minggu 1 Januari 2007.

1. Tentukan berapa tahap yang anda mahu dalam hierarki anda.
   1. Walaupun mungkin untuk mempunyai banyak peringkat dalam awan anda kerana anda mempunyai item dalam senarai anda, ini menjadi membosankan untuk kod, dan perbezaannya boleh sangat minima. Saya cadangkan tidak mempunyai lebih daripada 10 tahap dalam hierarki anda.
2. Tentukan titik terputus bagi setiap peringkat.
   1. Ia mungkin semudah memotong paparan halaman anda setiap hari menjadi 1/10 keping - iaitu. jika halaman terbesar di laman web anda mendapat 100 muka surat halaman sehari, anda boleh mengetikannya sebagai 100+, 90-100, 80-90, 70-80, dan lain-lain. Saya memotong pandangan halaman saya dengan cara itu.
3. Senaraikan item anda dalam susunan paparan halaman, dan beri mereka pangkat berdasarkan langkah 2
   1. Jangan risau jika anda tidak mempunyai item dalam beberapa slot, yang menjadikan awan lebih menarik.
4. Tempatkan senarai anda mengikut urutan abjad (atau jenis apa sahaja yang anda mahu gunakan).
   1. Inilah yang menjadikan awan menarik. Jika anda meninggalkannya disusun mengikut pangkat, maka ia hanya akan menjadi senarai dengan item terbesar di bahagian atas ke bawah hingga terkecil di bahagian bawah.
5. Tulis HTML anda supaya pangkatnya adalah nombor kelas. class = "tag4"> Menambah Fail Audio Streaming

Sebaik sahaja anda mempunyai HTML untuk setiap item senarai individu, dan pesanan yang anda mahu paparkan, anda perlu membuat keputusan. Anda boleh meletakkan pautan dalam perenggan dan anda akan selesai. Tetapi ini tidak semestinya ditandai, dan sesiapa tanpa CSS yang datang ke awan tag anda akan melihat perenggan besar pautan. HTML untuk jenis senarai ini akan kelihatan seperti ini:

Menambah Fail Audio Streaming Tags asas untuk laman web Perisian Reka Bentuk Perisian Terbaik Membina Laman Web untuk Hilang Terasa Simbolisme Warna

Sebaliknya, saya cadangkan anda membuat awan tag anda menggunakan senarai yang tidak disusun. Ia adalah beberapa baris HTML dan kod CSS tetapi ia memastikan bahawa kandungan itu boleh dibaca tidak kira siapa yang datang untuk melihatnya. HTML akan kelihatan seperti ini:

• Menambah Fail Audio Streaming
• Tags asas untuk laman web
• Perisian Reka Bentuk Web Terbaik
• Membina Laman Web untuk Hilang Tepat
• Simbolisme Warna

  Tetapi Di Mana Adakah Gaya untuk Tag Cloud

  Sekarang kita dapat ke bahagian yang menyenangkan-gaya CSS. Apabila anda menyusun awan tag, anda biasanya menukar saiz fon dan berat font. Anda juga boleh menukar warna font atau latar belakang atau atribut gaya lain, tetapi saiz dan berat adalah tradisional.

  Anda memerlukan 10 kelas gaya, satu untuk setiap pangkat tag:

  #cloud a.tag1 {font-size: 0.7em; font-weight: 100; } #cloud a.tag2 {font-size: 0.8em; font-weight: 200; } #cloud a.tag3 {font-size: 0.9em; font-weight: 300; } #cloud a.tag4 {font-size: 1.0em; font-weight: 400; } #cloud a.tag5 {font-size: 1.2em; font-weight: 500; } #cloud a.tag6 {font-size: 1.4em; font-weight: 600; } #cloud a.tag7 {font-size: 1.6em; font-weight: 700; } #cloud a.tag8 {font-size: 1.8em; font-weight: 800; } #cloud a.tag9 {font-size: 2.2em; font-weight: 900; } #cloud a.tag10 {font-size: 2.5em; font-weight: 900; }

  Saya suka memasukkan beberapa gaya di sekitar awan itu sendiri: pusat teks awan, tetapkan ketinggian baris supaya awan boleh dibaca, dan pastikan bahawa teg anchor tidak mempunyai padding padanya:

  #cloud {padding: 2px; garis ketinggian: 3em; teks-align: center; } #cloud a {padding: 0px; }

  Akhirnya, jika anda menggunakan kaedah gaya semantik (iaitu senarai yang tidak disusun), anda perlu menambah dua lagi baris CSS supaya senarai itu tidak mempunyai peluru dan tidak diindikasikan:

  #cloud {margin: 0; } #cloud li {display: inline; }