<!DOCTYPE html>
<html lang="en">
<head>
<title>LP3</title>
<style>
* {
margin: 0;
padding: 0;
}
#top {
width: 100%;
height: 200px;
border: 1px solid red;
position: fixed;
top: 0;
}
#baixo {
width: 100%;
height: 100px;
border: 1px solid blue;
float: left;
position: fixed;
bottom: 0;
}
#main {
margin-top: 200px;
}
#meio {
width: 50%;
float: left;
margin-left: 25%;
}
.meio1 {
height: 150px;
border: 1px solid green;
}
#esquerda {
width: 25%;
float: left;
position: fixed;
top: 200px;
}
.esquerda1 {
height: 200px;
border: 1px solid blue;
}
#direita {
width: 25%;
float: right;
position: fixed;
top: 200px;
left: 75%;
}
.direita1 {
height: 150px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="top">
Top
</div>
<div id="main">
<div id="esquerda">
<div class="esquerda1">
Left1
</div>
<div class="esquerda1">
Left2
</div>
</div>
<div id="meio">
<div class="meio1">
Center1
</div>
<div class="meio1">
Center2
</div>
<div class="meio1">
Center3
</div>
<div class="meio1">
Center4
</div>
<div class="meio1">
Center5
</div>
<div class="meio1">
Center6
</div>
<div class="meio1">
Center7
</div>
<div class="meio1">
Center8
</div>
<div class="meio1">
Center9
</div>
<div class="meio1">
Center10
</div>
</div>
<div id="direita">
<div class="direita1">
Right1
</div>
<div class="direita1">
Right2
</div>
<div class="direita1">
Right3
</div>
</div>
</div>
<div id="baixo">
Footer
</div>
</body>
</html>
Créditos para: Luis Fernando - IFMT
Nenhum comentário:
Postar um comentário