Ir ao conteúdo

Posts recomendados

Postado

Olá pessoal! Preciso de uma dica:

Eu tenho que refazer este site, com o mesmo layout, só modificando o conteúdo. Vocês teriam uma dica de como eu reproduzo este layout no código, com estes menus na horizontal e a imagem de fundo.

 

Obrigada!!!

 

site.jpg

  • Moderador
Postado

@duvidasdeinformatica Não sei por qual motivo você pintou as partes de branco... mas em tese é extremamente simples.

 

Perceba como ela foi estruturada.

Pela imagem pode-se ver que há um header(cabeçalho), um banner(a imagem) e a parte do conteúdo.

Dentro do cabeçalho mais mais 3 estruturas onde tem a barra azul de idiomas, a parte branca com o logo e o título e uma barra azul com o menu.

 

Então, basicamente antes de codificar, você deve analisar e até mesmo desenhar em um papel o esboço do que quer fazer.

Então no código você faria algo PARECIDO como isto:

<section class="header">
  <div class="idiomas"></div>
  <div class="banner-header"></div>
  <div class="nav">
    <nav>Aqui vai o menu</nav>
  </div>
</section>

<section class="banner"></section>

<article class="conteudo">
    Aqui vai o conteúdo 
</article>

Veja que este é só um mero exemplo. Não estruturei mais nada além disso. Mas você pode se basear nesta estrutura.

Basicamente o que fiz foi:

Criar um elemento de sessão para o cabeçalho, dentro dela separei por elementos div.

Outra sessão para o banner, e o article para o conteúdo.

 

PS: o section é usado para separar sessões e o div é usado para agrupar ou separar elementos dentro de uma sessão.

Isso fica semanticamente correto.

Com base nisso, implemente seu código e os estilos CSS.

 

PS2: Para recriar o layout, precisas de todos os recursos que ele possui.. como imagens... fontes (se preciso)... 

  • Curtir 1
Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

LANÇAMENTO!

eletronica2025-popup.jpg


CLIQUE AQUI E BAIXE AGORA MESMO!