Вход / Регистрация
Вход
Warning: [Trying to access array offset on value of type null] в файле /var/www/school-php.com/modules/courses/lesson.php на линии 295
Урок 5: Блочная верстка сайтов
План:
- Верстка сайтов при помощи блоков
- Структура сайта: header, nav, main, aside, footer
- Современная верстка колонок через блоки
- Псевдоэлементы :after и :before
Дополнение к уроку:
В уроке мы столкнулись с отступами margin и padding. Оба из них отвечают за отступы, но для разных ситуаций. Смотрим:
Граница актуальна для border, background, cursor и других свойств касающихся именно блока. То есть что фон, что рамки будут идти до границы. Так же это касается и область блока. Смотрим пример:
..предыдущий тег..
MARGIN (внешний отступ до блока)
------ (граница блока)
PADDING (внутренний отступ)
содержание блока
PADDING
------ (граница)
MARGIN
..следующий тег..Граница актуальна для border, background, cursor и других свойств касающихся именно блока. То есть что фон, что рамки будут идти до границы. Так же это касается и область блока. Смотрим пример:
CSS:
.test {
margin: 10px;
padding: 40px;
background-color:red;
border: 5px solid blue;
float:left;
cursor:pointer;
}
.clearfix::after {
display: block;
content: "";
clear: both;
}
HTML:
<div class="clearfix">
<div class="test">Сообщение №1</div>
<div class="test">Сообщение №2</div>
<div class="test">Сообщение №3</div>
</div>
|
|