Así es como hago el código de diseño DIV. No sé si está claro o no.
Mi idea es que en el futuro podamos usar piezas estándar para ensamblar el diseño DIV de la página web.
Divido las clases en dos tipos, la clase de diseño y la clase de estilo es el esqueleto y la clase de estilo es la ropa.
Por ejemplo:
Por ejemplo, la columna izquierda en el diseño.
En primer lugar, sus propiedades son: columna izquierda, ancho, color de fondo, color de fuente, etc.
1． Primero, se definirá una clase, como por ejemplo: .layout, que se utiliza principalmente para controlar todo el tamaño de la página.
.layout{ancho:98%;margen:0 auto;text-align:left;}
2. Luego se definirán 3 clases de diseño básico (l, m, r)
.l{flotador:izquierda}
.m{ancho:automático}
.r{flotador:derecha}
También clasifico el diseño de 2 columnas en el diseño de 3 columnas, porque en el diseño de 3 columnas, cuando el ancho de las columnas izquierda y derecha es 0, 3 columnas se convierten en 2 columnas.
Cuando escribimos código de diseño básico, es mejor escribirlo en formato de 3 columnas.
3. De acuerdo con la Clase de diseño, defina la Clase de estilo requerida, como ancho, alto, color de fondo, etc. Todos estos son elementos de estilo.
.class_l{fondo:#ff0;margin-derecho: -150px;ancho:150px;}
.class_m{fondo:#f00;margen:0 140px 0 150px;}
.class_r{fondo:#00f;margen izquierdo: -140px;ancho:140px;}
Sólo hay un conjunto de clases de diseño, pero se pueden definir muchas clases de estilo.
Por ejemplo, desea crear un pequeño diseño de dos columnas en la columna del medio.
Puedes definir otra clase de estilo.
.mid_l{fondo:#ff0;margin-derecho: -100px;ancho:100px;}
.mid_m{fondo:#f00;margen:0 0 0 100px;}
4. Combine la clase de diseño y la clase de estilo y haga referencia a ellas en el código como este
<div clase=l clase＿l></div>
<div clase=l mid_l></div>
Cita ambas clases, separadas por espacios. La primera es la clase de diseño y la segunda es la clase de estilo. Puedes continuar citando las dos clases con espacios. Si necesitas definirlo especialmente, puedes darle un div. identificación para definir.
Algunas otras clases de estilo de uso común también se pueden escribir como universales, por ejemplo, implícitas se pueden definir como
.ocultar{display:ninguno}
Luego, cuando sea necesario, use class=xxx hide para hacer referencia a él, lo cual es muy conveniente.
Código: