TEMPLATE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="layout.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
</head>
<body>
<div id="geral">
<div id="menu">
<ul>
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="portfolio">Portfolio</a></li>
<li><a href="#" id="quem somos">Quem somos</a></li>
<li><a href="#" id="contatos">Contatos</a></li>
</ul></div>
<div id="banner"> </div>
<div id="conteudo">
<img src="Imagens/Sem Título-2.png" title= "logo" Alt= "logo" />
<p> A rede mundial de computadores, ou Internet, surgiu em plena Guerra Fria. Criada com objetivos militares, seria uma das formas das forças armadas norte-americanas de manter as comunicações em caso de ataques inimigos que destruíssem os meios convencionais de telecomunicações. Nas décadas de 1970 e 1980, além de ser utilizada para fins militares, a Internet também foi um importante meio de comunicação acadêmico. Estudantes e professores universitários, principalmente dos EUA, trocavam idéias, mensagens e descobertas pelas linhas da rede mundial. </p>
<div id="galeria">
<div id="box1" class="box"> </div>
<div id="box2" class="box"> </div>
<div id="box3" class="box"> </div>
</div>
<div id="rodape"> </div>
</div>
</body>
</html>
</body>
</html>
@charset "utf-8";
/* CSS Document */
#geral {width:1024px; height:768px;background:#999;margin:auto;}
#menu {width:1024px; height:90px;background:#000;margin:auto;}
#banner {width:1024px;height:150px;background:url(Imagens/img_trabalho_equipe.jpg);}
#conteudo {width:1024px;height:250px;background:#900;}
#galeria {width:1024px;height:210px;background:#600;float:left;}
.box {width:256px;height:160px;background:#FFF; float:left;margin-left:50px; margin-top:15px}
#rodape{width:1024px;height:71px;background:#000; clear:both}
/*Menu*/
#menu ul {padding:0;margin:0}
#menu li {list-style:none;margin-top:10px;float:left;}
#menu a:link,a:visited {color:#FFF;font:"Lucida Sans Unicode", "Lucida Grande", sans-serif;font-size:20px;background:#666;padding:20px;display:block;margin:11px}
#menu a:visited#home, a:link#home{background:#C93;}
#menu a:hover {background:#09F}
/*Conteudo*/
h1{font-family:"Courier New", Courier, monospace; font-size: 26px; text-align:center; color:#030;}
img {padding:15px;margin:10px}
p{font-family:"Times New Roman", Times, serif; font-size:16px; text-align:justify; color:#000; padding:20px;float:left;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="layout.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
</head>
<body>
<div id="geral">
<div id="menu">
<ul>
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="quemsomos">Quem Somos</a></li>
<li><a href="#" id="galeria">Galeria</a></li>
<li><a href="#" id="portfolio">Portfolio</a></li>
<li><a href="#" id="servicos">Serviços</a></li>
<li><a href="#" id="contatos">Contatos</a></li>
</ul></div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
#geral {width:800px; height:768px;background:#FFF;margin:auto;}
#menu {width:800px;height:70x;background:#000;float:left}
/*Menu*/
#menu ul {padding:0;margin:0}
#menu li {list-style:none;margin-top:10px;float:left;}
#menu a:link,a:visited {color:#FFF;font:"Lucida Sans Unicode", "Lucida Grande", sans-serif;font-size:20px;background:#666;padding:20px;display:block;margin:11px}
#menu a:visited#home, a:link#home{background:#C93;}
#menu a:visited#quemsomos, a:link#quemsomos{background:#CC3;}
#menu a:visited#galeria, a:link#galeria{background:#30F;}
#menu a:visited#portfolio, a:link#portfolio{background:#F30;}
#menu a:visited#servicos, a:link#servicos{background:#93C;}
#menu a:visited#contatos, a:link#contatos{background:#900;}
#menu a:hover#home {background:#006}
#menu a:hover#quemsomos {background:#F00}
#menu a:hover#galeria {background:#F90}
#menu a:hover#portfolio{background:#C90}
#menu a:hover#servicos{background:#F3C}
#menu a:hover#contatos {background:#0F3}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="layout.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
</head>
<body>
<div id="geral">
<div id="menu">
<ul>
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="portfolio">Portfolio</a></li>
<li><a href="#" id="quem somos">Quem somos</a></li>
<li><a href="#" id="contatos">Contatos</a></li>
</ul></div>
<div id="banner"> </div>
<div id="conteudo">
<img src="Imagens/Sem Título-2.png" title= "logo" Alt= "logo" />
<p> A rede mundial de computadores, ou Internet, surgiu em plena Guerra Fria. Criada com objetivos militares, seria uma das formas das forças armadas norte-americanas de manter as comunicações em caso de ataques inimigos que destruíssem os meios convencionais de telecomunicações. Nas décadas de 1970 e 1980, além de ser utilizada para fins militares, a Internet também foi um importante meio de comunicação acadêmico. Estudantes e professores universitários, principalmente dos EUA, trocavam idéias, mensagens e descobertas pelas linhas da rede mundial. </p>
<div id="galeria">
<div id="box1" class="box"> </div>
<div id="box2" class="box"> </div>
<div id="box3" class="box"> </div>
</div>
<div id="rodape"> </div>
</div>
</body>
</html>
</body>
</html>
@charset "utf-8";
/* CSS Document */
#geral {width:1024px; height:768px;background:#999;margin:auto;}
#menu {width:1024px; height:90px;background:#000;margin:auto;}
#banner {width:1024px;height:150px;background:url(Imagens/img_trabalho_equipe.jpg);}
#conteudo {width:1024px;height:250px;background:#900;}
#galeria {width:1024px;height:210px;background:#600;float:left;}
.box {width:256px;height:160px;background:#FFF; float:left;margin-left:50px; margin-top:15px}
#rodape{width:1024px;height:71px;background:#000; clear:both}
/*Menu*/
#menu ul {padding:0;margin:0}
#menu li {list-style:none;margin-top:10px;float:left;}
#menu a:link,a:visited {color:#FFF;font:"Lucida Sans Unicode", "Lucida Grande", sans-serif;font-size:20px;background:#666;padding:20px;display:block;margin:11px}
#menu a:visited#home, a:link#home{background:#C93;}
#menu a:hover {background:#09F}
/*Conteudo*/
h1{font-family:"Courier New", Courier, monospace; font-size: 26px; text-align:center; color:#030;}
img {padding:15px;margin:10px}
p{font-family:"Times New Roman", Times, serif; font-size:16px; text-align:justify; color:#000; padding:20px;float:left;}
MENU COLORIDO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="layout.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
</head>
<body>
<div id="geral">
<div id="menu">
<ul>
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="quemsomos">Quem Somos</a></li>
<li><a href="#" id="galeria">Galeria</a></li>
<li><a href="#" id="portfolio">Portfolio</a></li>
<li><a href="#" id="servicos">Serviços</a></li>
<li><a href="#" id="contatos">Contatos</a></li>
</ul></div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
#geral {width:800px; height:768px;background:#FFF;margin:auto;}
#menu {width:800px;height:70x;background:#000;float:left}
/*Menu*/
#menu ul {padding:0;margin:0}
#menu li {list-style:none;margin-top:10px;float:left;}
#menu a:link,a:visited {color:#FFF;font:"Lucida Sans Unicode", "Lucida Grande", sans-serif;font-size:20px;background:#666;padding:20px;display:block;margin:11px}
#menu a:visited#home, a:link#home{background:#C93;}
#menu a:visited#quemsomos, a:link#quemsomos{background:#CC3;}
#menu a:visited#galeria, a:link#galeria{background:#30F;}
#menu a:visited#portfolio, a:link#portfolio{background:#F30;}
#menu a:visited#servicos, a:link#servicos{background:#93C;}
#menu a:visited#contatos, a:link#contatos{background:#900;}
#menu a:hover#home {background:#006}
#menu a:hover#quemsomos {background:#F00}
#menu a:hover#galeria {background:#F90}
#menu a:hover#portfolio{background:#C90}
#menu a:hover#servicos{background:#F3C}
#menu a:hover#contatos {background:#0F3}
Nenhum comentário:
Postar um comentário