Основы HTML и CSS
В этой демостранции мы будем верстать страничку новостного портала Flashnews.
Так страница будет выглядеть в готовом виде.
Удалим изображение готовой страницы и начнём верстать.
Добавим в блок head служебную информацию о странице. В блоке body разметим шапку header, основное содержимое main и подвал footer.
Подключим файл со стилями — style.css В этом файле зададим странице основной цвет фона.
Начнём верстать шапку страницы.
Вставим в блок header картинку-логотип. С помощью атрибута src укажем адрес картинки. Также укажем её размеры и альтернативный текст.
С помощью CSS добавим шапке белый фон и отцентруем содержимое.
Добавим в шапку главный заголовок страницы.
Логотип и заголовок «слиплись». Исправим это.
Создадим новое CSS-правило для тега h1.
Чтобы «разлепить» логотип и заголовок, добавим заголовку отступ слева.
Займёмся подвалом страницы.
Оформим его с помощью CSS, а в разметку добавим абзац с текстом и ещё одну картинку.
Текст в подвале плохо различим. Исправим это с помощью CSS.
Чтобы изменить стиль только одного абзаца на странице, добавим этому абзацу атрибут class.
Создадим правило для класса copyright.
Зададим классу copyright белый цвет текста.
Основное содержимое страницы состоит из трёх частей, или секций: описания сайта, случайной новости и формы подписки.
Начнём верстать описание сайта. Добавим внутрь блока main секцию, а внутрь секции — заголовок второго уровня.
Добавим внутрь секции описание новостного портала.
Обратите внимание, браузер удалил все переносы строк.
Разметим описание сайта как ненумерованный список.
Чтобы стилизовать пункты списка, добавим каждому класс feature.
В CSS добавим правила для этого класса.
У каждого пункта в списке должна быть своя иконка. У первого пункта оставим «галочку», а чтобы изменить иконку у других пунктов, добавим им второй класс.
Добавим на страницу вторую секцию — в ней мы разметим случайную новость. Внутрь секции добавим заголовок второго уровня.
Добавим на страницу новость — это элемент article. Внутрь новости добавим картинку, заголовок третьего уровня и абзац с текстом.
Новости задан класс news-block. В стилевом файле есть правила для этого класса, но они не применяются, потому что закомментированы.
Раскомментируем правила для класса news-block.
Добавим на страницу третью секцию, заголовок и форму подписки на рассылку.
Поле ввода и кнопка «Подписаться» — интерактивные элементы. В поле можно вводить текст, а на кнопку — нажимать.
Добавим форме и всем элементам внутри неё подходящие классы. В стилевой файл добавим CSS-правила для этих классов.
Страница готова!
Выполните специальное задание и закрепите изученный материал.
Перейти к испытанию