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

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

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

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

css.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:

css.wrapper {
  margin-bottom: 30px;
}

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

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

css* {
  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;
}