Olá, desculpem a demora pessoal.
No último post montamos um exemplo de topo e menu no site.Agora vamos montar um exemplo de html e css simples para começar a desenvolver um site por completo.
Como vamos executar:
1. Vamos criar um fundo para o nosso site
2. Vamos centralizar nosso site
3. Montar nosso topo
4. Montar nosso menu lateral
3. Colocar o conteudo
5. Fazer o rodapé
Primeiramente vamos criar um arquivo css.
Vamos definir algumas configurações básicas para ele.
*{
font-family:arial;
font-size:12px;
margin:0;
padding:0;
list-style:none /*Deixar as listas sem stilo*/
}
Pronto, nossa configuração padrão esta ok, vamos agora ao nosso background.
html{
background: #ccc;
}
Então vamos começar a fazer estrutura. Vamos definir uma div que vai emblogar todos os elementos do site.
#geral{
width: 900px;
margin:auto; /* Com esta margem automatica o site vai ficar centralizado ao meio da tela conforme a resolução */
}
Vamos fazer o nosso topo
#topo{
height:70px;
background:#f3f3f3;
border-bottom:1px solid #ccc; /* Colocar uma borda na parte debaixo do topo */
}
Agora vamos definir como o nosso menu lateral vai se comportar.
#menu_lado{
width:200px;
float:left;
background:#f3f3f3;
}
Vamos fazer uma lista dentro desse menu.
ul{
margin:10px;
}
ul li{
display:block;
height:25px;
border-bottom:1px solid #ccc;
}
E agora vamos definir nosso conteudo
#conteudo{
background:#fff;
padding:10px; /*Margin interna do elemento*/
float:left;
width:680px;
min-height:400px;
}
E por fim o rodapé
#rodape{
clear:both;
height:40px;
background:#ddd;
text-align:center;
}
Ok, esta pronto nosso css. Salve o arquivo como estilo.css
Agora vamos começar o nosso html.
<html>
<head>
<titke>Primeiro Site</title>
</head>
<body>
<div id="geral">
<div id="topo"></div>
<div id="menu_lado">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</div>
<div id="conteudo"></div>
<div id="rodape"></div>
</div>
</body>
</html>
Nossa estrutura tem que ficar neste modelo.
Salve o arquivo como index.htm
E execute no nagador. Clique e veja o exemplo.
Abraço pessoal.