Сегодня мы начнем новый проект в котором основной целью станет применение javascript на веб странице. Но сначала мы подготовим основную структуру. Для этого создайте новую веб страницу и добавьте в нее представленную ниже (на скриншоте) структуру и контент.
- top-section - Основная секция веб страницы
- header - Текстовый компонент основной секции
- bottom-section - Вспомогательная секция. Она нужна, чтобы обеспечить вертикальное перемещение для будущей анимации полосы прокрутки веб страницы.
- scroll-bar - Будущая полоска прокрутки.
Создание стилей
Теперь перейдем в стадию добавления стилей и для этого создайте тег style внутри тега head в html файле. *Мы специально не разделяем стили в отдельный файл, так как их количество сильно ограничено. В будущем мы обязательно раскроем тему структурного разделения ваших веб проектов. Если вы хотите узнать как правильно формировать файловую структуру проектов, а также как использовать препроцессоры и методологию БЭМ, то на курсе веб разработчика от школы программирования для детей КИДКОД мы раскрываем эти темы во время занятий. С промо кодом "дзен" вы получите 25% скидку на первый месяц обучения.
Сначала объявим основные стили для селектора - body:
- margin - Убираем внешний отступ.
- overflow-x - Скрываем горизонтальный бар прокрутки веб страницы.
Теперь переходим к созданию стилей для секций:
- height - Высота секции 100 viewport height (высота видимой части экрана браузера)
Далее объявляем стили для "верхней" секции:
- background-image - Свойство определяющее фоновое изображение блока. Далее вы найдете картинку для фонового изображения.
- background-position - Позиционирование изображения по центру блока.
- background-repeat - Запрещаем "дублирование" изображения.
- background-size - Размер фонового изображения будет равен размеру блока.
- display - Изменяем способ отображения контента внутри блока для отображения его по центру секции.
- justify-content - Выравнивание по центру основной оси (оси-х)
- align-items - Выравнивание по центру пересекающей оси (оси-у)
Фоновое изображение вы можете скачать напрямую от сюда.
Объявляем стили для "нижней" секции. Так как она используется в качестве декоративного элемента, то мы изменим лишь цвет фона.
Осталось определить свойства для текстового блока:
- padding - Внутренний отступ.
- border - Граница блока состоит из 3х параметров: толщина, стиль и цвет границы.
- text-align - Выравнивание текста внутри блока.
- font-family - Изменения шрифта.
- font-size - Размер шрифта.
- font-weight - Жирность шрифта.
- color - Цвет шрифта.
В качестве результата вы увидите две секции - основная с тестом и вспомогательная.
На следующем уроке мы добавим и анимируем с помощью javascript полоску прокрутки веб страницы. А пока вы ждете новый урок, записывайтесь на бесплатное пробное занятие в школу программирования для детей КИДКОД.