10 Sites com grande exemplo CSS Layouts
Uma das melhores maneiras de aprender como usar CSS para executar várias tarefas é ver como outras pessoas estão configurar seus sites. A lista a seguir apresenta vários layouts que você pode usar para criar seu próprio site. Ele também discute o tipo de layout e características especiais sobre cada site que você deve observar.
Astronomy Picture of the Day: O Astronomy Picture of the Day (APOD) é um excelente exemplo de um design fluido. Tente redimensionar a página e você vai se surpreender com a forma como o conteúdo da página responde. (O gráfico no centro não funciona bem em um telefone celular, mas o texto certamente não.) Apresenta uma boa combinação de estilos de fonte e mostra como usar ligações bem para melhorar o conteúdo.
Hoje EUA: Este é um bom exemplo de um desenho adaptativo dois ou três colunas. Observe que quando você redimensionar a página, a terceira coluna à direita tende a desaparecer quando a página fica muito pequena. Observe as setas em cada lado da apresentação. Você pode usá-los para se mover entre as seções de jornais, o que é um excelente uso deste efeito especial.
Yahoo! Maps: locais do mapa pode ser notoriamente difícil de usar, porque eles dependem de uma interface complexa ou a informação não é de uma forma que é fácil para os usuários de entrada. Mapas Yahoo! fica em torno este problema, fornecendo três campos simples. A maior parte da interface é realmente dedicado à visualização do mapa. O sistema de controle para o mapa é facilmente compreendido e não requer qualquer formulação. Este é um grande exemplo de um aplicativo orientado a gráficos. Este é também um dos poucos exemplos de um design responsivo que você vai encontrar implementado corretamente.
Thesaurus.com: Este fixa com layout do site fornece um bom exemplo de como usar guias de uma forma única. Na verdade, existem vários sites associados a este local único. Ao clicar em uma das guias no topo, você é transportado para outros locais, como Dictionary.com e Dictionary.com Tradutor. Observe o uso de um esquema complexo para este site. O layout de três colunas é dividida em subseções, conforme necessário para transmitir informações adicionais.
ir Converter: Este é um bom exemplo de um design elástica de três colunas. A implementação não é perfeito, mas observe como o conteúdo consome a página inteira não importa quão grande você faz. Você também pode fazer a página relativamente pequeno antes de ver qualquer sinal de uma barra de rolagem porque o conteúdo encolhe para caber no espaço disponível. Esta página também dispõe de um sistema de dois menu (da esquerda usada para acessar funções de conversão e um à direita para acessar recursos do site).
JC Penney: Muitos sites de vendas fornecer camadas de conteúdo. Neste caso, você vê um título de fornecedor no topo, um menu interativo agradável ao lado, as últimas vendas seguinte, o atual caminho de site e, finalmente, as informações de vendas duas colunas. Isto é uma apresentação de largura fixa, de modo que não se adapta bem quando o tamanho das alterações do navegador. O foco está em apresentar as imagens na página da melhor maneira possível.
Petter Hesselberg.com: Diferentemente da maioria dos sites de hoje, este usa posicionamento absoluto eficaz (também quebra as regras usando tabelas para armazenar conteúdo - o site seria melhor se ele usou CSS exclusivamente). Apresentação de dados tabulares pode ser difícil. Este site mostra uma maneira eficaz para exibir dados tabulares que não é muito ocupado ou difícil de ver. Nem sempre é necessário o uso de fronteiras ao exibir dados tabulares - às vezes coloração subtil é tudo que você realmente precisa.
Sourceforge: Em alguns casos, você precisa criar uma configuração para distribuir informação em algum outro formato, como arquivos .ZIP. Este é um exemplo de uma estratégia de distribuição de informação que utiliza técnicas de HTML5 e recursos como listas não ordenadas para menus. O layout de largura fixa não redimensionar muito bem, mas o site em si é bastante flexível. Observe como este site efetivamente usa um layout de duas colunas com cabeçalho e rodapé.
GetHuman: Bases de dados são pesquisados mais frequentemente do que eles estão alterados. Quando o banco de dados é grande, tentando encontrar um pedaço específico de informações torna-se extremamente difícil e frustrante. Este local largura fixa demonstra uma técnica de busca de lista telefónica que pode ser aplicada a outros tipos de locais que tendem a confiar apenas em uma ou duas teclas para exibir uma gama de informações. Observe o uso de efeitos especiais para mostrar qual linha é selecionada. O site também apresenta uma aparência tabular sem realmente usar tabelas (ver o código fonte para ver por si mesmo).
de John Random Thoughts e Discussões: Este site apresenta-lhe um exemplo perfeito do layout de duas colunas usado em um ambiente de blog. Você vê como as entradas na coluna barra lateral à esquerda tornam possível acessar as entradas de conteúdo no painel da direita com maior facilidade. Além disso, este site ajuda a entender os prós e contras da largura fixa layout clássico.