Google+ Crear una lista mediante html5 y CSS - tutorial - Miopiblog

lunes, 28 de octubre de 2013

Crear una lista mediante html5 y CSS - tutorial

Mediante este nuevo tutorial, vamos a crear una lista haciendo uso de html5 y a continuación la decoraremos un poco, utilizando CSS. Lo primero que vamos a hacer para crear nuestra lista mediante html5, es crear una estructura básica para ésta, el CSS, vendrá después. Por ejemplo, podemos crear una lista en html5 <ul></ul>, con tres botones o secciones <li></li>.

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

Genial! nuestra lista está algo más decorada... las letras parecen muy finas. Ok, como último paso, les vamos a dar algo más de grosor:


<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 en la entrada

Seguidores (seguir blog)

Me siguen en google plus: