CSSda bir nechta o'rash joylari bilan maket sxemasi

Ishlab chiqishda tez-tez uchraydigan maketlar, unda bloklar sahifa bo'ylab fon rangiga ega bo'ladi, ushbu bloklarning tarkibi esa markazda joylashgan bo'ladi. Mana bunday maketga misol:

Bunday maketda biz bitta o'rash joyi emas, balki bir nechtasini - har bir blok uchun qilishimiz kerak bo'ladi. Bunda o'rash joyi ichida yana markazlashtirishni amalga oshiradigan boshqa blok bo'lishi kerak. Shuningdek, tarkibni fon bilan bo'yash uchun javob beradigan sinf bo'lishi kerak.

Bizning maketimizning umumiy sxemasi quyidagicha ko'rinadi:

<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 sinfi bloklarni markazlashtirish uchun ishlatiladi:

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

line sinfi bloklarni bo'yash uchun ishlatiladi:

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

wrapper sinfi esa har bir blokning ota-elementi bo'ladi. Biz undan bloklar orasidagi oraliqni belgilash uchun foydalanamiz:

.wrapper {
	margin-bottom: 30px;
}

Keling, endi bizning vazifamizning to'liq kodini yozamiz:

<div class="wrapper">
	<div class="center">
		<h1>Asosiy sayt sarlavhasi</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Bizning kompaniya</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Bizning narxlar</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Bizning kontaktlar</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;
}