В данном уроке мы будем практиковаться создавать простые одноколоночные макеты сайтов. Давайте, например, сделаем вот такой макет:
Приступим к реализации. Каждый макет как
правило начинается с общего дива с названием
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
Пусть между двумя элементами есть отступ и в данном случае визуально нет разницы, что выбрать для отступа - марджин или пэддинг. В этом случае выбирайте марджин, так как именно он должен создавать отступы между элементами.