Crear una galería con listas

La galería se puede crear facilmente con listas. Primero se debe colocar el contenido y luego modificar los estilos como se indica a continuación.

Insertar el contenido

  1. Crear una lista sin ordenar <ul> y luego dentro de cada lista <li> se coloca el contenido del producto como la imagen, el nombre del producto y la opción de ver más. El código html es el siguiente:
<ul>
<li>img src=”imagenes/ser1.jpg” width=”97″ height=”97″ border=”0″ />
<h5>Mueble Naranja</h5>
<h6>ver mas</h6>
</li>
<li><img src=”imagenes/ser2.jpg” width=”97″ height=”97″ border=”0″ />
<h5>Sofa Blanco</h5>
<h6>ver mas</h6>
</li>
<ul>

Crear estilos

  1. Primero se crea la etiqueta <ul>, si hay más de dos listas en el html crear un compuesto.
  2. Se modifica el estilo, en la categoría cuadro se modifican los espacios internos y externos (padding y margin) para eliminar el espacio predeterminado.
  3. Luego se elimina el guión de las listas entrando en la categoría listas y colocando none en la opción list-style-type.
  4. Crear la etiqueta <li> que representa cada uno de los items de la lista. Lo más importante es aplicar el ancho del contenedor y añadir left en la opción de float. Se le pueden colocar otras características como el fondo, borde, espacios internos o externos, entre otros.

    El código css es el siguiente:
li {
 background-color: #F90;
 width: 97px;
 padding: 5px;
 float: left;
 margin-right: 10px;
 margin-bottom: 10px;
}
ul {
  list-style-type: none;
 margin: 0px;
 padding: 0px;
}

 Producto final: