CSS-də çoxlu qablaşdırıcıları olan layout sxemi

Çox vaxt inkişaf etdirilən layoutlarda bloklar bütün səhifə eni boyunca arxa plana malik olur, bu blokların məzmunu isə mərkəzdə yerləşir. Budur belə bir layoutun nümunəsi:

Belə bir layoutda biz bir deyil, bir neçə qablaşdırıcı etməli olacayıq - hər bir blok üçün. Eyni zamanda, qablaşdırıcının içərisində məzmunu mərkəzləşdirən başqa bir blok olmalıdır. Həmçinin, məzmunu arxa plan rəngi ilə boyamaq üçün cavabdeh olan bir sinif olmalıdır.

Layoutumuzun ümumi sxemi aşağıdakı kimi görünəcək:

<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>
<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>

center sinifi blokları mərkəzləşdirmək üçün istifadə olunacaq:

.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}

line sinifi blokları boyamaq üçün istifadə olunacaq:

.wrapper.line {
	background-color: #008040;
	color: white;
}

wrapper sinifi isə hər bir blokun valideyni olacaq. Bloklar arasında boşluq təyin etmək üçün ondan istifadə edək:

.wrapper {
	margin-bottom: 30px;
}

Gəlin indi bizim tapşırığın tam kodunu yazaq:

<div class="wrapper">
	<div class="center">
		<h1>Əsas sayt başlığı</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Bizim şirkət</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Bizim qiymətlər</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Bizim əlaqələr</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

* {
	box-sizing: border-box;
}
body {
	margin: 0;
}

.wrapper {
	margin-bottom: 30px;
}
.wrapper.line {
	background-color: #008040;
	color: white;
}
.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}
.wrapper h1 {
	margin: 0;
	font: 40px "Times New Roman";
}
.wrapper h2 {
	margin: 0;
	font: 25px "Times New Roman";
}
.wrapper p {
	font: 16px/1.4 Arial;
	text-align: justify;
}