Crearemos listas usando solo codigo de HTML y CSS, como saben usando html podemos organizar por categorias, palabras, enlaces, entre otros. pero con la ayuda de css podemos darle una mejor apariencia al texto creado.
Veamos las diferentes formas de crear listas, con estilos diferentes.
Usando <ul> en HTML
<ul> |
Ahora obtendríamos lo siguiente con el código anterior:
Usando <ol> en HTML
<ol> |
Obtendríamos lo siguiente:
Usando <dl> en HTML
Ahora solo mejoraremos el estilo usando CSS
Vamos a mejorar el aspecto de las lista usando unos códigos como los que a continuación mostrare.
Usando el siguiente código:
ol{ |
Donde:
- ol –> Es la clase al cual se dará el estilo. Puedes cambiar por ul , dl. Dependiendo lo que uses
- squere –> Es el estilo de listado que se dará, existen:
- squere, el cual tiene forma de cuadrado pequeño
- upper-roman, el cual tiene formato de número romanos
- decimal-leading-zero, el cual tiene formado de números decimales
- lower-latin, tiene formato de letras (a, b, c, d..)
Si deseamos usar algunas imágenes, podemos realizar los siguientes cambios:
li{ |
Donde:
- li –> Las listas
- list-style: none –> Anulará la viñeta de la lista
- imagen.jpg –> La URL de la imagen
- left bottom –> Posición con respecto al item
- no-repeat –> Indica que el fondo no se repetirá
- padding-left –>Desplaza a la palabra 13px hacia la derecha para que no tape la imagen
Como ven hay maneras de poder dar estilos a nuestros diseños de listas combinando HTML y CSS.
0 comentarios:
¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro de tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados.