Основные термины:
- — {.price-button}, {.price-button:hover} — селекторы классов;
- — {#price-list} — селектор идентификатора в HTML;
- — <body> — HTML тег, является основным блоком всего контента;
- — <font-size>, <color> — CSS свойства для стилизации элементов.
В прошлой статье мы с вами рассматривали создание шапки для страницы. В конце концов у нас получился прекрасный элемент дизайна, который содержал в себе навигационную панель.
В этой статье мы поговорим с вами о создании главного блока страницы для сайта. Она является лицом сайтом и используется для представления продукта. В нашем случае описывает основные преимущества.
В самой первой статье из этой серии уроков мы создали 3 блока section. Нам понадобится самый первый, именно в нем и будет располагаться главный блок.
Как и в предыдущем уроке мы распишем план действий:
- Определиться с контентом и выбрать изображение.
- Задать размеры и фон блока.
- Сделать разметку и стилизацию основного текста.
- Создание и анимация кнопки.
Выбор контента
Наш проект является примером лендинга с онлайн-курсами по веб-программированию. В шапке мы разместили панель навигации и логотип, а в главном блоке будет располагаться блок со списком преимуществ и кнопкой, которая будет осуществлять переход на блок с прайс-листом.
Весь текст будет располагаться в 5 мини-блоках, в которых будут описываться преимущества.
Мы сделали такой список преимуществ:
- Круглосуточное обучение.
- Ежедневные акции.
- Продвижение на биржах фриланса.
- Индивидуальная работа с каждым учеником.
- Гарантированный доход от 500$ в месяц.
Вы можете сделать свой список преимуществ, это не так важно.
Кроме блоков нам также потребуется выбрать картинку. Так как это сайт по обучению программированию, фото требуется выбрать соответствующее:
Кроме этого нам потребуется расположить кнопку, которая будет делать переход на прайс-лист.
Размеры и фон главного блока страницы
Список используемых селекторов:
- Head-section — задается для первого тега <section>.
Для начала, давайте зададим ширину и высоту нашего блока. Мы сделаем так, чтобы наш блок самостоятельно подстраивался под ширину и высоту экрана. Для этого необходимо указывать значение в % и <vh>.
Кроме этого, нам необходимо задать фоновое изображение. Но непростое, а с наложением цвета. Для этого мы будем использовать свойство <background-blend-mode>.
Список используемых свойств:
- {Width: 100%} — Ширина заданного блока.
- {Height: 65vh} — Высота заданного блока.
- {Background} — задает фон страницы. Для использование изображения нужно сделать запись background: url(…).
- {Background-blend-mode} — накладывает цвета на основное изображение.
Итак, у нас готова основа главного блока, но самое трудное ещё впереди.
Теперь нам нужно сделать 5 блоков с преимуществами.
Создание мини-блоков
Заново откройте ваш HTML документ, а затем создайте 5 тегов-контейнеров div. В них будут располагаться преимущества.
В каждом теге <div> нужно создать по 2 тега параграфа(p). В первом будет размещаться картинка (в теге <img>), которая будет являться отображением преимущества, а во втором будет располагаться текст.
Внимание! Обязательно добавьте теги p и создавайте их в том порядке, который описан. Если вы не будете придерживаться правил, то блоки будут отображаться некорректно.
Теперь приступаем к стилизации элементов через CSS.
Список селекторов:
- — .block-plus — используется для каждого блока. Задается в теге <div>.
- — {body} — селектор тега главного тега <body>.
Для начала необходимо задать ширину и высоту каждого блока, а также абсолютное позиционирование. Можно обойтись и без него, но для этого нам необходим bootstrap, либо же тонны лишних строк кода. Зачем тратить время?
Далее нам потребуются свойства перемещения по координате.
Свойства:
- {Width};
- {Height};
- {Position-absolute} — задает абсолютное позиционирование для каждого блока.
- <Top>, <bottom>, <left>, <right> — перемещение элемента по координатам внешнего блока.
- {Margin} — внешние отступы.
Теперь, чтобы наши блоки размещались относительно главного блока, а не всей страницы в целом, нужно написать следующее свойство для тега body — position: relative.
Далее осталось задать размер картинки, цвет и размер шрифта.
Для того, чтобы задать изменение шрифта, мы воспользуемся нашей системой шрифтов. Размер нашего текста будет равен 16 пикселям, чуть больше чем в навигационном меню сайта.
Для того, чтобы присвоить это свойство, задаем класс f16px для каждого блока. Нужно сделать такую запись — .f16px{font-size: 16px;}
Ну теперь остался лишь цвет шрифта, высота линии и размер картинки. Для этого используем следующие свойства:
- {Width}.
- {Height}.
- {Color} — задает цвет текста.
- {Line-height} — задает размер строки с текстом.
Создание анимированной кнопки
Мы разместили все необходимые блоки, осталось создать и стилизовать кнопку. Для этого создаем тег a, под всеми блоками.
Используемые селекторы:
- — .price-button — класс кнопки;
- — .price-button:hover — класс кнопки, активируется при наведении;
- — #price-list — идентификатор блока с прайс-листом.
В коде ищем 3 блок <section>, в котором будет располагаться прайс-лист. Создаем для него идентификатор, под названием price-list. Вводим его в атрибуте нашей кнопки, со знаком решетки вначале.
У нас создана ссылка, но теперь её необходимо разместить по-центру, а также превратить её из ссылки в кнопку. Кроме всего этого, она должна иметь анимацию плавного изменения цвета.
Используемые свойства:
- <Width>
- <Height>
- <Padding> — задает внешние отступы, расширяя элемент.
- <Margin>
- <Text-decoration> — изменяет декорацию элемента. Используется для удаления подчеркивания.
- <Background> — создание фона.
- <Border> — создание рамки.
- <Border-radius> — закругление рамки.
- <Color> — цвет текста.
- <Transition> — задает анимацию трансформирования.
Для изменения шрифта используем систему шрифтов. Для кнопки нам подойдет класс .f16px, поэтому используем его.
Теперь активируем селектор наведения — .price-buttom:hover. В нем мы пропишем свойства изменения объекта.
Используемые свойства:
- Color.
- Background.
- Border.
<body>
<header id="header">
<h1 class="h1">Курсы WEB-Coding</h1>
<nav class="menu">
<ul>
<li class="menu-list"><a href="#" class="menu-button">Главная</a></li>
<li class="menu-list"><a href="#" class="menu-button">О нас</a></li>
<li class="menu-list"><a href="#" class="menu-button">Контакты</a></li>
</ul>
</nav>
</header>
<div id="site">
<section class="head-section">
<div class="block-disc">Круглосуточная связь</div>
<div class="block-disc">Ежедневные акции</div>
<div class="block-disc">Продвижение на биржах фриланса</div>
<div class="block-disc">Индвидуальный подход</div>
<a id="button-disc" href="#block3">Цены</a>
</section>
Заключение
Поздравляем, мы сделали главный блок для нашего одностраничника. Вы можете поэкспериментировать со значениями, настроить его под себя.
Для лучшего ознакомления можете скачать наши исходники и сравнить с тем, что получилось у вас. А в следующей статье мы рассмотрим создание 2-х оставшихся блоков страницы.
Желаем удачи в разработках!