У даному уроці ми практикуватимемося створювати прості одноколонкові макети сайтів. Давайте, наприклад, зробимо такий макет:
Приступимо до реалізації. Кожен макет як
правило починається із спільного діва з назвою
wrapper, що містить весь інший сайт:
<div id="wrapper">
</div>
У нашому випадку враппер буде вирівняний по центу екрану:
#wrapper {
width: 800px;
margin: 50px auto;
}
Також він матиме кордон:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Давайте тепер зробимо основну структуру сторінки. Вона складатиметься з меню та основного вмісту - контенту:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Додамо вміст наших блоків:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
Тепер можна додати стилі нашим блокам. Давайте додамо стиль меню:
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
А тепер додамо стилі елементам контенту:
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Можемо тепер зібрати весь код разом:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Порада 1
Найзручніше давати відступи зверху донизу.
Наприклад, у нас є меню і контент,
а між ними – порожній простір. Очевидно,
що цей простір може бути зроблений нижнім
відступом меню, верхнім відступом контенту,
або їх одночасним впливом. В цьому випадку
краще задати нижній відступ меню, а контенту
прибрати верхній педінг та марджин за замовчуванням
для h1.
Порада 2
Нащадки не повинні формувати відступ між батьками. Наприклад, ми маємо меню. Нижній відступ цього меню можна сформувати або марджином дива з меню, або марджином посилань. Краще вибрати перший варіант, так як посилання не повинні діяти через голову батька.
Порада 3
Нехай між двома елементами є відступ і в даному випадку візуально немає різниці, що вибрати для відступу - марджин чи педінг. У цьому випадку вибирайте марджин, оскільки саме він повинен створювати відступи між елементами.