Apuntes Web
ApuntesWeb.net > Diseño Web >
Imágenes CSS >

Imágen como viñetas listas CSS

15/10/09

CSS proporciona una variedad de estilos de viñetas simples, pero tambien ofrece la alternativa de colocar una imágen en lugar de las viñetas clásicas siendo estás últimas más atractivas visualmente, el procedimiento para añadir una viñeta es el siguiente:

Ejemplo:

veamos un ejemplo sencillo para reemplazar las viñetas por defecto por imágenes como viñeta:

Código CSS:
ul.vineta1 {list-style-image: url("flecha.gif"); }
Donde:
Creamos un selector de clase llamado ".vineta1", La propiedad list-style-image hace referencia a una imágen llamada 'flecha.gif'
Código HTML:
Agregaremos el atributo class="vineta1" a la lista o listas que tendra una imagen como viñeta:
<body>
<ul class="vineta1">
<li>Esta lista tendra una imágen como viñeta </li>
</ul>
</body>
Descargar Ejemplo: Imágen como viñeta CSS
Artículos Relacionados:
Categorías Principales CSS:

DISEÑO WEB CSS

Maquetación CSS

Maquetación con CSS, HTML flotar bloques, layout o cajas. Diseño web estandar, colores CSS, ancho, alto.

Ver más »

Imágenes y CSS

Códigos CSS para imágenes, casos prácticos, ejemplos.

Ver más »

Tipografía, texto CSS

Volumen de letras, fuentes, tipografía, interlineado, tamaño de texto, subrayado, efectos de texto:

Ver más »

Menus, enlaces con CSS

Aprenderemos a estructurar y diseñar todo tipo de menus con CSS mediante ejemplos y casos prácticos.

CSS, HTML, XHTML, Recursos y mucho más, Prohibida su reproducción total o parcial.
© 2009 - 2012 ApuntesWeb.net