Академический Документы
Профессиональный Документы
Культура Документы
A propriedade "display"
display: block
<div>
display: inline
display: none
display
Objetivo:
montar um layout assim
Identificar os
elementos estruturais
Dividindo o design
5 elementos
principais:
nav (rea de navegao principal):
A navegao primria para este
website. As imagens vo mudar on
hover (quando o cursor do mouse
estiver sobre elas).
Comprimento: 760px
Altura: 50px
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Meu Site</title>
</head>
<body>
<nav>Main Nav</nav>
<header>Header</header>
<aside>
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
</aside>
<article>
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto.
</article>
<footer>Footer</footer>
</body>
</html>
estilo.css
ID e CLASS
html, body {
margin: 0;
padding: 0;
}
HTML
<div id="page-container">
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
HTML 5
<nav>Menu de Navegao</nav>
<header>Cabealho</header>
<section>
<aside>Barra Lateral</aside>
<article>Contedo</article>
</section>
<footer>Rodap</footer>
section
section {
width: 760px;
margin: auto;
background: red;
}
Remova o fundo vermelho da #page-container, e adicione uma nova regra para #mainnav. Mude o fundo da #main-nav para vermelho para que possamos v-la, e atribua
sua altura para 50px:
article {
width: 760px;
margin: auto;
background: yellow;
}
nav {
background: red;
height: 50px;
}
header {
background: blue;
height: 150px;
}
footer {
background: orange;
height: 66px;
}
Floats
Floats
aside {
float: right;
width: 280px;
background: darkgreen;
}
Adicionando contedo
<article>
Texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto.
</article>
Propriedade: CLEAR
CLEAR: BOTH
Menu <nav>
<nav>
<a href="#">Principal</a>
<a href="#">Sobre</a>
<a href="#">Servios</a>
<a href="#">Portflio</a>
<a href="#">Contato</a>
</nav>
<nav> CSS
Com CSS:
http://www.universogeek.blog.br/2012/10/tutorialaprenda-a-criar-um-menu-dropdown-com-html5-e-css3/
http://www.siteparaempresas.com.br/blog/?p=3408
http://www.betomarques.com/artigos/artigo_021.php
http://msdn.microsoft.com/pt-br/library/jj160310(v=vs.85
).aspx
Com Jquery:
http://www.webmaster.pt/76-menu-jquery-14624.html
Footer
Alterar o rodap:
<nav id=navFooter>
<a href="#">Principal</a> <a href="#">Sobre</a> <a href="#">Servios</a> <a href="#">Portflio</a> <a href="#">Contato</a>
</nav>
Copyright © IF.Com Solues. <br>
Powered by IF.Com Solues.
FRAMEWORKS CSS
http://pt-br.learnlayout.com/frameworks.html
Referncias Bibliogrficas
http://pt-br.learnlayout.com/
http://www.hpmachado.com.br/tutorial-de-css/cr
iando-um-layout-com-css-a-partir-do-zero-parte
-6-12.html