<body>
<div class="wrap">
<div class="header"></div>
<div class="block-1"></div>
<div class="block-2"></div>
<div class="block-3"></div>
</div>
<div class="bg-2">
<div class="wrap">
<div class="block-4"></div>
</div>
</div>
<div class="wrap">
<div class="block-5"></div>
</div>
<div class="bg-3">
<div class="wrap">
<div class="block-6"></div>
</div>
</div>
<div class="footer">
<div class="wrap">
<div class="block-7"></div>
</div>
</div>
</body>body {
background-color: #b2faba;
}
/*For wrap*/
.wrap{
width: 960px;/*или сколько там блоки шириной*/
height: 100%;
margin: 0 auto;
position: relative;
}
/* /For wrap*/
.header{
background-color: #000;
}
.block-1{
background-color: #fab2d4;
}/*и далее в том же духе можно и min-height указать в высоту блока но это не советую лучше попиксельная вёрстка*/
.bg-2{
background-color: rgba(0,0,0, .3);
}/* подбери цвет*/
.bg-3{
background-color: rgba(0,0,0, .3);
}/* подбери цвет*/
.footer{
background-color: #000;
}
.wrapper {
width: 1000px; /* Твоя ширина */
margin: 0 auto; /* Выравниваем по центру страницы */
}
Простой
