Комментарии, шаг 3 [15/18]
На этом шаге оформляем кнопку ответа на комментарий.
Все приёмы вам уже знакомы: кнопка будет абсолютно спозиционированным элементом с фиксированными размерами. На фон ей зададим иконку. Затем разместим кнопку в правом верхнем углу комментария.
Блок комментария обладает относительным позиционированием, поэтому проблем с размещением иконки не возникнет.
décor/step-15.html
Комментарии, шаг 4 [16/18]
Сейчас подготовимся к позиционированию аватара.
Аватар будет располагаться в левом верхнем углу и частично перекрывать комментарий. Чтобы аватар не перекрыл имя автора и текст, мы увеличим паддинги слева у соответствующих элементов.
Мы увеличиваем отступ справа у автора, т.к. в правом верхнем углу комментария расположена кнопка ответа (спозиционированная абсолютно). Чтобы длинное имя автора не залезло под кнопку, мы и добавляем паддинг, размер которого чуть больше, чем кнопка.
décor/step-16.html
Комментарии, шаг 5 [17/18]
Теперь осталось только задать аватару абсолютное позиционирование и разместить его сверху и слева.
Достаточно необычные комментарии, но способ их создания очень простой.
décor/step-17.html
Испытание: анонс поста [18/18]
Финальное испытание достаточно сложное, поэтому HTML-разметку делать не придется. Но обилие множества декоративных элементов заставит вас попотеть.
Адреса картинок и подсказки есть в комментарии в CSS-коде. А вот используемые цвета:
#ffffff
#7f8c8d серый
#2980b9 синий
#bdc3c7 светло-серый
Курс «Знакомство с HTML5»
Хедер и футер. Теги header и footer [1/19]
В этом вводном курсе мы познакомимся с новыми возможностями HTML5. Основной упор сделаем на новые теги, но коснёмся и других нововведений.
Мы будем пошагово собирать блог известного вам веб-разработчика, используя появившиеся в HTML5 теги и применяя другие новшества. Но сначала несколько важных фактов об HTML5:
HTML5 обратно совместим с HTML4.
Многие модули HTML5 имеют хорошую поддержку во всех текущих браузерах.
TML5 не цельная спецификация, а набор модулей разной степени готовности.
HTML5 с нами надолго.
Это означает, что HTML5 можно использовать уже сейчас. Для этого достаточно задать такой тип документа:
<!DOCTYPE html>
Что вы уже давным-давно делаете в наших курсах.
А теперь пара новых тегов:
<header> — хедер сайта или раздела;
<footer> — футер сайта или раздела.
Да-да, это те самые хедер и футер, которые обычно верстались дивами с классами header или footer. Они были настолько распространены, что для них было решено создать собственные теги.
znakomstvo-html5/zn-html5-1.html
Основное содержание. Тег main [2/19]
Обратите внимание, что мы задали классы для хедера и футера. Сделано это потому, что этих элементов на странице может быть несколько.
Хедер — это не только привычная шапка сайта с логотипом и меню, он может использоваться и как «шапка» какой-нибудь статьи или раздела сайта. Конечно, в случае со статьёй хедер называют не «шапкой», а вводной частью, в которой могут содержаться заголовки, оглавление и так далее.
С футером ситуация аналогичная. В привычном нам понимании это подвал сайта, с копирайтами, контактной информацией и так далее. Но футер может использоваться и в других разделах сайта. Например, в статье в футере можно разместить дополнительную информацию: данные об авторе, дополнительные ссылки и так далее.
А раз теги неуникальные, то и стилизовать их лучше с помощью классов, как мы и сделали.
Если вы не хотите использовать классы для шапки и подвала сайта, то можете использовать селекторы body > header и body > footer. Эти селекторы не повлияют на хедеры и футеры, вложенные более глубоко.
Другое дело новый тег <main>, который обозначает основное содержание сайта и по спецификации может использоваться на странице только один раз. Для его стилизации никакие классы не нужны.
Кстати, загляните в CSS и посмотрите, как сделаны фоны для основных блоков. В хедере и футере мы использовали линейные градиенты, которые детально разберём в более позднем курсе. А фоновую картинку для основного содержания мы задали с помощью так называемого data:URI, закодировав изображение прямо в CSS-коде. Это одна из продвинутых техник оптимизации вёрстки.
znakomstvo-html5/zn-html5-2.html