Pages

segunda-feira, 11 de julho de 2016

Estrutura básica de uma pagina de site em Html e css

Estrutura básica de uma pagina de site em Html e css.

pagina.html
<!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;
}



Duvidas ou Trabalhos para fazer entre em Contato: marcofernando71@gmail.com

0 comentários:

Postar um comentário