Layout CSS – Flutuação
Com a float propriedade, é fácil flutuar caixas de conteúdo lado a
lado:
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing:
border-box;
}
.box {
float: left;
width: 33.33%;
padding: 50px;
}
.clearfix::after {
content:
"";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Grade de Caixas</h2>
<p>Caixas flutuantes lado a lado:</p>
<div class="clearfix">
<div
class="box" style="background-color:#bbb">
<p>Caixa de
texto 1</p>
</div>
<div
class="box" style="background-color:#ccc">
<p>Caixa de
texto 2</p>
</div>
<div
class="box" style="background-color:#ddd">
<p>Caixa de
texto 3</p>
</div>
</div>
<p><strong>Note:</strong> aqui, usamos o
hack clearfix para cuidar do fluxo do layout. Também usamos a propriedade
box-sizing para garantir que a caixa não quebre devido ao preenchimento extra.
Tente remover este código para ver o efeito. </p>
</body>
</html>
Imagens lado a lado
A grade de caixas também pode ser usada para
exibir imagens lado a lado:
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing:
border-box;
}
.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
.clearfix::after {
content:
"";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Imagens Lado a Lado</h2>
<p>Imagens flutuantes lado a lado:</p>
<div class="clearfix">
<div
class="img-container">
<img
src="img_5terre.jpg" alt="Italy"
style="width:100%">
</div>
<div
class="img-container">
<img
src="img_forest.jpg" alt="Forest"
style="width:100%">
</div>
<div
class="img-container">
<img
src="img_mountains.jpg" alt="Mountains"
style="width:100%">
</div>
</div>
<p>Observe que também usamos o hack clearfix para
cuidar do fluxo de layout e adicionamos a propriedade box-sizing para garantir
que o contêiner da imagem não quebre devido ao preenchimento extra. Tente
remover este código para ver o efeito.</p>
</body>
</html>
Caixas de Altura Igual
é definir uma altura fixa
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing:
border-box;
}
.box {
float: left;
width: 50%;
padding: 50px;
height: 300px;
}
.clearfix::after {
content:
"";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Caixas de Altura Igual</h2>
<p>Caixas flutuantes com alturas iguais:</p>
<div class="clearfix">
<div
class="box" style="background-color:#bbb">
<h2>Caixa
1</h2>
<p>Tem
algum conteúdo,tem algum conteúdo, tem algum conteúdo. </p>
</div>
<div
class="box" style="background-color:#ccc">
<h2>Caixa
2</h2>
<p>Tem
algum conteúdo,tem algum conteúdo, tem algum conteúdo.</p>
<p>Tem
algum conteúdo,tem algum conteúdo, tem algum conteúdo.</p>
<p>Tem
algum conteúdo,tem algum conteúdo, tem algum conteúdo.t</p>
</div>
</div>
<p>Este exemplo não é muito flexível. Não há
problema em usar a altura do CSS se você puder garantir que as caixas sempre
terão a mesma quantidade de conteúdo, mas nem sempre é o caso. Se você tentar o
exemplo acima em um telefone celular (ou redimensionar a janela do navegador),
verá que o conteúdo da segunda caixa será exibido fora da caixa. </p>
<p>Volte ao tutorial e encontre outra solução, se
não for o que você deseja. </p>
</body>
</html>
o Flexbox para criar
caixas flexíveis:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color:
DodgerBlue;
}
.flex-container .box {
background-color:
#f1f1f1;
width: 50%;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Caixas flexíveis</h1>
<div class="flex-container">
<div
class="box">Caixa 1 - Este é um texto para garantir que o conteúdo
fique realmente alto. Este é um texto para garantir que o conteúdo fique
realmente alto.</div>
<div
class="box">Caixa 2 - Minha altura seguirá a Caixa 1.</div>
</div>
<p>Tente redimensionar a janela do navegador para ver o
layout flexível.</p>
<p><strong>Note:</strong> o Flexbox não é compatível com o Internet
Explorer 10 ou versões anteriores.</p>
</body>
</html>
menu de navegação
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type:
none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:
#333;
}
li {
float: left;
}
li a {
display:
inline-block;
color: white;
text-align:
center;
padding: 14px
16px;
text-decoration:
none;
}
li a:hover {
background-color:
#111;
}
.active {
background-color:
red;
}
</style>
</head>
<body>
<ul>
<li><a
href="#home" class="active">Home</a></li>
<li><a
href="#news">Notícia</a></li>
<li><a
href="#contact">Contato</a></li>
<li><a
href="#about">Ajuda</a></li>
</ul>
</body>
</html>
Layout da Web
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing:
border-box;
}
body {
background-color:
white;
}
.header, .footer {
background-color:
grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content:
"";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
.menu ul {
list-style-type:
none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom:
8px;
background-color:
#33b5e5;
color: #ffffff;
}
.menu li:hover {
background-color:
#0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>Página
do web</h1>
</div>
<div class="clearfix">
<div
class="column menu">
<ul>
<li>HOMR</li>
<li>NOTÍCIA</li>
<li>CONTATO</li>
<li>AJUDA</li>
</ul>
</div>
<div
class="column content">
<h1>SITE</h1>
<p>Sem
benvindo prrimeira página do site.</p>
<p>site
novo</p>
</div>
</div>
<div class="footer">
<p>Rodapé</p>
</div>
</body>
</html>