Этот урок посвящен созданию основной структуры сайта с двумя колонками (левой и правой) и применению CSS-стилей для улучшения внешнего вида. Мы также улучшим стили фиксированного меню и добавим функционал для отображения нескольких статей.
Улучшение стилей фиксированного меню
Улучшим стили фиксированного меню. Установим height: 2000px для элемента <body>, чтобы обеспечить достаточное пространство для прокрутки и корректное прикрепление меню к шапке сайта. Уменьшим высоту класса pizza с 57px до 4px, добавив свойство padding. Для ссылок внутри фиксированного меню уменьшим font-size до 1.3em, а для ссылок внутри класса fix – до 1.2em. Изменим цвет ссылок при наведении на более заметный оттенок.
Структура сайта: две колонки
Создадим CSS-файл mainpage.css для стилизации. В HTML-коде под меню разместим <div> с id="main" для левой колонки и <div> с id="aside" для правой. Внутри main разместим блоки новостей (<div class="news">) и курсов (<div class="courses">), каждый с заголовком <h1>. Добавим <div> с атрибутом style="clear: both;" для очистки float.
Блок статьи
Создадим блок для одной статьи (<div class=»article»>) с изображением (<img>), заголовком (<h3>) и текстом. На сайте будет отображаться 6 статей. Внизу блока добавим кнопку «Посмотреть больше».
Стилизация элементов (mainpage.css)
Определим стили в mainpage.css. Для блока main: ширина 60%, float: left, margin-left: 20px, margin-right: 3%. Для блока aside: ширина 30%, float: right, margin-right: 2%, margin-top: 25px.
Для заголовков с классом heading: font-weight: normal, font-size: 1.4em, font-family, border-bottom: 2px solid #cccccc, padding: 0 5px, color: #666666. Первая буква заголовка (::first-letter) будет другого цвета.
Для блоков article: ширина 40%, float: left, margin-right: 10%, margin-bottom: 20px, border: 1px solid #333, background-color: #fff, box-sizing: border-box, max-width: 350px. Для изображений внутри: width: 100%, height: 100px, border-radius: 5px. Для заголовков (<span>) внутри article: font-family, font-size: 1.3em, ширина 80%, отступы, text-align: center и цвет.
Кнопке «Посмотреть больше» зададим соответствующие стили.
Вывод нескольких статей (JavaScript)
Для вывода шести статей используется цикл for в JavaScript.
Блок курсов
Создадим блок курсов (<div class=»course»>) с заголовком, изображением и информацией о количестве уроков. Добавим стили для блока course, включая ширину, отступы, шрифт, цвет и стили для изображения. Добавим кнопку «Посмотреть все видеокурсы».
Адаптивность
Для адаптивности сайта используются медиазапросы для разных разрешений экрана (1051px, 911px, 600px, 440px и 320px), корректирующие ширины блоков и позиционирование элементов.
В этом уроке мы создали основную структуру сайта с двумя колонками, блоками новостей и курсов, стилизовали элементы и реализовали адаптивность. Дальнейшая работа включает доработку адаптивности и добавление функционала.