Skema e paraqitjes së faqes me mbrojtës të shumëfishtë në CSS

Shpesh në zhvillim hasen paraqitje, ku blloqet kanë sfond në të gjithë gjerësinë e faqes, ndërsa përmbajtja e këtyre blloqeve është në qendër. Këtu është një shembull i një paraqitjeje të tillë:

Në një paraqitje të tillë do të na duhet të bëjmë jo një mbrojtës, por disa - për çdo bllok. Në të njëjtën kohë, brenda mbrojtësit duhet të ketë një bllok tjetër që kryen qendërimin e përmbajtjes. Gjithashtu duhet të ketë një klasë që përgjigjet për ngjyrosjen e përmbajtjes me sfond.

Skema e përgjithshme e paraqitjes sonë do të duket si më poshtë:

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

Klasa center do të përdoret për qendërimin e blloqeve:

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

Klasa line do të përdoret për ngjyrosjen e blloqeve:

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

Ndërsa klasa wrapper do të jetë prindi i çdo blloku. Do ta përdorim për të caktuar hapësirën ndërmjet blloqeve:

.wrapper {
	margin-bottom: 30px;
}

Tani le të shkruajmë kodin e plotë të detyrës sonë:

<div class="wrapper">
	<div class="center">
		<h1>Koka kryesore e faqes</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Kompania jonë</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Çmimi ynë</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Kontaktet tona</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;
}