Práctica sobre "Float", con elementos de bloque y columnas
En la clase de hoy hemos revisado la solución de un ejercicio práctico sobre los "float", que habíamos empezado a ver en la clase anterior, que inicialmente venía sin estilos y había que añadirlos. El ejercicio contenía partes como: navegadores ("nav") que había que cambiar de elementos de bloque a elementos en línea con "display: inline-block;" y otro en columna como navegador lateral, usando "float: left;" para posicionarlo a la izquierda, convirtiéndolo en elemento flotante, entre otras propiedades. La "section" que contiene las imágenes, estaría dividido en tres "div" posicionados en fila, mediante un "float: left;" al igual que el nav de al lado para posicionarse, se da unos márgenes para crear un espacio entre los navegadores y el "section" pero siempre sin superar el 100% del tamaño para que se mantengan en esas posiciones, si no se posicionaría debajo debido a la falta de espacio. El contenido dentro de la "section" esta centrado mediante un "text-align: center;", las imágenes se han reducido a un 50% con un "width" para que se coloquen correctamente. El otro "section", debajo del anterior, es algo más básico, dividido en tres columnas mediante un "column-count: 3;", con un párrafo cada uno. Por último dispone de un "footer" con un texto que contiene un enlace, usando la propiedad "clear: both;".
Para el próximo día, para continuar con la práctica de páginas web, se ha propuesto realizar otro ejercicio para crear una página web algo más complejo, con una serie de instrucciones pero teniendo que realizar la creación desde cero.
No hay comentarios:
Publicar un comentario