Простыя аднакалонкавыя макеты сайтаў у CSS
У даным уроке мы будзем практыкавацца ствараць простыя аднакалонкавыя макеты сайтаў. Давайце, напрыклад, зробім вось такі макет:
Прыступім да рэалізацыі. Кожны макет як
правіла пачынаецца з агульнага дыва з назвай
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="/by/">link text 1</a>
<a href="/by/" class="active">link text 2</a>
<a href="/by/">link text 3</a>
<a href="/by/">link text 4</a>
<a href="/by/">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="/by/">link text 1</a>
<a href="/by/" class="active">link text 2</a>
<a href="/by/">link text 3</a>
<a href="/by/">link text 4</a>
<a href="/by/">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
Зручней за ўсё даваць водступы зверху ўніз.
Напрыклад, у нас ёсць менюшка і кантэнт,
а паміж імі - пустая прастора. Відавоўдна,
што гэтая прастора можа быць зроблена ніжнім
водступам менюшкі, верхнім водступам кантэнту,
ці іх адначасовым уплывам. У гэтым выпадку
лепш задаць ніжні водступ менюшцы, а кантэнту
забраць верхні padding і margin па змаўчанні
для h1.
Парада 2
Патомкі не павінны фарміраваць водступ паміж
бацькамі. Напрыклад, у нас ёсць менюшка.
Ніжні водступ гэтай менюшкі можна сфарміраваць
альбо margin дыва з меню, альбо margin
спасылак. Лепш выбраць першы варыянт, так
як спасылкі не павінны дзейнічаць праз галаву
бацькі.
Парада 3
Хай паміж двума элементамі ёсць водступ
і ў даным выпадку візуальна няма розніцы,
што выбраць для водступу - margin ці padding.
У гэтым выпадку выбірайце margin, так як
менавіта ён павінен ствараць водступы паміж
элементамі.
