Atenção: Precisando de assessoria nos seus PROJETO entre em contato com a SGP
E-mail: ajudastrabalhosprogramacao@gmail.com
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title> Estruturando o Site </title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div id="geral">
<header id="topo">
<a href="pagina1.html">
<img class="logo" src="img/ITunes_Logo.png" alt="Logotipo" />
</a>
<h1 class="titulo">Estruturando o Site</h1>
</header> <!-- FIM DA HEADER TOPO -->
<nav id="menu">
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Quem somos</a>
<ul>
<li><a href="#">História</a></li>
<li><a href="#">Missão</a></li>
<li><a href="#">Visão</a></li>
</ul>
</li>
<li><a href="#">Clientes</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav> <!-- FIM DA NAV MENU -->
<nav id="menulocal">
MENU LOCAL
</nav><!-- FIM DA NAV MENULOCAL -->
<section id="conteudo">
CONTEUDO
</section> <!-- FIM DA NAV SECTION CONTEUDO -->
<aside id="propaganda">
PROPAGANDA
</aside> <!-- FIM DA ASIDE PROPAGANDA -->
<footer id="rodape">
RODAPÉ
</footer> <!-- FIM DO FOOTER RODAPE -->
</div> <!-- FIM DA DIV GERAL -->
</body>
</html>
estilo.css
/* DOCUMENTO CSS */
body {
margin: 0;
padding:0;
text-align:center;
background-image:url(img/tijolos_vermelhos.png);
font-family:Arial;
font-size:14px
}
#geral {width:990px;
height:auto;
background-color:#ff0;
margin: 0 auto;
padding:5px;
text-align:left;
}
#geral #topo{
height:150px;
background-color:#39f;
margin:0 0 5px 0;
}
#geral #topo .logo{
width:140px;
margin:5px 0 0 20px;
border:none;
outline:none;
float:left;
}
#geral #topo .titulo{
float:left;
margin:30px 0 0 0;
color:#fff;
}
#geral #menu {
height:32px;
background-color:#fff;
margin:0 0 5px 0;
padding:1px 0 0 0;
}
#geral #menu ul{
margin:0;
padding:5px 0 0 0;
list-style:none;
text-align:center;
}
#geral #menu ul li{display:inline; position:relative;}
#geral #menu ul li a{
padding:5px 34px;
font-size:20px;
text-decoration:none;
background:#000;
color:#fff;
}
#geral #menu ul li a:hover{
background:#f00;
color:#000;
border-bottom:2px solid #333;
}
#geral #menu ul li ul{
position:absolute;
top:25px;
display:none;
left:0;
}
#geral #menu ul li:hover ul{display:table-row-group;}
#geral #menu ul li:over ul{display:table-row-group;}
#geral #menu ul li ul li{
display:block;
width:150px;
margin:5px 0 0 0;
}
#geral #menulocal{
width:200px;
height:400px;
background-color:#CD853F;
float:left;
margin:0 5px 5px 0;
}
#geral #conteudo {
width:600px;
height:400px;
background-color:#f60;
float:left;
margin:0 5px 5px 0;
}
#geral #propaganda {
width:180px;
height:400px;
background-color:#f00;
float:left;
}
#geral #rodape {
height:60px;
background-color:#f9f;
clear:both;
}
Atenção: Precisando de ajuda entre em contato com a SGP e solicite uma assessoria com a melhor equipe do mercado no desenvolvimento de trabalhos acadêmicos
E-mail: ajudastrabalhosprogramacao@gmail.com
Facebook: fb.me/ajudaemTrabalhosdeprogramacao
0 comentários:
Postar um comentário