Warning: [Trying to access array offset on value of type null] в файле /var/www/school-php.com/modules/courses/lesson.php на линии 295
Показать $GLOBALS | Показать Debug Backtrace | Показать подсказки

Урок 5: Блочная верстка сайтов

План:

  • Верстка сайтов при помощи блоков
  • Структура сайта: header, nav, main, aside, footer
  • Современная верстка колонок через блоки
  • Псевдоэлементы :after и :before

Дополнение к уроку:

В уроке мы столкнулись с отступами margin и padding. Оба из них отвечают за отступы, но для разных ситуаций. Смотрим:
..предыдущий тег..
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>



0%
Главная БАЗОВЫЙ КУРС ПЕРВЫЙ УРОВЕНЬ программирования ВТОРОЙ УРОВЕНЬ верстки ВТОРОЙ УРОВЕНЬ программирования Начать обучение Запуск проекта Мелкие трюки Делимся практикой трудоустройства Проверь свои знания Задачи по PHP MySQL Блог Отзывы