Схема на оформленията с множество обвивки в 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>Основно заглавие на сайта</h1>
</div>
</div>
<div class="wrapper line">
<div class="center">
<h2>Нашата компания</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="wrapper">
<div class="center">
<h2>Нашите цени</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="wrapper line">
<div class="center">
<h2>Нашите контакти</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;
}