Script - Layout clean com 3 colunas em CSS | André Buzzo
contato@andrebuzzo.com.br | (11) 9-8551-3500 | facebook | skype:andrebuzzowebdesign

Script – Layout clean com 3 colunas em CSS

Publicado na categoria Banco de Scripts com 10.303 visualizações e 6 comentários

Banco de Scripts - Layout clean com 3 colunas - André Buzzo Webdesign
Fala galera!

Abaixo segue o  script do CSS criado para a vídeo aula!

Abraços!

index.php

<div id="wrapper">
<div id="topo"></div>
<div id="menu"></div>
<div id="conteudo">
<div id="conteudo-canais"></div>
<div id="conteudo-central">
<div class="conteudo-site"></div>
<div class="conteudo-site"></div>
</div>
<div id="conteudo-noticias"></div>
</div>
<div id="rodape"></div>
</div>

estilos.css

/* CSS Document */

* body {
margin:0;
padding:0;
text-align:center;
}

#wrapper {
width:100%;
height:auto;
margin:auto;
display:table;
}

#topo {
height:125px;
background:#36f;
}

#menu {
height:25px;
background:#036;
}

#conteudo {
height:auto;
display:table;
background:#ccc;
margin:auto;
width:100%;
}

#conteudo-canais {
width:15%;
height:350px;
background:#060;
float:left;
}

#conteudo-central {
width:70%;
height:350px;
background:#090;
float:left;
}

#conteudo-noticias {
width:15%;
height:350px;
background:#060;
float:left;
}

#rodape	{
height:125px;
background:#666;
border-top:1px solid #000;
clear:both;
}

Voltar à página anterior!

  • leandro

    cade o index.php? so esta o css no site andre.

    • Fala Leandro!

      Vou providenciar o script da index meu velho!

      Obrigado pelo aviso!

  • Hewerton

    Boa noite meu caro: seguinte sobre layout clen voce postou so a parte de css mas o index nao esta junto sera que poderia postar serei grato.

    • Fala Hewerton!

      Coloquei o script do index no Banco de Scripts.

      Abraços meu velho!

  • Luciano

    blz andre,
    muito boa sua video aula,
    queria saber onde baixar aquele teu toolbox de redimensionar a pagina e testar em varias resoluções

    abraços aguardo retorno

    • Fala Luciano!!

      Aquilo é o Webdeveloper Tool da Mozilla meu velho! Você precisa do Firefox instalado para poder usá-lo ok?

      Para baixar o complemento, clique aqui!

      Abraços e obrigado pelo comentário e pela visita!!

      Até mais!