CSSда бир нечта врапперли макетлар схемаси

Ишлаб чиқаришда кенгликка чўзилган фонга эга бўлган, аммо уларнинг контентлари марказда жойлашган блоклар билан макетлар учрайди. Бундай макетнинг мисоли:

Бундай макетда биз бир враппер эмас, балки ҳар бир блок учун бир нечта враппер яратишимиз керак. Шу билан бирга, враппер ичида контентни марказлашни бажарадиган яна бир блок бўлиши керак. Шунингдек, контентнинг фон бўйича бўялиши учун жавоб берувчи синф бўлиши керак.

Бизнинг макетнинг умумий схемаси куйидагича бўлади:

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