🗊Презентация Мова HTML. Створення галереї засобами CSS

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Мова HTML. Створення галереї засобами CSS, слайд №1Мова HTML. Створення галереї засобами CSS, слайд №2Мова HTML. Створення галереї засобами CSS, слайд №3Мова HTML. Створення галереї засобами CSS, слайд №4Мова HTML. Створення галереї засобами CSS, слайд №5Мова HTML. Створення галереї засобами CSS, слайд №6Мова HTML. Створення галереї засобами CSS, слайд №7Мова HTML. Створення галереї засобами CSS, слайд №8Мова HTML. Створення галереї засобами CSS, слайд №9Мова HTML. Створення галереї засобами CSS, слайд №10Мова HTML. Створення галереї засобами CSS, слайд №11Мова HTML. Створення галереї засобами CSS, слайд №12Мова HTML. Створення галереї засобами CSS, слайд №13Мова HTML. Створення галереї засобами CSS, слайд №14Мова HTML. Створення галереї засобами CSS, слайд №15Мова HTML. Створення галереї засобами CSS, слайд №16Мова HTML. Створення галереї засобами CSS, слайд №17Мова HTML. Створення галереї засобами CSS, слайд №18Мова HTML. Створення галереї засобами CSS, слайд №19Мова HTML. Створення галереї засобами CSS, слайд №20Мова HTML. Створення галереї засобами CSS, слайд №21Мова HTML. Створення галереї засобами CSS, слайд №22Мова HTML. Створення галереї засобами CSS, слайд №23Мова HTML. Створення галереї засобами CSS, слайд №24Мова HTML. Створення галереї засобами CSS, слайд №25Мова HTML. Створення галереї засобами CSS, слайд №26Мова HTML. Створення галереї засобами CSS, слайд №27Мова HTML. Створення галереї засобами CSS, слайд №28Мова HTML. Створення галереї засобами CSS, слайд №29Мова HTML. Створення галереї засобами CSS, слайд №30Мова HTML. Створення галереї засобами CSS, слайд №31Мова HTML. Створення галереї засобами CSS, слайд №32Мова HTML. Створення галереї засобами CSS, слайд №33Мова HTML. Створення галереї засобами CSS, слайд №34Мова HTML. Створення галереї засобами CSS, слайд №35Мова HTML. Створення галереї засобами CSS, слайд №36Мова HTML. Створення галереї засобами CSS, слайд №37Мова HTML. Створення галереї засобами CSS, слайд №38Мова HTML. Створення галереї засобами CSS, слайд №39
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Мова HTML. Створення галереї засобами CSS. Доклад-сообщение содержит 39 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Мова HTML. Створення галереї засобами CSS.
Описание слайда:
Мова HTML. Створення галереї засобами CSS.

Слайд 2


Створення галереї Вставляти великі зображення на сайт - це не практично, так як це займає досить багато місця, а якщо занадто маленькі, то не буде зрозуміло, що на зображенні, тому доводиться йти на компроміс. На занятті ми розглянемо, як створити просте збільшення зображень за допомогою CSS.
Описание слайда:
Створення галереї Вставляти великі зображення на сайт - це не практично, так як це займає досить багато місця, а якщо занадто маленькі, то не буде зрозуміло, що на зображенні, тому доводиться йти на компроміс. На занятті ми розглянемо, як створити просте збільшення зображень за допомогою CSS.

Слайд 3


Створення галереї Необхідно, щоб після натискання на зображення воно збільшувалося, крім цього додамо кнопку закриття зображення
Описание слайда:
Створення галереї Необхідно, щоб після натискання на зображення воно збільшувалося, крім цього додамо кнопку закриття зображення

Слайд 4


Галерея
Описание слайда:
Галерея

Слайд 5


Крок 1. Мова HTML СТРУКТУРА: Є загальний контейнер, який містить всю структуру, в середину цього контейнера поміщені дочірні елементи, як зображення і класи закриття розгорнутих зображень. Крім цього ми використовуємо клас: target який забезпечить працездатність вікон.
Описание слайда:
Крок 1. Мова HTML СТРУКТУРА: Є загальний контейнер, який містить всю структуру, в середину цього контейнера поміщені дочірні елементи, як зображення і класи закриття розгорнутих зображень. Крім цього ми використовуємо клас: target який забезпечить працездатність вікон.

Слайд 6


Крок 1. Мова HTML
Описание слайда:
Крок 1. Мова HTML

Слайд 7


Крок 2. CSS Базові стилі
Описание слайда:
Крок 2. CSS Базові стилі

Слайд 8


position static
Описание слайда:
position static

Слайд 9


position
Описание слайда:
position

Слайд 10


Position fixed Фіксоване позиціювання елемента щодо вікна браузера таке, що він завжди займає одне і теж місце навіть при прокручуванні сторінки, немов він приклеєний до екрану. Також як і для relative, додаткові властивості top, right, bottom, і left для даного позиціонування працюватимуть.
Описание слайда:
Position fixed Фіксоване позиціювання елемента щодо вікна браузера таке, що він завжди займає одне і теж місце навіть при прокручуванні сторінки, немов він приклеєний до екрану. Також як і для relative, додаткові властивості top, right, bottom, і left для даного позиціонування працюватимуть.

Слайд 11


