CSS-и чанд wrapper дошта схемаҳои макет

Дар барномасозӣ аксар вақт макетҳое вомехӯранд, ки блокҳо фоне ба паҳнои саҳифа доранд, ва мундариҷаи ин блокҳо дар марқаз қарор доранд. Ин як намунаи чунин макет аст:

Дар чунин макет ба мо на як wrapper, балки чандто лозим меояд - барои ҳар як блок. Дар ҳоле ки дар дохили wrapper бояд яке дигар блок бошад, ки мундариҷаро дар марказ ҷойгир мекунад. Инчунин бояд як классе бошад, ки барои ранг кардани мундариҷа бо фон масъул аст.

Схемаи умумии макети мо ба тариқи зерин ба назар мерасад:

<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 истифода бурда мешавад барои марказ кардани блокҳо:

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

Класси line истифода бурда мешавад барои ранг кардани блокҳо:

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

Ва класси wrapper волиди ҳар як блок хоҳад буд. Онро барои таъин кардани фосила байни блокҳо истифода мебарем:

.wrapper {
	margin-bottom: 30px;
}

Биёед акнун коди комили вазифаи худро нависем:

<div class="wrapper">
	<div class="center">
		<h1>Сарлавҳаи асосии сомона</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Ширкати мо</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Нархи мо</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Контактҳои мо</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;
}