Como hacer una pagina web y ganar dinero
Creada para aprender lo que mas nesesitas porque la calidad es mejor que la cantidad.
Blog

Crear listas con HTML

Tags: listas, css, html, etiquetas, color, estilo
publicado el 2010-06-02   leido 3158 leídas

Las listas son bloques de items ordenados uno abajo del otro, pueden ser ordenadas o desordenadas, para entenderlo mejor miremos este ejemplo:


Lista ordenada:

  1. Primer item
  2. Segundo
  3. etc.

Lista desordenada:

  • primer item de mi lista
  • segundo
  • tercero
  • etc...

Crear una lista con HTML


El código para crear una lista con HTML desordenada es <ul> y </ul>, esta es la primera que escribiremos siempre que queramos crear una lista desordenada, y la segunda es <li> y </li>.

 
Crear lista desordenada:

<ul>
        <li>Este es el primer item de mi lista</li>
        <li>Segundo item</li>
        <li>Tercero</li>
</ul>


Como podemos ver, con la etiqueta <ul> indicamos que queremos abrir una lista y con <li> creamos los items, un item por cada <li>.

 
Crear lista ordenada:

<ol>
        <li>Este es el primer item de mi lista</li>
        <li>Segundo item</li>
        <li>Tercero</li>
</ol>

Aplicar estilos CSS a listas


Bien, ya sabemos que son las listas y como crearlas, que rapido ¿no?, ahora veremos como aplicar estilos a esas listas, por ejemplo, para sacarle los puntos negros horribles que tienen al costado.

Para sacarle el punto negro al costado sería asi:

ul{list-style:none;}

utilizamos la propiedad "list-style" que define el estilo de la lista, al poner ese atributo en "none" le estamos diciendo que a la etiqueta <ul> (contenedor de la lista en HTML, ¿recuerdas?) no le de ningun estilo, con esto sacamos el punto negro o los numeros en las listas ordenadas.

Como darle color a los textos de los items de la lista.

li{color: gray;}

Seleccionamos la etiqueta <li> y le aplicamos la propiedad "color" con el atributo "gray", es decir, gris en inglés, recuerda que tambien podemos hacer por el hexadecimal, osea "color: #cccccc;".

Podemos hacer lo que queramos, siempre y cuandos recuerdes que <ul> es el bloque entero de la lista y <li> son los items.


Te gust?

Poner fondo con CSS

Creación de tablas en Html

 
Información
Christian Valencia publicado porPor: Ero-Fierce

Suscribete
Recibe los ultimos articulos en tu email:


Ultimos Artculos
Hacer SEO en el 2016 - 2017
Habilitar sonido al pulsar las teclas Bloq Mayús, Bloq Num y Bloq Des
10 trucos viejos, seo que nunca te dijeron
15 Efectos carrusel como pagina de libro animado con ejemplos
No se pudo generar una instancia de usuario de SQL Server debido a un error (.mdf
Solucion Error 26. No se encontró el servidor o éste no estaba accesible. Sql

Todos los tutoriales

Hacer una web paso a paso Php y MySQL Javascript
Posicionamiento Web SEO Cómo ganar dinero con tu web Herramientas y Programas Web
Maquetación con CSS Hosting y Dominios MySQL y Phpmyadmin
Ajax UML: Analisis y Diseño Programacion Orientada a Objetos
Java
 
Copyright © 2009 - pagina Web 2 - Todos los derechos Reservados