Tecnologías de la Información y la Comunicación · 2º Bachillerato
Curso 2016/2017·  

Layout "base" responsive

Cuando construimos un sitio web desde cero necesitamos crear una estructura de contenedores donde ubicar los textos, las imágenes y, en general, todos los objetos que necesitemos. Unas veces queremos dos columnas, otras tres de igual ancho o distinto, otras cuatro y, en raras ocasiones, cinco. Crear esto cada vez que creamos una página es tedioso y por eso os dejo un archivo CSS que he llamado base314.css con algunas reglas CSS "básicas" que  os sevirán para crear la mayoría de los diseños (=layouts) que se os puedan ocurrir. Añadiendo este archivo CSS a nuestro sitio, y "entendiendo" su funcionamiento, nos ahorraremos mucho tiempo y esfuerzo.

Observaciones:

  • He añadido algunas reglas CSS para que el tamaño del texto se adapte a distintos dispositivos.
  • La última sección CSS que he llamado "marcas..." solo es necesaria en tiempo de diseño para saber donde estoy colocando las distintas filas y sus respectivos items hijos (la podemos borrar cuando ya tengamos construido nuesto sitio).
  • Es evidente  que he dejado los colores de fondo de los item-flo y de los item-flex para que se comprenda mejor donde están y que márgenes tienen. Las líneas CSS de estos fondos las debes eliminar cuando lo utilices en tus diseños.
  • He añadido algunas reglas CSS3 avanzadas para no tener que marcar el primier ítem de cada fila con "ini" (inicio) ni el último ítem con "fin".
  • Es conveniente cargar el archivo CSS normalize.css para que todos los navegadores tengan la misma configuración en todos los elementos HTML que utilicemos.
  • También es útil hacer primero un pequeño dibujo en papel (o con alguna herramienta web como NinjaMock) de la distribución y aspecto que queremos que tengan nuestras páginas web.
  • En el apartado [Demo base314.css] tenéis el archivo y un ejemplo de su utilización.

layout

código

 

Etiquetas: HTML5, CSS3

Imprimir

En línea...

Hay 68 invitados y ningún miembro en línea

Prácticas...

aulav

Visitas...

1.png8.png8.png2.png5.png
Hoy ........24
Ayer .......15
Mes ........510

Martes, 23 Abril 2019