ПРАКТИЧЕСКОЕ ЗАНЯТИЕ 6.
Цель: Научить как с помощью плавающих элементов производить верстку страниц.
ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:
1. Перейти по ссылке https://basicweb.ru/css/css_plavayushchie_elementy.php, ознакомиться с теоретической частью.
2. Создать папку под именем «Фамилия_ПЗ6_№гр._». Все файлы, которые будут созданы в процессе работы, сохранять в эту папку.
3. В эту папку скопировать 4 картинки из папки «ПЗ6_ДО».
ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:
1. Открыть блокнот вставить туда ниже приведенную последовательность кода выделенный серым цветом:
<html>
<head>
<title>Поведение границ и фона с плавающим элементом</title>
<style>
div {
border: 3px, solid green; /* сплошная граница размером 3 пикселя зеленого цвета */
background-color: rgba(0,255,0,.3); /* устанавливаем цвет заднего фона */
}
img {
width: 30%;/* ширина 30% от родительского элемента */
}
.floatRight {
float: right; /* элемент становится плавающим и смещается по правому краю */
}
</div>
</style>
</head>
<body>
<div>
<img src = "kot.jpg" alt = "кот для примера" class = "floatRight">
- Котик-котик обормотик, Ты зачем описал ботик. Мама ботик обувала, мама котика ругала. </div> </body></html>
2. Сохранить в свою папку под именем «Котик1.htm».
3. Открыть в браузере, получить результат:
Если картинка (kot) у вас не отображается на странице, значит вы её не скопировали в свою папку. Картинки должны находится в одной папке с файлом.
В этом примере мы установили для элемента < div > границы и фоновые значения, внутри элемента разместили изображение, которое занимает 30% от его ширины и указали, что изображение является плавающим, сместив его к правому краю (float: right). Текстовое содержимое этого блока обтекает изображение с левой стороны, но при этом границы и фон блока отображаются под этим изображением.
В предыдущей статье этого учебника https://basicweb.ru/css/css_razmeri_elementov.php мы с вами уже рассматривали свойство overflow, которое предназначено для управления переполнением элементов. Что касается нашего документа, то для того, чтобы фон и границы блока отображались после изображения, а не за ним, необходимо применить свойство overflow со значением auto, или hidden. Это заставит браузер заново рассчитать высоту блока и изменить ее таким образом, чтобы включить и наш плавающий элемент. То есть свойство overflow отменит отображение фона и границ под плавающим элементом:
4. Открыть блокнот вставить туда ниже приведенную последовательность кода выделенный серым цветом:
<html>
<head>
<title>Использование автоматического переполнения с плавающими элементами</title>
<style>
div {
border: 3px solid green; /* сплошная граница размером 3 пикселя зеленого цвета */
background-color: rgba(0,255,0,.3); /* устанавливаем цвет заднего фона */
}
img {
width: 30%; /* ширина 30% от родительского элемента */
}
.floatRight {
float: right; /* элемент становится плавающим и смещается по правому краю */
}
.fixContainer {
overflow: auto; /* переполнение будет производиться в автоматическом режиме */
}
</style>
</head>
<body>
<div class = "fixContainer">
<img src = "kot.jpg" alt = "кот для примера" class = "floatRight">
- Котик-котик обормотик, Ты зачем описал ботик. Мама ботик обувала, мама котика ругала.
</div>
</body>
</html>
5. Сохранить в свою папку под именем «Котик2.htm».
6. Открыть в браузере, получить результат:
При работе с плавающими элементами вам рано или поздно потребуется, чтобы определенный элемент не взаимодействовал с плавающими элементами и существующие правила обтекания не распространялись на него. Например, мы составляем какой-то список из блоков, которые содержат в себе изображение и поясняющий текст, при этом изображения являются плавающими и смещаются к правому краю (float: right).
При работе с плавающими элементами вам рано или поздно потребуется, чтобы определенный элемент не взаимодействовал с плавающими элементами и существующие правила обтекания не распространялись на него. Чтобы решить нашу проблему, необходимо воспользоваться CSS свойством clear, которое определяет с какой стороны текущего элемента не допускаются плавающие элементы. Это свойство имеет следующие значения:
| Значение | Описание |
| none | Разрешает наличие плавающих элементов с обоих сторон элемента. Значение по умолчанию. |
| left | Плавающие элементы не разрешены с левой стороны. |
| right | Плавающие элементы не разрешены с правой стороны. |
| both | Плавающие элементы не разрешены с обоих сторон элемента (как с левой, так и с правой стороны). |
Давайте рассмотрим применение этого свойства на нашем примере.
7. Открыть блокнот вставить туда ниже приведенную последовательность кода выделенный серым цветом:
<html>
<head>
<title>Пример использования свойства clear</title>
<style>
div {
background-color: rgba(0,255,0,.3); /* устанавливаем цвет заднего фона */
clear: right; /* плавающие элементы не разрешены с правой стороны */
}
img {
width: 25%; /* ширина 25% от родительского элемента */
}
.floatRight {
float: right; /* элемент становится плавающим и смещается по правому кра */
margin-bottom: 15px; /* устанавливаем внешние отступы снизу */
}
</style>
</head>
<body>
<div>
<img src = "kot.jpg" alt = "кот для примера" class = "floatRight">
- Котик-котик обормотик, Ты зачем описал ботик. Мама ботик обувала, мама котика ругала.
</div>
<div>
<img src = "kot2.jpg" alt = "кот для примера" class = "floatRight">
- Котик-котик обормотик, Ты зачем описал ботик. Мама ботик обувала, мама котика ругала.
</div>
</body>
</html>
8. Сохранить в свою папку под именем «Котик3.htm».
9. Открыть в браузере, получить результат:
В данном примере мы запретили для блоков <div> плавающие элементы с правой стороны (отменили правила обтекания), что позволило нам выстроить блоки один за одним. Кроме того, для тематического разрыва мы указали для изображений внешние отступы снизу равными 15px.
Верстка главной страницы сайта плавающими элементами:
Чтобы закрепить полученные знания и рассмотреть еще некоторые приемы верстки, давайте рассмотрим следующий пример, который формирует простую разметку главной страницы для сайта:
10. Открыть блокнот вставить туда ниже приведенную последовательность кода выделенный серым цветом:
<html>
<head>
<title>Пример верстки сайта плавающими элементами</title>
<style>
header {
background-color: #777; /* устанавливаем цвет заднего фона */
}
header ul {
list-style-type: none; /* убираем маркеры */
margin: 0; /* устанавливаем внешние отступы для всех сторон */
padding: 0; /* устанавливаем внутренние отступы для всех сторон */
overflow: auto; /* переполнение будет производиться в автоматическом */
}
header li {
float: left; /* элемент становится плавающим и смещается по левому краю */
}
header li a {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (строчным элементам не задать отступы) */
color: orange; /* устанавливаем цвет элемента */
padding: 10px; /* устанавливаем внутренние отступы для всех сторон */
text-decoration: none; /* убираем подчеркивание */
}
header li a:hover {
background-color: #888; /* устанавливаем цвет заднего фона при наведении */
}
footer {
background-color: #888; /* устанавливаем цвет заднего фона */
clear: both; /* плавающие элементы не разрешены с обеих сторон */
min-height: 30px; /* устанавливаем минимальную высоту элемента */
}
nav {
margin-top: 2%; /* устанавливаем внешние отступы сверху */
float: left; /* элемент становится плавающим и смещается по левому краю */
width: 15%; /* ширина 15% от родительского элемента */
border: 1px solid #888; /* сплошная граница размером 1 пиксель светло-серого цвета */
}
nav ul {
list-style-type: none; /* убираем маркеры */
padding: 0; /* устанавливаем внутренние отступы для всех сторон */
}
nav li a {
color: orange; /* устанавливаем цвет элемента */
padding: 10px; /* устанавливаем внутренние отступы для всех сторон */
text-decoration: none; /* убираем подчеркивание */
}
nav li a:hover {
color: #777; /* устанавливаем цвет элемента при наведении */
}
section {
margin: 2% 0 0 16%; /* устанавливаем внешние отступы для всех сторон */
border: 1px solid #888; /* сплошная граница размером 1 пиксель светло-серого цвета */
}
img {
width: 13%; /* ширина 13% от родительского элемента */
margin: 2% 10%; /* устанавливаем внешние отступы для всех сторон */
float: left; /* элемент становится плавающим и смещается по левому краю */
border: 2px solid orange; /* сплошная граница размером 2 пикселz оранжевого цвета */
}
.clearCats {
clear: left; /* плавающие элементы не разрешены с левой стороны */
}
</style>
</head>
<body>
<header> /* шапка сайта начало */
<ul>
<li><a href = "#">Домой</a>|</li>
<li><a href = "#">Раздел 1</a>|</li>
<li><a href = "#">Раздел 2</a>|</li>
<li><a href = "#">Раздел 3</a></li>
</ul>
</header> /* шапка сайта конец */
<nav> /* дополнительная навигация начало */
<ul>
<li><a href = "#">Домой</a></li>
<li><a href = "#">Раздел 1</a></li>
<li><a href = "#">Раздел 2</a></li>
<li><a href = "#">Раздел 3</a></li>
</ul>
</nav> /* дополнительная навигация конец */
<section>
Бывают такие моменты, когда с мужем сидим спокойненько, смотрим киношки, а наш котенок ни с того ни с сего начинает лупиться в одну точку на потолке. И хоть зови, хоть не зови его — ему всё равно, смотрит только туда. А так как мы с мужем трусливые люди, то первая мысль о паранормальных бабайках. Тогда я, собравшись с силами, беру киску в руки, как Рафики новорожденного Симбу, и произношу: «О, потолочная бабайка, прими в дар эту скромную жертву». Как ни странно, но после этого ритуала становится легче."
</section>
<section>
Я счастливая хозяйка двух не очень послушных котят. Давно уже привыкла к их закидонам, но самый пик происходит, когда их приходится мыть. Мало того, что они после душа выглядят стрёмно, так ещё и перестают друг друга признавать: шипят, пытаются драться, пугаются друг друга. И так после каждой водной процедуры приходится мирить давно знакомых друг с другом котят.
</section>
<section>
У меня дома живут три котенка, которых зовут Атос, Портос и Арамис. Я решила их так назвать из-за того, что очень люблю эту книгу. Первый котенок — Атос, он обожает пить валерьянку и везде её найдёт, где бы она ни была. Котенок Портос любит поесть и звон монеток. А котенок Арамис постоянно пытается найти себе кошечку, рассказывает «стихи», и если в чём-то ему отказать, будет стоять в углу и ничего не есть.
</section>
<div class = "clearCats">
<img src = "kot.jpg" alt = "кот для примера">
<img src = "kot2.jpg" alt = "кот для примера">
<img src = "kot3.jpg" alt = "кот для примера">
</div> /* основное содержимое конец */
<footer>2016, Все права принадлежат коту и сайту basicweb.ru.</footer> /* подвал сайта */
</body>
</html>
11. Сохранить в свою папку под именем «Котик4.htm».
12. Открыть в браузере, получить результат:
И так по порядку, что мы сделали в этом примере:
Для шапки сайта (HTML тег <header>html5) мы установили следующие свойства:
Цвет заднего фона элемента (#777).
Для маркированного списка (HTML тег <ul>) убрали маркеры (list-style-type: none), установили внутренние и внешние отступы равными нулю, для того, чтобы панель отображалась со всеми плавающими элементами установили переполнение в автоматическом режиме (overflow: auto). Эту важную особенность работы с плавающими элементами мы рассматривали выше (запрещали отображение границ и фон блока под изображением).
Указали, что элементы маркированного списка (<li>) будут плавающими и сместили их по левому краю.
Определили, что ссылки будут как блочно-строчные элементы, для того, чтобы задать им размеры (display: inline-block). Указали, что цвет ссылок будет оранжевый, внутренние отступы со всех сторон будут 10px и убрали нижнее подчеркивание (text-decoration: none). При наведении на ссылку курсором мыши задний фон элемента изменяется на светло-серый #888 (псевдокласс:hover).
Для подвала сайта (HTML тег <footer>html5) мы установили следующие свойства:
Цвет заднего фона элемента (#777).
Минимальную высоту элемента (min-height: 30px).
Указали, что плавающие элементы не разрешены с обеих сторон элемента (как с левой, так и с правой стороны). Это сделано для того, чтобы элемент не мог подняться (в нашем случае достаточно и значения left).
Разместили дополнительную навигацию с правой стороны HTML элементом <nav>html5 и установили для него следующие значения:
Внешний отступ сверху равный 2%.
Указали, что элемент является плавающим и сместили по левому краю.
Определили ширину для элемента равной 15% от родительского элемента (в нашем случае <body>).
Задали вокруг элемента сплошную границу размером 1px светло-серого цвета (#888).
Для маркированного списка (HTML тег <ul>) убрали маркеры (list-style-type: none), установили внешние отступы равными нулю.
Указали, что цвет ссылок будет оранжевый, внутренние отступы со всех сторон будут 10px и указали, что нижнее подчеркивание отсутствует (text-decoration: none). При наведении на ссылку курсором мыши цвет ссылок изменяется с оранжевого на серый #777 (псевдокласс:hover).
Предполагается, что информационное содержимое будет размещаться в элементах <section>html5, для которых мы установили следующие значения:
Интересный момент здесь заключается в том, что мы указываем внешние отступы слева 16% для элемента. У элемента <nav>html5, напомню, ширина установлена 15%, то есть элемент будет обтекать навигационную панель, но при этом будет выдерживаться отступ 16%, формируя ровный столбец при наполнении, верхний отступ установлен 2%, для других сторон 0 (margin: 2% 0 0 16%).
Установили вокруг элемента сплошную границу размером 1px светло-серого цвета (#888).
Элементы <img> (изображения) мы поместили в отдельный блок с классом.clearCats, для которого установили, что плавающие элементы не разрешены с левой стороны, тем самым данный блок не будет обтекать навигационную панель (отменяем правила обтекания).
Для самих изображений (HTML элемент <img>) мы установили следующие свойства:
Определили ширину для элементов равной 13% от родительского элемента.
Внешние отступы для верха и низа элемента 2%, для левой и правой стороны 10% (margin: 2% 10%;).
Определили, что изображения будут плавающими и сместили по левому краю.
Добавили вокруг изображений границу оранжевого цвета размером 1px.
ЗАДАНИЕ ДЛЯ САМОСТОЯТЕЛЬНОГО ВЫПОЛНЕНИЯ:
Файл «Котик4 » откройте с помощью блокнота. Замените фотографии котят на любые другие. Текст с историями про котят замените на другой текст. Попробуйте отформатировать текст (изменить размер, цвет). Сохраните файл под именем «Фамилия_Самостоятельная работа ».
Заархивируйте свою папку и пришлите преподавателю на проверку. У вас в папке должно быть 5 файлов и 6 картинок.