Estructura básica de una lista mediante html5
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
A continuación, vamos a dar algo más de estilo a la lista, ya que, de lo contrario, quedaría así:
- Uno
- Dos
- Tres
Un poco sosa, ¿verdad? Para empezar, vamos a aplicar algo de css, para que los botones no tengan ese punto tan feo y típico:
<ul style="list-style:none">
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
Por lo tanto, nuestra lista vertical en html5 y css, comienza a quedarse así:
- Uno
- Dos
- Tres
Y ahora... ¿como podemos darle un toque de originalidad, sin utilizar imágenes? pues con CSS, lenguaje soportado por la mayoría de navegadores modernos, al igual que html5. Por ejemplo, vamos a hacer, que el color de los enunciados, sea diferente en cada no de éstos:
<ul style="list-style:none;" >
<li style="color:#0000FF;" >Uno</li>
<li style="color:#006400;" >Dos</li>
<li style="color:#8B0000;" >Tres</li>
</ul>
Y este es el resultado:
- Uno
- Dos
- Tres
<ul style="list-style:none;font-weight:bold;" >
<li style="color:#0000FF;" >Uno</li>
<li style="color:#006400;" >Dos</li>
<li style="color:#8B0000;" >Tres</li>
</ul>
Y este, es el resultado ahora:
- Uno
- Dos
- Tres
Parece que se ve algo mejor, ¿no? jeje!
Ni te imaginas la de cosas que se pueden llegar a hacer mediante html5 y CSS, ¿qué no te lo crees? te animo a averiguarlo, esto, solo es el primer paso :-)
No te olvides de seguirme en las redes sociales, cuando tengo tiempo, publico nuevos tutoriales en mi blog, y, quien sabe, quizá algún día te interese lo que publico... ;-)
No hay comentarios:
Publicar un comentario