CSS desmistificado
Voltar
Site básico de duas colunas
1) Template básico com topo e 2 colunas e rodape pra vocês, difinido em 750px de largura, servindo para as resoluções mais utilizadas na internet.
É uma ótima solução para estudos
Ai vai os scripts
Arquivo index.html
<!----------------------------------------------------->
<!------------- Criado por Allan dŽEl-Rei ------------->
<!------------- http://www.webmorphos.com ------------->
<!----------------------------------------------------->
<html>
<head>
<title>Seu site</title>
<link href="estilo.css" rel="stylesheet" type="text/css" media="screen">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Allan dŽEl-Rei">
<meta name="Email" content="allan.delrei@hotmail.com">
</head>
<body>
<div id="geral">
<div id="topo">Ponha aki seu logotipo</div>
<div id="coluna1">
<ul id="menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
<div id="centro">Aki normalmente vai o texto</div>
<div id="rodape">feito por mim</div>
</div>
</body>
</html>
Salve o código abaixo na mesma pasta
estilo.css
É uma ótima solução para estudos
Ai vai os scripts
Arquivo index.html
<!----------------------------------------------------->
<!------------- Criado por Allan dŽEl-Rei ------------->
<!------------- http://www.webmorphos.com ------------->
<!----------------------------------------------------->
<html>
<head>
<title>Seu site</title>
<link href="estilo.css" rel="stylesheet" type="text/css" media="screen">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Allan dŽEl-Rei">
<meta name="Email" content="allan.delrei@hotmail.com">
</head>
<body>
<div id="geral">
<div id="topo">Ponha aki seu logotipo</div>
<div id="coluna1">
<ul id="menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
<div id="centro">Aki normalmente vai o texto</div>
<div id="rodape">feito por mim</div>
</div>
</body>
</html>
Salve o código abaixo na mesma pasta
estilo.css
* { margin: 0; padding: 0; color: #000; font: 10px verdana;}
img { border: none; }
body { text-decoration: none; background: white; text-align:center; }
a:link, a:visited, a:hover, a:active { color: #000; text-decoration: none; }
#geral { width: 760px; text-align:left; margin: 0 auto; border: 1px solid black;}
#topo { width: 758px; height: 120px; border-bottom: 1px solid black;}
#centro { margin-left: 122px; padding: 5px; }
#coluna1 { width: 120px; float: left; border-right: 1px solid black;}
#menu li { display: block; list-style-type: none; padding: 4px; }
#rodape { clear: both; text-align: center; border-top: 1px solid black;}
img { border: none; }
body { text-decoration: none; background: white; text-align:center; }
a:link, a:visited, a:hover, a:active { color: #000; text-decoration: none; }
#geral { width: 760px; text-align:left; margin: 0 auto; border: 1px solid black;}
#topo { width: 758px; height: 120px; border-bottom: 1px solid black;}
#centro { margin-left: 122px; padding: 5px; }
#coluna1 { width: 120px; float: left; border-right: 1px solid black;}
#menu li { display: block; list-style-type: none; padding: 4px; }
#rodape { clear: both; text-align: center; border-top: 1px solid black;}
Postado 21/05/2009 15:09 por Jeison Frasson
© 2002-2012 Newsmade - Quase todos os direitos reservados.