10 Sites com grande exemplo layouts css
Uma das melhores maneiras de aprender como usar CSS para executar várias tarefas é ver como outras pessoas estão configurando 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.
Conteúdo
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 faz.) Apresenta uma boa combinação de estilos de fonte e mostra como usar ligações bem para melhorar o conteúdo.
EUA hoje: 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 seções do jornal, que é um excelente uso desse 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 está em 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 a exibir o mapa. O sistema de controle para o mapa é facilmente compreendido e não requer qualquer texto. Este é um grande exemplo de um aplicativo orientado a gráficos. Este também é um dos poucos exemplos de um design responsivo que você 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.
Video: CSS-Tricks Screencast #10: Fixed Width, Fluid Width & Elastic Width
ir Converter: Este é um bom exemplo de um design elástica de três colunas. A implementação não é perfeito, mas observar 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. Esta é uma apresentação de largura fixa, por isso não escala bem quando o tamanho das mudanças 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 efetivamente (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íceis de ver. Nem sempre é necessário o uso de fronteiras ao exibir dados tabulares - às vezes coloração sutil é tudo que você realmente precisa.
Video: Best Html5 Website Templates - top 10 html5 website templates
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é.
Video: HTML and CSS | Website Layout Tutorial
GetHuman: Bases de dados são pesquisados com mais freqüência do que eles estão alterados. Quando o banco de dados é grande, tentando encontrar um pedaço específico de informação torna-se extremamente difícil e frustrante. Este site largura fixa demonstra uma técnica de pesquisa de diretório de telefone que poderia ser aplicada a outros tipos de sites que tendem a confiar em apenas uma ou duas teclas para exibir uma variedade 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 usadas em um ambiente de blog. Você vê como as entradas na coluna barra lateral à esquerda permitem acessar as entradas de conteúdo no painel direito com maior facilidade. Além disso, este site ajuda a entender os prós e contras do layout de largura fixa clássico.