Mitme wrapperiga CSS-i maketi skeem

Sageli leidub arenduses makette, milles plokid on taustaga kogu lehe laiuses, kuid nende plokkide sisu on tsentreeritud. Siin on näide sellisest maketist:

Sellises maketis peame looma mitte ühe wrapperi, vaid mitu - iga ploki jaoks. Samal ajal peab wrapperi sees olema veel üks plokk, mis tsentreerib sisu. Samuti peab olema klass, mis vastutab sisu tausta värvimise eest.

Meie maketi üldine skeem näeb välja järgmine:

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

Klassi center kasutatakse plokkide tsentreerimiseks:

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

Klassi line kasutatakse plokkide värvimiseks:

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

Ja klassi wrapper kasutatakse iga ploki vanemana. Kasutame seda vahekauguse määramiseks plokkide vahel:

.wrapper {
	margin-bottom: 30px;
}

Kirjutame nüüd oma ülesande täieliku koodi:

<div class="wrapper">
	<div class="center">
		<h1>Peamine saidi päis</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Meie ettevõte</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Meie hinnad</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Meie kontaktid</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;
}