klieve
@klieve
код, рисование, игры

Как можно сверстать страницу div-ами?

Как можно сверстать вот эту страницу div-ами?
  • Вопрос задан
  • 3286 просмотров
Пригласить эксперта
Ответы на вопрос 3
html

<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>


css

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;
}
Ответ написан
ErickSkrauch
@ErickSkrauch
Вам нужно почитать про вёрстку на css, если вы задаёте такой вопрос.

Если описывать в кратце, то для ужатого блока (те, что не зелёные) необходимо описать класс wrapper и примерно так его заполнить:
.wrapper {
    width: 1000px;  /* Твоя ширина */
    margin: 0 auto; /* Выравниваем по центру страницы */
}


Ну а дальше уже внутри него верстать остальную структуру. При чём, судя по макету, враппер нужно будет применять для каждого блока отдельно, ибо есть блоки в 100% ширины, которые не должны в себе содержать этого класса.
Ответ написан
Можно и даже нужно! :)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы