Comentarios al ejercicio Diseño de listas 1

Etiquetas utilizadas

Al quitar el estilo se puede observar que las únicas etiquetas de bloque utilizadas son <h1>, <h2>, <ul> y <address>.

Al quitar el estilo, se puede observar que la línea punteada por encima de <address> desaparece, por tanto se trata de un borde.

Clases utilizadas

Cada lista tiene un estilo distinto, así que cada una requiere su propia clase (o id).

Otros

Como casi todas las listas llevan la propiedad float, hay que poner la propiedad clear en algún elemento, por ejemplo, en <h2>.

Lista 1

Esta lista es como la que se explica la págna de Diseño de listas.

Lista 2

Los elementos de la lista tienen todos el mismo ancho, así que tienen la propiedad width.

Lista 3

Los elementos de la lista tienen todos el mismo ancho, así que tienen la propiedad width.

En los elementos de la lista hay dos fondos de color diferente, por lo que se deberán utilizar dos clases de <li>.

Lista 4

Los elementos de la lista tienen todos el mismo ancho, así que tienen la propiedad width.

En los elementos de la lista hay dos fondos de color diferente, por lo que se deberán utilizar dos clases de <li>. El borde alrededor de la lista sólo se puede dibujar si se asigna a los elementos <li>, por lo que se necesitarán otras tres clases:

• una para el primer elemento, con bordes arriba, abajo y a la izquierda.
• una para los elementos centrales, con bordes arriba y abajo.
• una para el último elemento, con bordes arriba, abajo y a la derecha.

Lista 5

El borde irregular se puede conseguir con dos clases de <li>:

• una para los elementos impares (con borde a la derecha, abajo y a la izquierda).
• una para los elementos pares (con borde arriba).

Lista 6

Todos los elementos tienen borde a la derecha, menos el útlimo que no tiene borde. basta con hacer una clase para este último elemento.

Lista 7

Los elementos de la lista tienen todos el mismo ancho, así que tienen la propiedad width.

Lista 8

Los elementos de la lista tienen todos el mismo ancho, así que tienen la propiedad width.

Tanto <ul> como <li> tienen borde.

Lista 9

Esta lista es como la que se explica la págna de Diseño de listas.

Solución del ejercicio

El código XHTML del ejercicio puede consultarse abriendo la página web del ejercicio y eligiendo el menú Ver > Código fuente de la página en Firefox o Ver > Código fuente en Internet Explorer.

La hoja de estilo del ejercicio puede consultarse abriendo este enlace a la hoja de estilo del ejercicio.

Tenga en cuenta que en estos ejercicios hay a menudo varias maneras de conseguir lo mismo, por lo que la solución no es nunca única.

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.