O básico de um site baseado em Div: 7 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:40

Este instrutível mostrará os princípios básicos de como construir um site com divs. Porque as tabelas usadas para layout são ruins!: pPara entender isso instrutível, você precisará saber html e css básicos. Se você não entender algo, sinta-se à vontade para perguntar. Minha página inicial pessoal também usa esse tipo de estrutura div.https://www.erwtje.netEnjoy

Etapa 1: Criar os arquivos básicos

Primeiro crie seu arquivo html. Nós vamos adicionar o básico a ele. O arquivo css estará vazio para o arquivo now.html agora contém: test Salve seu arquivo html como algo.html. Você mesmo pode escolher o nome. Seu arquivo css deve ser salvo como.css. Certifique-se de dar a ele o mesmo nome mencionado no arquivo html. Neste caso, "style.css". Agora temos uma página html vazia quando visualizada em nosso navegador.

Etapa 2: edite a etiqueta do corpo para cores básicas, fontes, …

Deixaremos o arquivo html como está e editaremos apenas o arquivo css. Adicione o seguinte código ao seu arquivo css: body {background: # 444444; família da fonte: verdana, arial, sans-serif; cor: # 444444; tamanho da fonte: 12px; margin: 0px;} Com este trecho de código, definiremos todas as propriedades da tag body. Como todo o conteúdo está na tag body, essas configurações afetarão a página inteira. O plano de fundo e a cor da fonte (cor) foram configurados para um cinza escuro. A família de fontes (font-family) foi configurada para verdana. Caso o computador utilizado para a visualização do nosso site não possua a fonte "verdana", ele exibirá o nosso site com a fonte "arial". Você pode adicionar mais fontes à lista. O "sans-serif" é o tipo genérico que será usado quando nenhuma fonte fornecida estiver disponível. O tamanho da fonte (tamanho da fonte) foi definido para 12 pixels. Este é um valor absoluto. Se você quiser editar outros tamanhos de fonte (como cabeçalhos, parágrafos, itens de menu, …) você pode usar a unidade relativa "em" em vez de "px". Dessa forma, se você quiser redimensionar seu site, terá apenas que alterar o tamanho da fonte do corpo. A margem foi definida como 0 px para todos os quatro lados da tag do corpo. Isso é feito para garantir que o site fique no topo da janela.

Etapa 3: adicionando um contêiner com cabeçalho e conteúdo

Agora vamos adicionar o contêiner. Este é simplesmente um div centralizado que conterá todo o nosso site. Nesse contêiner, adicionaremos mais dois divs; um div de conteúdo e um div de cabeçalho. Nosso arquivo html agora terá a seguinte aparência: test Content Header Adicionaremos o seguinte código ao nosso arquivo css: div # container {width: 800px; margem: 0px automático; fundo: #FFFFFF; preenchimento: 0px;} div # content {width: 800px; padding-top: 100px; fundo: amarelo;} div # cabeçalho {largura: 800px; altura: 100px; fundo: azul; posição: absoluta; topo: 0px;}. clearfix: após {conteúdo: "."; display: bloco; altura: 0; limpar ambos; visibilidade: oculto;}. clearfix {display: inline-block;} / * Ocultar do IE Mac / * /. clearfix {display: block;} div # container significa que temos uma tag div com id "container". Vamos adicionar algumas cores e uma "margin: 0px auto;" para garantir que nosso contêiner esteja centralizado na página. Precisamos dar ao conteúdo um preenchimento superior e ao cabeçalho um valor absoluto com um "topo: 0px" para garantir que o cabeçalho seja posicionado acima do outro conteúdo. Não se preocupe as cores feias. É apenas para tornar mais fácil ler as cores e ver os diferentes div. Precisamos desse código clearfix estranho para garantir que nossos divs de navegação e conteúdo (adicionados na próxima etapa) não caiam do div circundante.

Etapa 4: faça duas divs na divisão de conteúdo para navegação e conteúdo real

Agora adicionaremos mais dois divs no div de conteúdo. Um para navegação e outro para o conteúdo real. Entre a tag de conteúdo; você adicionará o novo código:

Conteúdo principal da navegação Adicionaremos algum código css para exibir a navegação e o conteúdo principal divs; div # nav {width: 200px; flutuar: esquerda; fundo: laranja;} div # maincontent {largura: 600px; flutuar: certo; background: pink;} Observe o fato de que esses dois divs são flutuantes. Se não tivéssemos colocado o código clearfix extra na etapa anterior, os divs flutuariam fora do div circundante. Com o método clearfix, vamos garantir que isso não aconteça.

Etapa 5: adicionar algumas divs extras para a estrutura na navegação

Agora adicionaremos alguns divs extras ao div "nav" para criar algum tipo de estrutura em nossa página da web. Altere o seguinte trecho de código:

• Foo
• Barra

Agora vamos adicionar um pedaço de código para definir como o div "navblock" deve ser exibido. Observe que o navblock tem uma classe, não um id. A razão para isso é simples; divs com um id são exibidos apenas uma vez (o bloco de navegação, cabeçalho, rodapé, …). Divs com classes podem ser exibidos mais de uma vez. Aqui, usaremos uma classe. Apenas no caso de querermos adicionar outro bloco de navegação posteriormente em.div.navblock {width: 180px; margem: 5px automático; border: 1px solid red;} Se quisermos adicionar outro bloco de navegação, você apenas terá que adicionar uma nova … estrutura. Seu código agora será semelhante a este;

• Foo
• Barra
• Vaia
• Longe

Etapa 6: adicionar algumas divs extras para a estrutura do conteúdo principal

Agora faremos o mesmo para o div principal. O código agora se parece com este:

Lorem ipsum dolor sit amet,…

Novamente, adicionaremos um pedaço de código ao nosso arquivo css para determinar como o div deve ser exibido: div.contentblock {width: 580px; margem: 5px automático; border: 1px solid white;} Podemos agora adicionar outro bloco de conteúdo adicionando outro "…" no div principal como este;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Etapa 7: torne o site um pouco menos feio

Agora a parte divertida; cores. Agora que temos a estrutura div principal, podemos mudar as cores para algo um pouco menos caótico / feio /… Basta brincar com as cores no arquivo css. Aqui está o arquivo html completo da página exibida na imagem: teste

• Foo
• Barra
• Vaia
• Longe

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Cabeçalho E este é o arquivo css completo: body {background: # 444444; família da fonte: verdana, arial, sans-serif; cor: # 444444; tamanho da fonte: 12px; margin: 0px;} div # container {width: 800px; margem: 0px automático; fundo: #FFFFFF; preenchimento: 0px;} div # content {width: 800px; padding-top: 100px; plano de fundo: #FFFFFF;} div # header {width: 800px; altura: 100px; plano de fundo: # 888888; posição: absoluta; topo: 0px;} div # nav {largura: 200px; flutuar: esquerda; plano de fundo: #FFFFFF;} div # maincontent {width: 600px; flutuar: certo; plano de fundo: #DDDDDD;} div.navblock {width: 180px; margem: 5px automático; borda: 1px sólido #DDDDDD;} div.contentblock {width: 580px; margem: 5px automático; border: 1px solid #FFFFFF;}. clearfix: after {content: "."; display: bloco; altura: 0; limpar ambos; visibilidade: oculto;}. clearfix {display: inline-block;} / * Ocultar do IE Mac / * /. clearfix {display: block;} Então, agora você tem o básico. Claro que ainda há muito a editar, como cores, tamanhos de fonte, um bloco de navegação mais bonito, … Mas este instructables é apenas sobre a estrutura div. Se você gostaria de ver outros instructables relacionados, você sempre pode perguntar. Vou ver se encontro tempo.