ubiquitour.com

¿Código de la viñeta de imagen en archivos CSS?

Mientras que la propiedad "tipo de estilo de lista" en el código de la hoja de estilos en cascada (CSS) te da algunas opciones de estilo de la bala, a veces diseños Web requieren balas basado en la imagen personalizada. El mejor método de establecer una imagen como una bala para tus listas de bala--también conocido como "desordenadas listas" en HTML, consiste en utilizar como imagen de fondo. Tan en cada elemento de la lista y luego añadir relleno para colocar el texto al lado de la imagen. Esto funciona bien en todos los navegadores y permite mejor control sobre la posición de la bala.

Instrucciones

1 Utilice un editor de código, si ya tienes uno instalado. De lo contrario, vaya a "Inicio". Escriba "Notepad" en el cuadro de búsqueda. Vaya a "Archivo" del menú superior y abrir el archivo CSS.

2 Agregue el código siguiente en la parte inferior del archivo CSS:

UL {}

lista estilo: ninguno;

}

3 Escribir código a los elementos de la lista de la lista de bala para agregar la viñeta de imagen como fondo:

Li {}

imagen de fondo: URL('path/to/bullet.png') no-repeat centro izquierda;

}

Este código establece la viñeta de imagen como fondo de cada elemento de la lista mientras que el navegador no a la imagen en mosaico. Establecer su ubicación como "centro izquierda" por lo que la imagen se coloca a la izquierda del texto y verticalmente centrado.

4 Añadir relleno a la izquierda de cada elemento de la lista:

Li {}

imagen de fondo: URL('path/to/bullet.png') no-repeat centro izquierda;

padding-left: 20px;

}

Establecer la izquierda acolchado a un valor igual a la anchura de la bala de la imagen en píxeles, además de algunos píxeles adicionales para mayor espacio entre la viñeta y el texto.

Consejos y advertencias

  • Dar a la etiqueta "< ul >" un nombre de clase como "< ul clase = 'star' >" y los elementos de lista como ".star li" en tu CSS para agregar viñetas de imagen a ciertas listas y otras no.
  • Copia de seguridad de tus archivos CSS y HTML antes de editarlos.