Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Listas

1,178 views

Published on

Presentación de listas en html y css para la creación de menús.
Basada en el libro "Introducción a CSS" de la página www.librosweb.es

  • Be the first to comment

Listas

  1. 1. Capitulo 9 Listas
  2. 2. Por defecto los navegadores muestran loselementos de las listas no ordenadas con unaviñeta formada por un círculo de color negro.Los elementos de las listas ordenadas semuestran por defecto con numeracióndecimal.
  3. 3. CSS define varias propiedades para controlar eltipo de viñeta que muestran las listas. Lapropiedad básica para controlar el tipo deviñeta es list-style-type.
  4. 4. ul{ list-style-type: square;}
  5. 5. ul.ok { list-style-image: url(imagenes/ok.png); }ul.go { list-style-image: url(imagenes/bullet_go.png); }ul.redondo { list-style-image: url(imagenes/bullet_red.png);}
  6. 6. Shorthand para escribir todas las propiedades de forma directaEl orden en el que se indican los valores de la propiedad es indiferente. list-style: inside none; list-style: none inside;Cuando se utiliza una viñeta personalizada, es conveniente indicar laviñeta automática que se mostrará cuando no se pueda cargar la imagen: ul { list-style: url(imagenes/cuadrado_rojo.gif) square; }
  7. 7. Menú Vertical<ul> <li><a href="#" >Elemento 1</a></li> <li><a href="#" >Elemento 2</a></li> <li><a href="#" >Elemento 3</a></li> <li><a href="#" >Elemento 4</a></li> <li><a href="#" >Elemento 5</a></li> <li><a href="#" >Elemento 6</a></li></ul>
  8. 8. 1) Definimos un ancho para el menú, quitamos lasviñetas, márgenes y espaciados aplicados por defecto ul.menu { width: 180px; list-style: none; margin: 0; padding: 0; }
  9. 9. 2) Añadir un borde al menú de navegación y establecer el color defondo y los bordes de cada elemento del menú:ul.menu { width: 180px; list-style: none; margin: 0; padding: 0; border: 1px solid #7C7C7C; border-bottom: none;}ul.menu li { border-bottom: 1px solid #7C7C7C; border-top: 1px solid #FFF; background: #F4F4F4;}
  10. 10. 3) Aplicar estilos a los enlaces: mostrarlos como un elementode bloque para que ocupen todo el espacio de cada <li> delmenú, añadir un espacio de relleno y modificar los colores yla decoración por defecto:ul.menu li a { padding: .2em 0 .2em .5em; display: block; text-decoration: none; color: #333;}
  11. 11. Menú Horizontal
  12. 12. 1) Eliminar la anchura y el borde del elemento <ul> y aplicar las propiedades float y clear:ul.menu { list-style: none; width: 100%; clear: both; float: left; margin: 0; padding: 0;}
  13. 13. 2) La clave de la transformación reside en modificar la propiedadfloat de los elementos <li> del menú:ul.menu li { float: left;}
  14. 14. 3) Modificar el padding y los bordes de los enlaces que forman elmenú:ul.menu li a { text-decoration: none; background: #F4F4F4; border-top: 1px solid #7C7C7C; border-right: 1px solid #7C7C7C; border-bottom: 1px solid #9C9C9C; padding: .3em; display: block; color: #333;}
  15. 15. 4) Por último, se añade un borde izquierdo en el elemento <ul>para homogeneizar el aspecto de los elementos del menú:ul.menu { border-left: 1px solid #7C7C7C; clear: both; float: left; width: 100%; list-style: none; margin: 0; padding: 0;}
  16. 16. Modificando los estilos de cada elemento del menú y utilizandoimágenes de fondo y las pseudo-clases :hover y :active, se puedencrear menús horizontales complejos, incluso con el aspecto de unmenú de pestañas
  17. 17. Para hacer uso de menús desplegables podemos añadir elsiguiente código:#menuh ul li ul { display: none; position: absolute;}#menuh ul li:hover ul { display: block; width: 20%;}La pseudoclase :hover se activa al pasar el cursor sobre elelemento indicado.

×