Aplicação flexível de classe CSS no layout de página da web

Acredito que todos os amigos que estudaram CSS conhecem CLASS. Não sei como você o usa ao fazer páginas da web. É assim que eu faço o código de layout DIV. Não sei se está claro ou não, vamos dar uma olhada.

a

de

estilo são as roupas.

coluna no layout

primeiro tem seus atributos:: É a coluna esquerda, largura, cor de fundo, cor da fonte,

etc. Primeiro, será definida uma classe, como: .layout, que é usada principalmente para controlar todo o tamanho da página

layout{width:98%;margin:0 auto;text-align:left;}

2. Em seguida, 3 layouts básicos Class(l,m,r)

.l{float:left}

.m{width:auto}

.r{float:right}

Também classifico o layout de 2 colunas no layout de 3 colunas, porque em um layout de 3 colunas, quando as larguras das colunas esquerda e direita são 0 respectivamente, 3 colunas tornam-se 2 colunas.

Quando escrevemos código de layout básico, é melhor escrevê-lo em um formato de 3 colunas.

3. Correspondente à classe de layout, defina a classe de estilo necessária, como largura, altura, cor de fundo, etc. Esses são todos elementos de estilo

class_l{background:#ff0;margin-right: -150px;width:150px;}

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

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

Existe apenas um conjunto de classes de layout, mas muitas classes de estilo podem ser definidas . Por exemplo, você precisa fazer isso na coluna do meio. Um pequeno layout de 2 colunas pode definir outra classe de estilo

.mid_l{background:#ff0;margin-right: -100px;width:100px;}

.mid_m{background:# f00;margin:0 0 0 100px;}

4. Combine a classe de layout e a classe de estilo e referencie-as no código como este

Cite ambas as classes, separadas por espaços. A primeira é a classe de layout, e a segunda é a classe de estilo. Você pode continuar a citar as duas classes com espaços. id para definir.

Outros Algumas classes de estilo comumente usadas também podem ser escritas como universais. Por exemplo, implícito pode ser definido como

.hide{display:none}

Neste caso, ele pode ser referenciado diretamente com class="xxx hide" em

lugares úteis. Não é muito conveniente? Você também pode anotar suas boas experiências e compartilhá-las