O layout de líquido elástico CSS atende a diferentes telros de conteúdo

Hoje, quando os monitores dos usuários estão ficando cada vez maiores, o layout de largura sólido de 1024*768 anterior está se tornando cada vez mais deslocado. Resíduos de tela, como designer da web, você tem a responsabilidade de dar a esse grupo de usuários uma boa interface do usuário.

Obviamente, para reduzir o desperdício desse tipo de tela, a adoção do layout do fluido elástico é a melhor solução. No entanto, devido a várias restrições, as páginas atuais da Web não estão totalmente equipadas com as condições para adotar totalmente o layout elástico de fluido (especialmente a destruição sem escrúpulos dos padrões pelos fabricantes de navegadores e o suporte incompleto dos padrões CSS etc.). Como intermediários entre usuários e fabricantes, só podemos nos adaptar à lacuna entre os dois com uma atitude compatível. Portanto, como uma solução de transição, existe esse layout: elástico + layout de largura sólida.

A elasticidade mencionada aqui refere -se à adaptação de segundo plano à largura da tela, enquanto a largura sólida significa que o conteúdo principal pode ser automaticamente centrado na tela larga e na tela estreita. Sobreviva na lacuna para atender às necessidades dos usuários com diferentes tamanhos e resoluções. O design mostrado na figura abaixo é um exemplo típico.

Vamos falar menos bobagens e voltar ao ponto, vamos criar essa estrutura de layout.

Primeiro construa a camada estrutural:

Vamos analisar a camada de estrutura. Para projetar dessa maneira?

Definimos os contêineres do invólucro e do rodapé como 100% de largura para se adaptar automaticamente à largura da tela. E também defina a área do cabeçalho como 100% de largura. Dessa forma, podemos inserir uma imagem de ladrilhos horizontalmente no cabeçalho e no rodapé, para que o fundo do cabeçalho e do rodapé possa preencher horizontalmente todo o espaço de tela sob a tela grande.

Como conteúdo principal, nossa abordagem geral é deixá -lo centrar e deixar espaços em branco de ambos os lados quando a resolução se torna maior. Como a área do cabeçalho foi definida como 100% de largura, adicionamos uma camada de contêiner no cabeçalho, que serve como transportadora do conteúdo de texto do cabeçalho real. Deixe o centro centralizar automaticamente.

Dessa forma, o texto do cabeçalho flutua a camada superior do haader.

Da mesma forma, o rodapé também pode ser implementado dessa maneira.

Na camada de estrutura acima, não usei esse método na área de conteúdo intermediário, mas fiz um pouco de solução alternativa. O que devemos fazer se não parecermos muito vazios nos dois lados do texto em grande resolução? Obviamente, para reduzir o ninho, podemos adotar soluções alternativas. Podemos adicionar uma imagem de tamanho grande ao plano de fundo no corpo e usar a posição de fundo para posicionar a imagem no centro, para que as figuras nos dois lados da área de conteúdo sejam exibidas.

Este blog é um caso específico. e o conteúdo do texto é sempre exibido no centro.

Para demonstrar o efeito, adicionamos outros ajustes de cores, e o estilo final é o seguinte: