É assim que faço o código do layout DIV. Não sei se está claro ou não.
Minha ideia é que no futuro possamos usar peças padrão para montar o layout DIV da página web
Eu divido as classes em dois tipos: classe de layout e classe de estilo. A classe de layout é o esqueleto e a classe de estilo são as roupas.
Por exemplo:
Por exemplo, a coluna esquerda no layout
Em primeiro lugar, suas propriedades são: coluna esquerda, largura, cor de fundo, cor da fonte, etc.
1． Primeiramente será definida uma classe, como: .layout, que serve principalmente para controlar todo o tamanho da página.
.layout{largura:98%;margem:0 automático;alinhamento de texto:esquerda;}
2. Em seguida, 3 classes de layout básico (l,m,r) serão definidas
.l{float:esquerda}
.m{largura:auto}
.r{float:certo}
Também classifico o layout de 2 colunas em layout de 3 colunas, porque no layout de 3 colunas, quando a largura das colunas esquerda e direita é 0, 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. Todos esses são elementos de estilo.
.class_l{fundo:#ff0;margem direita: -150px;largura:150px;}
.class_m{fundo:#f00;margem:0 140px 0 150px;}
.class_r{fundo:#00f;margem esquerda: -140px;largura:140px;}
Existe apenas um conjunto de classes de layout, mas muitas classes de estilo podem ser definidas.
Por exemplo, você deseja criar um pequeno layout de duas colunas na coluna do meio.
Você pode definir outra classe de estilo
.mid_l{fundo:#ff0;margem direita: -100px;largura:100px;}
.mid_m{fundo:#f00;margem:0 0 0 100px;}
4. Combine a classe de layout e a classe de estilo e referencie-as no código como este
<div class=l class＿l></div>
<div class=l mid_l></div>
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.
Algumas outras classes de estilo comumente usadas também podem ser escritas como universais, por exemplo, implícito pode ser definido como
.hide{display:none}
Então, quando necessário, use class=xxx hide para referenciá-lo, o que é muito conveniente.
Código: