CSS-de birnäçe wrapperli düzülme şemasy
Öndürişde gygynda, bloklaryň sahypanyň giňligi boyunça fon bolup, şol bloklaryň mazmuny bolsa ortada ýerleşýän düzülmeler duş gelýär. Mysal üçin:
Beýle düzülmede biz bir wrapper däl-de, her bir blok üçin birnäçe wrapper ýasamaly bolarys. Şol bir wagtyň özünde wrapper-iň içinde ýene-de bir blok bolmaly, ol mazmuny ortada ýerleşdirýär. Şeýle hem mazmunyň fon bilen boýamak üçin jogap berýän klas bolmaly.
Düzülimiziň umumy şemasy aşakdaky ýaly bolmaly:
<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 klassy bloklary ortada ýerleşdirmek
üçin ulanylar:
.center {
width: 800px;
padding: 20px;
margin: 0 auto;
}
line klassy bloklary boýamak
üçin ulanylar:
.wrapper.line {
background-color: #008040;
color: white;
}
wrapper klassy bolsa her bir
blogyň ata-enesi bolar. Bloklar arasyndaky arakesme üçin
ulanylar:
.wrapper {
margin-bottom: 30px;
}
Indi meseläniň doly kodyny ýazalyň:
<div class="wrapper">
<div class="center">
<h1>Main site header</h1>
</div>
</div>
<div class="wrapper line">
<div class="center">
<h2>Our company</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="wrapper">
<div class="center">
<h2>Our price</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="wrapper line">
<div class="center">
<h2>Our contacts</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;
}