Презентация Мова HTML. Створення галереї засобами CSS онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Мова HTML. Створення галереї засобами CSS абсолютно бесплатно. Урок-презентация на эту тему содержит всего 39 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:39 слайдов
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:5.92 MB
- Просмотров:136
- Скачиваний:0
- Автор:неизвестен
Слайды и текст к этой презентации:
№1 слайд
Содержание слайда: Мова HTML.
Створення галереї засобами CSS.
№2 слайд
Содержание слайда: Створення галереї
Вставляти великі зображення на сайт - це не практично, так як це займає досить багато місця, а якщо занадто маленькі, то не буде зрозуміло, що на зображенні, тому доводиться йти на компроміс.
На занятті ми розглянемо, як створити просте збільшення зображень за допомогою CSS.
№3 слайд
Содержание слайда: Створення галереї
Необхідно, щоб після натискання на зображення воно збільшувалося, крім цього додамо кнопку закриття зображення
№4 слайд
Содержание слайда: Галерея
№5 слайд
Содержание слайда: Крок 1. Мова HTML
СТРУКТУРА:
Є загальний контейнер, який містить всю структуру, в середину цього контейнера поміщені дочірні елементи, як зображення і класи закриття розгорнутих зображень.
Крім цього ми використовуємо клас: target який забезпечить працездатність вікон.
№6 слайд
Содержание слайда: Крок 1. Мова HTML
№7 слайд
Содержание слайда: Крок 2. CSS Базові стилі
№8 слайд
Содержание слайда: position
static
№9 слайд
Содержание слайда: position
№10 слайд
Содержание слайда: Position
fixed
Фіксоване позиціювання елемента щодо вікна браузера таке, що він завжди займає одне і теж місце навіть при прокручуванні сторінки, немов він приклеєний до екрану. Також як і для relative, додаткові властивості top, right, bottom, і left для даного позиціонування працюватимуть.
№11 слайд
Содержание слайда: Position
fixed
fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}
Фіксований елемент не залишає за собою вільний простір на сторінці, де він був розташований.
У мобільних браузерів
досить хитка
підтримка фіксованого
позиціонування.
№12 слайд
Содержание слайда: Position
absolute
absolute поводиться як fixed за винятком того, що позиціювання відраховується щодо найближчого розташованого родича, а не щодо вікна браузера.
Якщо елемент абсолютно позиціонується і не має родича, то він використовує тіло документа і продовжує рухатись разом з усією сторінкою при скролінгу.
Пам'ятайте, що “позиційований" елемент - це елемент з будь-яким значенням властивості position крім значення static.
№13 слайд
Содержание слайда: Position
absolute
№14 слайд
Содержание слайда: Position
absolute
№15 слайд
Содержание слайда: position у дії
№16 слайд
Содержание слайда: position у дії
№17 слайд
Содержание слайда: float (поплавок)
CSS властивість використовується для розмітки.
Поплавок призначений для обгортання тексту навколо зображень, наприклад:
img {
float: right;
margin: 0 0 1em 1em;
}
№18 слайд
Содержание слайда: float (поплавок)
№19 слайд
Содержание слайда: Приклад float шаблону
nav
{
float: left; width: 200px;
}
section
{
margin-left: 200px;
}
№20 слайд
Содержание слайда: Приклад float шаблону
№21 слайд
Содержание слайда: z-index
Якщо в одному місці сторінки виявляються кілька «абсолютних» блоків, то вони перекривають один одного. За замовчуванням вище виявляється той блок, який розташований далі в коді сторінки.
За допомогою CSS-властивості z-index можна керувати тим, як перекриваються блоки. Значенням властивості може бути ціле число. Чим більше z-index, тим вище розташовується блок.
Властивість z-index працює для елементів, у яких position задана як absolute, fixed і relative.
Таким чином, «відносний» елемент може перекривати «абсолютний».
№22 слайд
Содержание слайда: z-index
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>z-index или кто кого перекроет</title> </head>
<body>
<div class="block block-1">Блок 1</div>
<div class="block block-2">Блок 2</div>
<div class="block block-3">Блок 3</div>
</body></html>
№23 слайд
Содержание слайда: z-index
body { margin: 0; padding: 20px;}
.block { padding: 10px; text-align: right; color: white; opacity: 0.8;}
.block-1 { width: 350px; height: 350px; background: #3a78a1;}
.block-2 { position: absolute; top: 20px; width: 250px; height: 250px; background: #e74c3c;}.
block-3 { position: absolute; top: 20px; width: 150px; height: 150px; background: #27ae60;}
№24 слайд
Содержание слайда: z-index
№25 слайд
Содержание слайда: z-index
№26 слайд
Содержание слайда: Крок 2. CSS Базові стилі
№27 слайд
Содержание слайда: Значення inherit
№28 слайд
Содержание слайда: Значення inherit
З англ. перекладається як “наслідувати”. Властивості, яким буде присвоєно це значення, будуть наслідувати значення тієї-ж властивості його родича.
<div style = "border: 1px solid # 999; padding: 10px;">
<div style = "border: inherit;"> Дочірній блок </ div>
</ div>
№29 слайд
Содержание слайда: Властивість box-shadow
№30 слайд
Содержание слайда: Властивість box-shadow
№31 слайд
Содержание слайда: Властивість box-shadow
№32 слайд
Содержание слайда: Властивість box-shadow
№33 слайд
Содержание слайда: Властивість box-shadow
№34 слайд
Содержание слайда: Крок 2. CSS
Встановили <span> елементи display: none, для того, щоб зробити кнопку закриття, яка з'являється, коли користувач натискає на зображення.
№35 слайд
Содержание слайда: Крок 2. CSS
. image-lightbox span {
display: none;
}
.image-lightbox .expand {
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 4000;
background: rgba(0,0,0,0); /* Фиксы для IE */
left: 0;
}
№36 слайд
Содержание слайда: .image-lightbox .close {
position: absolute;
width: 20px; height: 20px;
right: 20px; top: 20px;
}
.image-lightbox .close a {
height: auto; width: auto;
padding: 5px 10px;
color: #fff;
text-decoration: none;
background: #22272c;
box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 30px rgba(255,255,255,0.4);
border-radius: 5px;
font-weight: bold;
float: right;
}
.image-lightbox .close a:hover {
box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 20px rgba(255,255,255,0.4);}
№37 слайд
Содержание слайда: Крок 3
Необхідно додати позиціонування для зображень, якщо ви хочете додати нові, тоді необхідно внести доповнення до цього розділу:
№38 слайд
Содержание слайда: При відкритті зображення відбувається його позиціювання на сторінці
№39 слайд
Содержание слайда: Ітог
Жодного плагіну не було використано, це дозволяє збільшити швидкість завантаження сторінки
Скачать все slide презентации Мова HTML. Створення галереї засобами CSS одним архивом:
