<Código-Web>
Elementos HTML
y Reglas CSS

  1. TEXTOS
  2. ENLACES
  3. LISTAS
  4. IMÁGENES
  5. TABLAS
  6. FORMULARIOS
  7. MAQUETACIÓN

LISTAS > Viñetas

 

Normalmente las listas desordenadas aparecen con unas "bolitas" negras vacias/llenas o unos cuadritos que preceden a cada ítem. Esto no es fijo y lo podemos cambiar mediante reglas CSS, además tambíen podemos variar el margen, el relleno y cualquier otro parámetro que se nos ocurra.

Por ejemplo

Con esta regla CSS (utilizando un selector de clase)

.lista1 {
  list-style-image: url("_config/flecha.png");
  padding: 5px 50px;
}

Y este código HTML (utilizando el atributo class)

<ul class="lista1">
  <li>Este es un ítem de la lista</li>
  <li>Este es otro ítem</li>
  <li>Y este es otro ítem más</li>
</ul>

Vista en el navegador

La "viñeta" la creamos previamente con cualquier programa gráfico con unas dimensiones adecuadas a nuestras necesidades.

 

 


- (cc) 2012, 3con14 -