Vale a pena experimentar um pouco dos layouts CSS3 para ver o que você quer fazer com eles antes de começar a criar um projeto de produção. Copie o código fonte a partir do exemplo no site da Dynamic Drive e colocá-lo em arquivos como você espera usá-lo.

Para os fins deste exemplo, você cria um arquivo HTML5 com o seguinte conteúdo obtido a partir do código HTML mostrado com o exemplo. (Você pode encontrar o código completo para este exemplo na pasta Capítulo 07 da código para download como TwoColumnLayout.HTML.)

CSS fixo layout # 2.1- (fixo-fixo)
840px
Coluna conteúdo:640px
Coluna Esquerda: 200px
Rodapé

O exemplo adiciona um espaço em branco para o código fornecido no site da Dynamic Drive para efeitos de torná-lo mais fácil de ler e também para mostrar como a estrutura é criada usando o

Video: Layout Responsivo Com CSS3 Media Querys

O exemplo remove os scripts Dynamic Drive, porque você não precisa deles para preencher as seções com conteúdo aleatório. No entanto, ele não adicionar notas que mostram o número de pixels usados ​​por padrão para cada uma das seções (o exemplo Dynamic Drive única observa o tamanho da coluna esquerda fixo).

Se você modificar o CSS para este site, você também deve alterar as notas que criam sobre os tamanhos das colunas fixas.

O exemplo também usa um arquivo CSS externo. Observe a adição de um tag na . O CSS para o arquivo externo é idêntico ao do

corpo {margem: 0-padding: 0-linha-altura: 1.5em-} b {tamanho da fonte: 110% -} {em cor: vermelho -} # maincontainer {largura: 840px; / * Largura da principal recipiente * / margin: 0 auto / * recipiente Center na página * /} # topsection {background: # EAEAEA-height: 90px; / * Altura da secção de topo * /} # topsection h1 {margem: 0-padding-top: 15px;} # contentwrapper {float: esquerda; largura: 100% - #} contentcolumn {margem-esquerda: 200 px; / * Definir a margem esquerda para LeftColumnWidth * /} # leftcolumn {float: left; width: 200px; / * Largura da esquerda coluna * / margem-esquerda: -840px; / * Set deixou margem para - (MainContainerWidth) * / background: # C8FC98 -} # rodapé {clear: left; width: 100% -background: black-color: # FFF-text-align: center-padding: 4px 0- .} #footer a {color: # FFFF80 -} innertube {margin: 10px; / * As margens para DIV interior dentro de cada coluna (a fornecer preenchimento) * / margem superior: 0-}

Neste ponto, você pode carregar a página para começar a pensar sobre o que você gostaria de modificar. Aqui está a página como ela aparece sem modificação depois copiá-lo a partir do site e separando o HTML do CSS.

A primeira opção que você vai querer mudar é as cores usadas para os vários objetos. Claro, as cores precisam coincidir com o esquema de cores para o seu site. Os modelos usam representações de cores hexadecimais. Você deve modificá-los para coincidir com aqueles utilizados por outros modelos em seu site (se necessário).

Modelos que contam com a largura das colunas fixas podem exigir ajustes para trabalhar com o resto do seu site. Para alterar a largura total da página, você modificar a propriedade largura do estilo #maincontainer. A largura painel esquerdo é controlado pela propriedade largura do estilo #leftcolumn.

O tamanho painel de conteúdo é a diferença entre a largura de estilo #maincontainer ea largura estilo #leftcolumn. Dynamic Drive tende a usar nomes consistente, então um layout que usa a coluna da direita para as ligações que têm um estilo #rightcolumn que você modificar para alterar a largura da coluna.

Se você alterar o tamanho dos estilos #leftcolumn ou #rightcolumn, então você também precisa mudar a propriedade margem esquerda do estilo #contentcolumn para corresponder.

A altura da secção de topo é de apenas 90px. Isso pode causar um problema quando se trabalha com um cabeçalho maior. Altere a propriedade altura do estilo #topsection para torná-lo compatível com outros cabeçalhos em seu site.

Da mesma forma, o rodapé carece de uma altura real, assim você pode precisar de modificá-lo adicionando uma propriedade altura para o estilo #footer para garantir que cada página do seu site tem a mesma aparência.

Esses modelos também contam com ambos os (Negrito) e (ênfase) Etiquetas. Embora ambas as marcas ainda são suportados pelo HTML5, há uma forte advertência com o tag para usá-lo apenas como um último recurso.

Video: Introduction To CSS Grids

Se você planejar o uso a longo prazo destes modelos, que seria uma boa idéia para substituir o entradas de tag com o ou tags, ou melhor ainda, apenas evitar o uso do e Etiquetas totalmente a favor de formatação CSS.

Estas tags são sobras de dias antes CSS tornou possível adicionar várias formas de ênfase e em negrito usando as propriedades de estilo de fonte e font-weight. O exemplo mostra as tags intactas, mas a recomendação é para removê-los e usar outros tipos de formatação em seu lugar.