Exemplo simples de site com html e css

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.

Colocado em CSS, html a 08 maio 2010. Sem Comentários.