Position fixed fixed {   position: fixed;   bottom: 0;   right: 0;   width: 200px;   background-color: white; } Фіксований елемент не залишає за собою вільний простір на сторінці, де він був розташований. У мобільних браузерів досить хитка підтримка фіксованого позиціонування.
Описание слайда:
Position fixed fixed {   position: fixed;   bottom: 0;   right: 0;   width: 200px;   background-color: white; } Фіксований елемент не залишає за собою вільний простір на сторінці, де він був розташований. У мобільних браузерів досить хитка підтримка фіксованого позиціонування.

Слайд 12


Position absolute absolute поводиться як fixed за винятком того, що позиціювання відраховується щодо найближчого розташованого родича, а не щодо вікна браузера. Якщо елемент абсолютно позиціонується і не має родича, то він використовує тіло документа і продовжує рухатись разом з усією сторінкою при скролінгу. Пам'ятайте, що “позиційований" елемент - це елемент з будь-яким значенням властивості position крім значення static.
Описание слайда:
Position absolute absolute поводиться як fixed за винятком того, що позиціювання відраховується щодо найближчого розташованого родича, а не щодо вікна браузера. Якщо елемент абсолютно позиціонується і не має родича, то він використовує тіло документа і продовжує рухатись разом з усією сторінкою при скролінгу. Пам'ятайте, що “позиційований" елемент - це елемент з будь-яким значенням властивості position крім значення static.

Слайд 13


Position absolute
Описание слайда:
Position absolute

Слайд 14


Position absolute
Описание слайда:
Position absolute

Слайд 15


position у дії
Описание слайда:
position у дії

Слайд 16


position у дії
Описание слайда:
position у дії

Слайд 17


float (поплавок) CSS властивість використовується для розмітки. Поплавок призначений для обгортання тексту навколо зображень, наприклад: img {    float: right;    margin: 0 0 1em 1em; }
Описание слайда:
float (поплавок) CSS властивість використовується для розмітки. Поплавок призначений для обгортання тексту навколо зображень, наприклад: img {    float: right;    margin: 0 0 1em 1em; }

Слайд 18


float (поплавок)
Описание слайда:
float (поплавок)

Слайд 19


Приклад float шаблону nav { float: left; width: 200px; } section { margin-left: 200px; }
Описание слайда:
Приклад float шаблону nav { float: left; width: 200px; } section { margin-left: 200px; }

Слайд 20


Приклад float шаблону
Описание слайда:
Приклад float шаблону

Слайд 21


z-index Якщо в одному місці сторінки виявляються кілька «абсолютних» блоків, то вони перекривають один одного. За замовчуванням вище виявляється той блок, який розташований далі в коді сторінки. За допомогою CSS-властивості z-index можна керувати тим, як перекриваються блоки. Значенням властивості може бути ціле число. Чим більше z-index, тим вище розташовується блок. Властивість z-index працює для елементів, у яких position задана як absolute, fixed і relative. Таким чином, «відносний» елемент може перекривати «абсолютний».
Описание слайда:
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>
Описание слайда:
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;}
Описание слайда:
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
Описание слайда:
z-index

Слайд 25


z-index
Описание слайда:
z-index

Слайд 26


Крок 2. CSS Базові стилі
Описание слайда:
Крок 2. CSS Базові стилі

Слайд 27


Значення inherit
Описание слайда:
Значення inherit

Слайд 28


Значення inherit З англ. перекладається як “наслідувати”. Властивості, яким буде присвоєно це значення, будуть наслідувати значення тієї-ж властивості його родича. <div style = "border: 1px solid # 999; padding: 10px;"> <div style = "border: inherit;"> Дочірній блок </ div> </ div>
Описание слайда:
Значення inherit З англ. перекладається як “наслідувати”. Властивості, яким буде присвоєно це значення, будуть наслідувати значення тієї-ж властивості його родича. <div style = "border: 1px solid # 999; padding: 10px;"> <div style = "border: inherit;"> Дочірній блок </ div> </ div>

Слайд 29


Властивість box-shadow
Описание слайда:
Властивість box-shadow

Слайд 30


Властивість box-shadow
Описание слайда:
Властивість box-shadow

Слайд 31


Властивість box-shadow
Описание слайда:
Властивість box-shadow

Слайд 32


Властивість box-shadow
Описание слайда:
Властивість box-shadow

Слайд 33


Властивість box-shadow
Описание слайда:
Властивість box-shadow

Слайд 34


Крок 2. CSS Встановили <span> елементи display: none, для того, щоб зробити кнопку закриття, яка з'являється, коли користувач натискає на зображення.
Описание слайда:
Крок 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; }  
Описание слайда:
Крок 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);}
Описание слайда:
.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 Необхідно додати позиціонування для зображень, якщо ви хочете додати нові, тоді необхідно внести доповнення до цього розділу:
Описание слайда:
Крок 3 Необхідно додати позиціонування для зображень, якщо ви хочете додати нові, тоді необхідно внести доповнення до цього розділу:

Слайд 38


При відкритті зображення відбувається його позиціювання на сторінці
Описание слайда:
При відкритті зображення відбувається його позиціювання на сторінці

Слайд 39


Ітог Жодного плагіну не було використано, це дозволяє збільшити швидкість завантаження сторінки
Описание слайда:
Ітог Жодного плагіну не було використано, це дозволяє збільшити швидкість завантаження сторінки

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию