El mejor tutorial de Responsive Web Design - cuadrícula en 2024. En este tutorial podrás aprender ¿Qué es una vista de cuadrícula?,Crear una vista de cuadrícula de respuesta,Ejemplos,CSS:,CSS:,CSS:,Ejemplos,
Muchas páginas web son de diseño basado en la red, lo que significa que la página se basa en el diseño de columna.
Utilice la vista de cuadrícula ayudarnos a diseñar páginas web. Esto nos permite añadir un elemento de página se hace más fácil.
vista de cuadrícula sensible es por lo general 12, una anchura de 100%, cuando la ventana del navegador cambia de tamaño automáticamente retráctil.
A continuación, creamos una vista de cuadrícula sensible.
En primer lugar asegúrese de que todos los elementos HTML tienen la propiedadde caja de tamaño y se pusieron a la frontera-box.
Garantizar márgenes y fronteras que figuran entre la anchura y la altura del elemento.
Agregue el código siguiente:
* { box-sizing: border-box; }
Ver más en forma de caja de tamaño por favor haga clic en: CSS3 cuadro de dimensionamiento de la propiedad .
El siguiente ejemplo muestra una página Web que responde simple que contiene dos columnas:
Los ejemplos incluyen los dos anteriores.
sistema de red 12 puede controlar mejor sitio web de respuesta.
En primer lugar, se puede calcular el porcentaje de cada columna: 100% / 12 = 8,33%.
Se especifica en cadaclase columna, class = "colaboración" se utiliza para definir cada columna tiene varios útil:
Todas las columnas de la izquierda Flotante, espaciando (relleno) de 15 píxeles:
Cada fila usando <div> paquete. Todas las columnas deben sumar 12:
Columna de la izquierda comportamiento flotante, y añadir flotado claro:
Podemos añadir un poco de estilo y color, deje que se vea mejor: