Use o CSS para o estilo dunha nube de etiquetas
A etiqueta da nube é unha representación visual dunha lista de elementos. Moitas veces verás nubes de etiquetas nos blogs. Fíxose popular por sitios como Flickr.
As nubes de etiquetas son unha lista de ligazóns que cambian de tamaño e peso (ás veces a cor tamén) dependendo dun atributo mensurable. A maioría das nubes de etiquetas son construídas en función da popularidade ou o número de páxinas etiquetadas con esa etiqueta en particular. Pero pode crear unha nube de etiquetas fóra de calquera lista de elementos no seu sitio que teña polo menos dúas formas de mostrar. Por exemplo:
- Unha lista de artigos en orde alfabética cos estilos que indican a popularidade dos artigos.
- Unha lista de sitios web en orde alfabética cos estilos que indican cales máis lles guste.
- Unha lista de editores web listados en orde de prezos cos estilos que indican o certo que cada un vén a un conxunto de criterios predefinidos.
- Unha lista de amigos cos estilos que indican a distancia da súa casa para os seus.
¿Que precisa para crear unha nube de etiquetas?
É fácil crear unha nube de etiquetas, só precisa dúas cousas:
- Unha lista de elementos (como artigos web, sitios web ou os teus amigos)
- Unha medida para cada un dos elementos (como as visualizacións de páxinas por día, a súa clasificación de 1-10 ou a distancia para a súa casa).
A maioría das nubes de etiquetas son listas de ligazóns, polo que axuda se cada elemento ten unha URL asociada. Pero iso non é necesario para crear unha xerarquía visual.
Pasos para crear unha etiqueta Cloud de enlaces populares
O meu sitio ten artigos que obteñen visualizacións de páxina todos os días, e esta é unha métrica sinxela para que poida usar para crear unha nube de etiquetas. Entón, para este exemplo, crearemos unha nube de etiquetas nunha lista de artigos, os 25 mellores artigos do meu sitio para a semana do 1 de xaneiro de 2007.
- Determine cantos niveis desexa na súa xerarquía.
- Aínda que é posible ter tantos niveis na túa nube como tes elementos na túa lista, isto fica tedioso ao código e as diferenzas poden ser moi mínimas. Recoméndolles non ter máis de 10 niveis na túa xerarquía.
- Decide sobre os puntos de corte de cada nivel.
- Podería ser tan sinxelo como cortar as visualizacións de páxina por día en 1/10 porcións, é dicir. se a páxina máis grande do teu sitio obteña 100 páxinas vistas por día, podías cortalo como 100 +, 90-100, 80-90, 70-80, etc. Eu cortei as miñas vistas de páxina desa forma.
- Lista os elementos na orde de visualización de páxina e dálles un rango segundo o paso 2
- Non te preocupes se non tes ningún elemento nalgúns slots, iso só fai que a nube sexa máis interesante.
- Completa a túa lista en orde alfabética (ou o segundo tipo que queiras usar).
- Isto é o que fai interesante a nube. Se o deixas ordenado por rango, só será unha lista cos elementos máis grandes de arriba abaixo ata o máis pequeno na parte inferior.
- Escribe o teu HTML para que o rango sexa un número de clase. class = "tag4"> Engadir transmisión de arquivos de audio
Unha vez que teña o HTML para cada elemento da lista individual e a orde que quere amosar, entón necesitará tomar unha decisión. Podes poñer as ligazóns nun parágrafo e farías. Pero isto non se marcaría semánticamente, e calquera que non teña acceso a CSS na súa nube de etiquetas vería un gran número de enlaces. O HTML para este tipo de lista sería así:
Engadido de transmisión de arquivos de audio Etiquetas básicas para un sitio web Mellor software de deseño web Construíndo unha páxina web para o totalmente perdido Symbolism de cor No seu canto, recoméndoche que crees a túa nube de etiquetas usando unha lista desordenada. É unhas liñas máis de código HTML e CSS, pero asegura que o contido será lexíbel sen importar quen vexa velo. O HTML sería así: Agora chegamos á parte divertida: os estilos CSS. Cando vostede estilo unha nube de etiquetas, normalmente cambia o tamaño da fonte eo peso da fonte. Tamén pode cambiar a cor da fonte ou o fondo ou calquera outro atributo de estilo, pero o tamaño e o peso son tradicionais. Necesitas 10 clases de estilo, unha para cada rango de etiquetas: Gustaríame incluír algúns estilos en torno á propia nube: centrar o texto na nube, establecer unha altura de liña para que a nube sexa lexible e asegúrese de que as etiquetas de ancora non teñan padding nelas: Finalmente, se está a usar o método de estilo semántico (por exemplo, a lista desordenada), terá que engadir dúas liñas de CSS para que a lista non teña balas e non está sangrada:
Pero onde están os estilos para a nube de etiquetas