Вебтехнології

Виконати практичне завдання № 1
Виконати інтерактивну вправу №1
Виконати інтерактивну вправу №2

Практичне завдання №1 "Створення фото галереї на веб сторінції на CSS"

1. Тут скопіювати HTML код, для веб сторінки " abityra.html”

      <h1>Photo Gallery</h1>
            <div id="gallery">
                <figure class="photo">                    <a href="img/DSC_6584.jpg" data-lightbox="roadtrip" data-title="Токар"><img src="img/ps9.jpg" alt="Токар" /></a>                    <figcaption>Токар</figcaption>                </figure>
                <figure class="photo">                    <a href="img/p8.jpg"data-lightbox="roadtrip" data-title="Коваль"><img src="img/ps3.jpg" alt="Коваль" /></a>                    <figcaption>Коваль</figcaption>                </figure>
                <figure class="photo">                    <a href="img/p5.jpg"data-lightbox="roadtrip" data-title="Електромонтер"><img src="img/ps1.jpg" alt="Електромонтер" /></a>                    <figcaption>Електромонтер</figcaption>                </figure>
                <figure class="photo">                    <a href="img/p6.jpg"data-lightbox="roadtrip" data-title="Продавець"><img src="img/ps2.jpg" alt="Продавець" /></a>                    <figcaption>Продавець</figcaption>                </figure>
                <figure class="photo">                    <a href="img/p9.jpg"data-lightbox="roadtrip" data-title="Рихтувальник"><img src="img/ps4.jpg" alt="Рихтувальник" /></a>                    <figcaption>Рихтувальник</figcaption>                </figure>
                <figure class="photo">                    <a href="img/p10.jpg"data-lightbox="roadtrip" data-title="Зварник"><img src="img/ps5.jpg" alt="Зварник" /></a>                    <figcaption>Зварник</figcaption>                </figure>
                <figure class="photo">                    <a href="img/p11.jpg"data-lightbox="roadtrip" data-title="Фрезерувальник"><img src="img/ps6.jpg" alt="Фрезерувальник" /></a>                    <figcaption>Фрезерувальник</figcaption>                </figure>
                <figure class="photo">                    <a href="img/p12.jpg"data-lightbox="roadtrip" data-title="Інструментальник"><img src="img/ps7.jpg" alt="Інструментальник" /></a>                    <figcaption>Інструментальник</figcaption>                </figure>
                <figure class="photo">                    <a href="img/DSC_6546.jpg"data-lightbox="roadtrip" data-title="Слюсар"><img src="img/ps8.jpg" alt="Слюсар" /></a>                    <figcaption>Слюсар</figcaption>                </figure>
            </div>

2. Тут копіюємо перший HTML код для CSS

.container { width: 100%; /* ширина блоку-контейнеру */ max-width: 960px; /* максимальна ширина контейнера */ margin: 0 auto; /* этот стиль центрирует контейнер */}.photo { float: left; /* говоримо елементам шикуватися один за другим */ width: 33.333333%; /* встановлюємо ширину елементу */ padding: 10px; /* додаємо відступи з кожної сторони */ box-sizing: border-box; /* змінюємо спосіб обчислення ширини */}

3. Додамо наступний стиль для забезпечення адаптивності картинок:

.photo img {

display: block;

max-width: 100%;

height: auto;

}

4. Оформлення мініатюр на CSS.

СПОСІБ I: ВЛАСТИВІСТЬ BORDER

border: 10px solid #eee;

box-sizing: border-box;

4. Оформлення мініатюр на CSS.

СПОСІБ II: властивості BACKGROUND-COLOR І PADDING

padding: 10px;

background-color: #eee;

box-sizing: border-box;

5.Оформити cтиль при наведенні курсору. Запишемо стиль для псевдокласу .photo a: hover: на CSS

.photo a:hover {

opacity: 0.5;

}

6. Заставимо тег <a> поводитися як блок, інакше ми не побачимо, як попередній код спрацьовує на мініатюрі:

.photo a { display: block; position: relative;}.photo a:after { content: ''; background: transparent url(../img/icons/eye-icon.png) no-repeat center; width: 52px; height: 35px; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; visibility: hidden;}.photo:hover> a:after { visibility: visible;}.photo figcaption { color: #999999; text-align: center; margin-top: 20px;}h1 { font-size: 36px; text-transform: uppercase; color: #cccccc; text-align: center; margin: 30px 0;}body { font-family: 'Open Sans', sans-serif;}#gallery { margin-bottom: 60px;}#gallery:after { content: ''; display: block; height: 0; clear: both;}

Заготівки для практичного завдання

веб-20-1.pdf

Результат виконання практичного завдання № 1

Джерело уроку