De repente, pensei nesse método quando estava escrevendo um layout de três colunas no CSS por alguns dias. Eu me senti um pouco louco por essa ideia. Se houver algo errado com isso, por favor me dê alguns conselhos.
Quando preciso escrever um layout de três colunas, geralmente optarei por usar o seguinte método de layout da div:
Figura 1 Layout da div
O uso desses métodos de nidificação pode, sem dúvida, reduzir muito a probabilidade de erros de código, mas, ao mesmo tempo, esse layout é um pouco complicado e é um pouco inconveniente para manutenção posterior. Quando lizemos a navegação, costumamos usar um método, que deve usar a lista 〈ul 'para layout, e a navegação pode ser descrita como um layout de várias colunas. Como esse é o caso, também podemos usar 〈ul jos para fazer o layout da página várias colunas.
Figura 2 Layout da div
Este é um layout de largura fixa, o que significa que a liquidez não é forte. O layout de liquidez ainda não foi testado. Vou tentar quando tiver tempo. A seguir, o código para este layout:
<! Doctype html public -// w3c // dtd xhtml 1.0 transitório // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml>
<head>
<meta http-equiv = content-type content = text/html; charset = utf-8 ″ />
<title> Use UL para layout de várias colunas </title>
<tipo de estilo = texto/css>
* {margem: 0; preenchimento: 0;}
corpo {
largura: 100%;
Altura: 100%;
Antecedentes: #ddedfb;
}
#MaiContent {
Largura: 600px;
margem: 10px automático;
}
#cabeçalho,#rodapé {
Antecedentes:#8ac7fa;
Altura: 80px;
claro: ambos;
}
#footer {
claro: ambos;
Top-top: 10px;
}
#contente {
Altura: 300px;
margem: 10px automático;
}
#Content ul {
estilo de lista: nenhum;
Altura: 100%;
}
#Content ul li {
Largura: 150px;
Altura: 100%;
Antecedentes:#8ac7fa;
flutuar: esquerda;
}
#Content ul li#li2 {
Largura: 280px;
margem: 0 10px;
}
#Content ul li#li2 ul li {
Largura: 270px;
Altura: 140px;
margem: 5px;
Antecedentes:#0581F0;
}
</style>
</head>
<Body>
<div id = mainContent>
<div id = cabeçalho> Esta é a cabeça </div>
<div id = content>
<ul>
<li> Esta é a esquerda </li>
<li id = li2 ″>
<ul>
<li> Esta é a parte superior do meio </li>
<li> Esta é a parte inferior no meio </li>
</ul>
</li>
<li> Este é o certo </li>
</ul>
</div>
<div id = rodapé> Este é o fundo </div>
</div>
</body>
</html>
Este código pode ser exibido normalmente no IE7 e FF3. Outros navegadores não o testaram. Se você tiver um método melhor, também pode propor.