En la cabecera <head> de la página hay que:
Al desactivar la hoja de estilo se puede observar que las etiquetas de bloque utilizadas son <h1> y <p>.
No es necesario crear secciones o divisiones alrededor de cada cita, la forma rectangular y el borde se puede dar directamente a cada párrafo <p>.
Cada ley de Murphy tiene una posición, color y alineación distinto, así que hay que dar una clase o un id distinto a cada una.
En este caso se ha preferido utilizar id, porque los valores de esos atributos no se deberían repetir (no querríamos que dos leyes de Murphy se mostraran en el mismo lugar).
La disposición de elementos en la página es la siguiente:
Cada ley de Murphy está una posición independiente e incluso se superponen. Eso se puede conseguir con posicionamiento absoluto.
Al variar el ancho de la ventana se puede observar que el tamaño de los párrafos cambia, pero su posición relativa no. Al hacer zoom, el tamaño de la letra cambia, pero su posición no. Eso indica que tanto el tamaño como todas las posiciones están definidos en porcentaje (%).
El dibujo siguiente muestra cómo se podría definir el tamaño y la posición de un par de párrafos:
La segunda ley de Murphy se superpone al resto. Eso se consigue utilizando la propiedad z-index en la segunda ley de Murphy. No es necesario utilizar la propiedad z-index en el resto de leyes de Murphy ya que los elementos sin z-index se muestran por detrás de los elementos con z-index.
Al situar el ratón sobre una ley de Murphy, esa ley se superpone a la segunda. Eso se consigue utilizando la propiedad z-index en la pseudo-clase p:hover, dándole un valor superior al que tiene el z-index de la segunda ley de Murphy.
Estas son las propiedades CSS utilizadas:
El código HTML del ejercicio puede consultarse abriendo la página web del ejercicio Leyes de Murphy y abriendo el código fuente (Ctrl+U).
La hoja de estilo del ejercicio puede consultarse abriendo este enlace a la hoja de estilo del ejercicio Leyes de Murphy.
Tenga en cuenta que en estos ejercicios hay a menudo varias maneras de conseguir el mismo resultado, por lo que la solución no es nunca única.