Прости едноколонови оформления на сайтове в CSS
В този урок ще се упражняваме да създаваме прости едноколонови оформления на сайтове. Нека, например, направим такова оформление:
Да започнем реализацията. Всяко оформление
като правило започва с общ div с име
wrapper, съдържащ целия останал сайт:
<div id="wrapper">
</div>
В нашия случай wrapper-ът ще бъде подравнен в центъра на екрана:
#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
Най-удобно е да се задават отстъпи отгоре надолу.
Например, имаме меню и съдържание,
а между тях - празно пространство. Очевидно,
че това пространство може да бъде направено чрез долен
отстъп на менюто, горен отстъп на съдържанието,
или едновременното им влияние. В този случай
е по-добре да се зададе долен отстъп на менюто, а на съдържанието
да се премахне горният padding и margin по подразбиране
за h1.
Съвет 2
Потомците не трябва да оформят отстъп между
родителите. Например, имаме меню.
Долният отстъп на това меню може да бъде оформен
или чрез margin на div с меню, или чрез margin
на връзките. По-добре е да изберете първия вариант, тъй
като връзките не трябва да действат над главата
на родителя.
Съвет 3
Нека между два елемента има отстъп
и в този случай визуално няма разлика,
какво да изберете за отстъп - margin или padding.
В този случай изберете margin, тъй като
точно той трябва да създава отстъпи между
елементите.
