Aplicación flexible de CSS Class en el diseño de páginas web

Creo que todos los amigos que han estudiado CSS conocen CLASS. No sé cómo se usa al crear páginas web. Así es como hago el código de diseño DIV. No sé si está claro o no, echemos un vistazo.

Divido las clases en dos tipos, la clase de diseño y la clase de estilo son el esqueleto y la clase de estilo es la

ropa

.

columna en el diseño

tiene sus atributos: : Es la columna izquierda, ancho, color de fondo, color de fuente,

etc. Primero, se definirá una clase, como: .layout, que se utiliza principalmente para controlar el tamaño completo de la página

diseño{width:98%;margin:0 auto;text-align:left;}

2. Luego, 3 diseños básicos Class(l,m,r)

.l{float:left}

.m{width:auto}

.r{float:right}

También clasifico el diseño de 2 columnas en el diseño de 3 columnas, porque en En un diseño de 3 columnas, cuando los anchos de las columnas izquierda y derecha son 0 respectivamente, 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{background:#ff0;margin-right: -150px;width:150px;}

.class_m. {fondo:# f00;margin:0 140px 0 150px;}

.class_r{fondo:#00f;margin-left: -140px;width:140px;}

Solo hay un conjunto de clases de diseño, pero se pueden definir muchas clases de estilo Por ejemplo, debe hacerlo en la columna del medio. Un diseño pequeño de 2 columnas puede definir otra clase de

estilo

.

f00;margin: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

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. id para definir

Otros Algunas clases de estilo de uso común también se pueden escribir como universales. Por ejemplo, implícito se puede definir como

.hide{display:none}.

En este caso, se puede hacer referencia directamente a él con class="xxx hide" en. lugares útiles ¿No es muy conveniente? También puedes anotar tus buenas experiencias y compartirlas.