Этот практикум позволит вам исследовать несколько различных способов применения абсолютного позиционирования, таких как создание трехколоночного макета, позиционирование элементов внутри баннера и добавление подписей поверх фотографий. В отличие от предыдущего практикума, где вы заключали фрагменты HTML- кода в элементы div и добавляли к ним имена классов, в этих уроках большая часть работы с HTML-кодом уже была выполнена. Вы можете сосредоточиться на оттачивании ваших новых навыков с каскадными таблицами стилей. Файлы текущего практикума находятся в папке 14.
Во-первых, сделаем несколько маленьких, но визуально важных изменений в баннере страницы. Создадим стили для HTML-элементов с примененными к ним классами (классы уже применены).
- Запустите браузер и откройте файл index.html из папки 14. На этой веб-странице вы измените позиции некоторых частей баннера.
- Откройте файл styles.css в редакторе HTML-кода. Файл уже содержит основные стили форматирования. Далее вы добавите собственные стили в нижнюю часть файла. Начните с перемещения небольшого изображения шляпы в левую сторону баннера. Чтобы избавиться от блочного вида, типичного для CSS-верстки, вытесните изображение за пределы баннера, таким образом сделав его похожим на стикер-арт.
- В нижней части файла styles.css добавьте новый стиль:
Изображение находится внутри HTML5-элемента header с классом badge. Только что созданный стиль приводит к тому, что левый верхний угол изображения помещается на 90 пикселов влево и 20 пикселов над верхним краем страницы. Теперь просмотрите страницу, и вы увидите, что на ней есть несколько проблем. Во-первых, изображение «нависает» над краем страницы, а вы хотите, чтобы она располагалась над краем области баннера. Займемся этой проблемой.
header .badge { position: absolute; top: -20px; left: -90px; } - Добавьте перед только что созданным стилем следующий код:
Код стилей, которые управляют основным разделом страницы (как этот стиль header), принято помещать выше кода стилей, форматирующих фрагменты этого раздела (как стиль, который мы создали в шаге 3). Кроме того, группирование стилей для связанных разделов упрощает их поиск, когда нужно проанализировать или отредактировать CSS-код страницы. В этом случае стиль header указывается первым во внутренней таблице стилей, потому что применяется к большему фрагменту HTML-кода. Но вы должны указать стиль header .badge рядом с ним, так как добавляете дополнительные стили на страницу. Стиль header создает новую связь позиционирования для любых вложенных элементов. Другими словами, значение relative функционирует так, что любые другие элементы внутри этого элемента позиционируются относительно краев баннера. Это изменение в позиционировании меняет размещение элемента со стилем, который вы создали в шаге 3. Теперь он смещен на 20 пикселов вверх и на 90 пикселов влево от области баннера. Изображение все еще немного «нависает» над страницей, поэтому нужно добавить небольшие поля для заголовка, чтобы немного его опустить.
header { position: relative; } - Отредактируйте стиль header, добавив строки кода:
Свойство margin-top добавляет пространство над элементом header, достаточное, чтобы он и изображение переместились вниз. Кроме того, отступ добавляет пространство внутри элемента заголовка, чтобы заголовок (и расположенная рядом навигационная панель) не смотрелись слишком скученно. Но теперь появилась другая проблема — заголовок частично скрыт под значком. Перекрытие элементов — один из недостатков абсолютного позиционирования. В данном случае проблему можно решить путем добавления свойства z-index изображения и помещения его позади текста.
header { position: relative; margin-top: 20px; padding: 20px 0 0 10px; } - Добавьте в стиль header .badge свойство z-index: -1;:
Значение -1 приводит к тому, что элемент с абсолютным позиционированием помещается позади своего родительского элемента, в данном случае позади текста. Затем абсолютным позиционированием нужно воспользоваться для смещения панели навигации в правую часть элемента header.
header .badge { position: absolute; top: -20px; left: -90px; z-index: -1; } - Добавьте после стиля header .badge следующий код:
Хотя задать позицию панели навигации можно за счет выравнивания элемента h1, в данном случае намного проще будет воспользоваться абсолютным позиционированием. Здесь создается стиль для HTML-элемента nav, когда он находится в элементе header. Следует помнить, что в шаге 4 вы задали для элемента header относительную позицию, следовательно, любые элементы внутри, например nav, позиционируются относительно него. Поэтому нулевое значение, присвоенное свойству right, в этом стиле приводит к тому, что правый край панели навигации помещается по правому краю баннера.
header nav { position: absolute; right: 0; top: 45px; }
- Откройте файл index.html в редакторе HTML-кода.
На этой странице находится галерея фотографий. HTML-код одного из изображений имеет следующий вид:
В этом примере используются HTML-элементы figure и figcaption. Элемент figure по умолчанию блочный, но, поскольку нужно, чтобы изображения располагались друг рядом с другом, начните с преобразования их в строчные элементы.
<figure> <img src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fimages%2Ffile00079963469.jpg" width="300" height="210" alt="Панама"> <figcaption><strong>Nam libero tempore.</strong> Soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus</figcaption> </figcaption> <figure> - Ниже ранее добавленного стиля header nav укажите еще один стиль:
Код создает селектор потомков, который применяется ко всем элементам figure, сгруппированным внутри контейнера div с классом gallery. Селектор потомков используется потому, что на эту страницу могут добавляться другие элементы figure, которые не являются частью галереи и должны быть отформатированы по-другому. Этот селектор потомков предназначен только для тех элементов figure, которые нас интересуют в данный момент. После преобразования блочного элемента figure в строчный (inline-block) все изображения смогут находиться друг рядом с другом. Значения свойств width и height соответствуют ширине и высоте изображений. То есть элементы figure должны быть достаточного размера для вмещения изображений. Свойство margin добавляет небольшое пространство по периметру изображений, чтобы они не сталкивались друг с другом. И наконец, объявление position: relative устанавливает новую связь позиционирования, чтобы каждую подпись можно было позиционировать относительно связанного с ней изображения. Теперь настал черед позиционирования подписей.
.gallery figure { display: inline-block; width: 300px; height: 210px; margin: 15px; position: relative; } - Ниже только что добавленного стиля разместите следующий код:
Элементы figcaption получают абсолютное позиционирование с использованием всех четырех квадрантов позиционирования: top, bottom, left и right. По существу, подписи будут распространяться на все изображение, но помещаться немного ниже его верхнего края и немного выше нижнего края (фактически на 15 % ниже и выше). Использование всех четырех настроек означает, что вам не нужно переживать за настройку ширины или высоты подписей: вместо этого вы оставляете ее на усмотрение браузера. И наконец, указывается объявление фонового цвета background-color с установкой полупрозрачного фона поверх каждого изображения, что означает, что изображения можно видеть сквозь фон подписей. Теперь займемся форматированием текста.
.gallery figcaption { position: absolute; top: 15%; bottom: 15%; left: 0; right: 0; background-color: rgba(153,153,153,.9); } - Отредактируйте только что созданный стиль, добавив код:
Отступы создают небольшую разрядку для текста, а другие свойства задают шрифт, размер и цвет. Если теперь просмотреть страницу, можно увидеть, что подписи отображаются поверх всех изображений. Далее нужно будет изменить стиль, чтобы подписи появлялись только при нахождении указателя мыши поверх изображения. Начнем с сокрытия подписей.
.gallery figcaption { position: absolute; top: 15%; bottom: 15%; left: 0; right: 0; background-color: rgba(153,153,153,.9); padding: 20px; font-family: Titillium, Arial, sans-serif; font-weight: 400; font-size: .9em; color: white; } - Добавьте в стиль код opacity: 0;:
Присвоение свойству opacity значения 0 полностью скрывает подпись. Для сокрытия подписей можно также воспользоваться объявлением display: none; или visibility: hidden;, но выбранный способ позволяет анимировать значение непрозрачности с помощью CSS-перехода, и этот эффект будет вскоре добавлен. Но сначала нужно добавить состояние :hover, чтобы при помещении указателя мыши над изображением появлялась соответствующая подпись.
.gallery figcaption { position: absolute; top: 15%; bottom: 15%; left: 0; right: 0; background-color: rgba(153,153,153,.9); padding: 20px; font-family: Titillium, Arial, sans-serif; font-weight: 400; font-size: .9em; color: white; opacity: 0; } - Добавьте в таблицу стилей следующий код:
Этот хитрый фрагмент CSS-кода можно расшифровать как «при установке указателя мыши поверх элемента figure (figure:hover) внутри элемента с классом gallery (.gallery) установить уровень непрозрачности подписи равным 1». То есть при установке указателя мыши поверх элемента figure его элемент-потомок figcaption становится видимым. Сохраните страницу и посмотрите, что получилось. Когда указатель мыши помещается поверх изображения, должна появляться подпись. Мы можем анимировать этот эффект, добавив в стиль .gallery figcaption переход.
.gallery figure:hover figcaption { opacity: 1; } - Отредактируйте стиль .gallery figcaption, чтобы он приобрел следующий вид:
Вы добавили свойство transition. Стоит отметить, что Internet Explorer 9 и более ранние версии этого браузера не поддерживают переходы, но здесь это не вызовет проблем, подписи все равно будут появляться в этом браузере. Они будут моментально возникать и исчезать, а не постепенно становиться видимыми и затухать. И наконец, нужно привязать сведения об авторских правах к нижней части окна браузера, используя фиксированное позиционирование.
.gallery figcaption { position: absolute; top: 15%; bottom: 15%; left: 0; right: 0; background-color: rgba(153,153,153,.9); padding: 20px; font-family: Titillium, Arial, sans-serif; font-weight: 400; font-size: .9em; color: white; opacity: 0; transition: opacity .75s ease-out; } - Добавьте в таблицу стилей следующий код:
Как уже говорилось, фиксированное позиционирование позволяет «привязать» элемент к определенной позиции в окне браузера. В данном случае элемент привязывается к нижней части страницы (bottom: 0) и расширяется на всю страницу (благодаря объявлениям left: 0 и right: 0). Последние три объявления добавляют пространство по периметру нижнего колонтитула, а также устанавливают ему черный фон и белый текст.
footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 10px; background-color: black; color: white; } - Сохраните файл styles.css и просмотрите страницу index.html в браузере.