Hoje, à medida que os monitores dos usuários ficam cada vez maiores, o layout anterior de largura sólida de 1024*768 está se tornando cada vez mais desatualizado. Para usuários com telas grandes, o espaço vazio em ambos os lados dá às pessoas uma impressão séria à primeira vista. desperdício, como web designer você tem a responsabilidade de fornecer a esse grupo de usuários uma boa interface de usuário.
Claro, para reduzir esse desperdício de tela, usar o layout fluido elástico é a melhor solução. Ele pode aproveitar ao máximo o espaço da tela e exibir o conteúdo em tela inteira, independentemente da resolução. No entanto, devido a várias limitações, as páginas da web atuais ainda não estão prontas para adotar totalmente o layout elástico fluido (especialmente o atropelamento desenfreado dos padrões pelos fabricantes de navegadores e o suporte incompleto aos padrões CSS, etc.). Como intermediários entre utilizadores e fabricantes, só podemos adaptar-nos à lacuna entre os dois com uma mentalidade compatível. Portanto, como solução de transição, existe o seguinte layout: elástico + layout de largura fixa.
A elasticidade mencionada aqui significa que o fundo se adapta à largura da tela, enquanto a largura fixa significa que o conteúdo do texto pode ser centralizado automaticamente tanto em tela larga quanto em tela estreita. Sobreviva nas fendas para atender às necessidades dos usuários com resoluções de diferentes tamanhos. O design mostrado abaixo é um exemplo típico.
Sem mais delongas, vamos ao que interessa. Vamos criar uma estrutura de layout como esta.
Primeiro construa a camada de estrutura:
| <div id="wrapper"> <div id="main" class="clearfix"> <div id="cabeçalho"> <div id="inheader"></div> </div> <div id="content"></div> </div> </div> <div id="rodapé"> <div id="infoot"></div> </div> |
Analise a camada estrutural Uma página da web geralmente inclui três partes: cabeçalho, área de conteúdo e rodapé. Colocamos o cabeçalho e o conteúdo em uma camada contêiner, chamada wrapper, e separamos o rodapé, chamado wrapper. Por que foi projetado assim? Queremos que esse rodapé fique absolutamente na parte inferior, mesmo quando a área de conteúdo tiver menos de uma tela.
Definimos a largura dos dois containers, wrapper e rodapé, para 100% para que se adaptem automaticamente à largura da tela. E também defina a área do cabeçalho para 100% de largura. Desta forma, podemos inserir uma imagem que pode ser colocada horizontalmente no cabeçalho e rodapé, de forma que o fundo do cabeçalho e rodapé possa preencher todo o espaço da tela horizontalmente em uma tela grande.
Quanto ao conteúdo do texto principal, nossa abordagem geral é exibi-lo no centro quando a resolução aumentar, deixando espaços em branco em ambos os lados. Como a área do cabeçalho foi definida com largura de 100%, adicionamos outra camada de contêiner no cabeçalho, que serve como portador do conteúdo de texto do cabeçalho real. Em seguida, definimos um valor de largura fixo para ele, como 960 pixels de largura. e deixe-o centralizar-se.
| #inheader{width:960px;height:110px; margin:0 auto } |
Desta forma, o texto principal do cabeçalho da página flutua na camada superior do cabeçalho. Essas duas camadas podem ser definidas com diferentes imagens de fundo para formar uma sobreposição. efeito de cabeçalho, que pode adaptar automaticamente uma resolução de tela maior.
Da mesma forma, o rodapé também pode ser implementado através deste método.
Na camada estrutural acima, não usei esse método na área de conteúdo intermediária, mas fiz uma pequena alteração. Podemos ver que na área de conteúdo não há contêiner incorporado, mas apenas um contêiner. O que devemos fazer se quisermos evitar que os dois lados do texto apareçam vazios em alta resolução. Claro, você pode usar os métodos de cabeçalho e rodapé e adicionar um div ao seu conteúdo. É claro que, para reduzir o aninhamento, podemos usar soluções alternativas. Podemos adicionar uma imagem muito grande ao fundo do corpo e usar a posição de fundo para posicionar e centralizar a imagem para que as imagens em ambos os lados da área de conteúdo sejam exibidas.
Este blog é um caso específico. Se você olhar as fotos em ambos os lados deste blog em alta resolução e depois diminuir a janela, verá que apenas uma pequena área das fotos em ambos os lados é exibida em 1024*. 768, enquanto o texto principal é sempre exibido no centro.
Para demonstrar o efeito, adicionamos alguns outros ajustes de cores e o estilo final é o seguinte:
| *{margem:0;preenchimento:0;} html, corpo, #wrapper {altura: 100%;tamanho da fonte:12px;} #wrapper{largura:100%;fundo:#777;} corpo > #wrapper {altura:auto;altura mínima:100%;} #main {padding-bottom: 54px;min-width:960px;}/* Deve usar a mesma altura do rodapé, a largura mínima pode ser resolvida adicionando JS no ie6*/ #header{text-align:center;color:#fff;background:#333;} #inheader{largura:960px;altura:110px;altura da linha:110px;margem:0 automático;fundo:#CC9933;} h3{tamanho da fonte:14px;altura da linha:50px;} #inheader p{tamanho da fonte:12px;altura da linha:30px;} #rodapé { posição: relativa; margin-top: -54px; /* Valor negativo da altura do rodapé*/ altura: 54px;/* altura do rodapé*/ largura:100%; min-width:960px;/*A largura mínima é resolvida adicionando JS no ie6*/ claro: ambos; fundo:#666; alinhamento de texto:centro; cor:#fff; } #infoot{altura:54px;altura da linha:54px;largura:960px;margem:0 automático;fundo:#CC9966;} #footer p{altura da linha:26px;} #content{fundo:#999;largura:960px;margem:0 automático;altura:692px;} #content p{line-height:30px;padding:0 30px;color:#fff;} /*Nota: O que precisa ser observado é que o valor de preenchimento de #main, a altura do rodapé e o valor da margem negativa precisam ser consistentes. A seguir está o famoso fecho flutuante universal Clearfix Hack*/ .clearfix:depois { contente: "."; exibição: bloco; altura: 0; claro: ambos; visibilidade: oculto;} .clearfix {display: bloco embutido;} /* Oculta do IE-mac */ * html .clearfix {altura: 1%;} .clearfix {display: bloco;} /* Fim da ocultação do IE-mac */ |