/
htmlcss_education
/
Lesson_7
Обзор
Документация
Войти
/
htmlcss_education
/
Lesson_7
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
master
index.html
164 строки
8 KB
Куракин Илья
Домашнее задание к уроку
23 дек 2025, 22:07
23 дек 2025, 22:07
2dd4b5e
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Flexbox Галерея</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <h1>Технологии Flex-вёрстки Web-страниц</h1> <p>Используем только Flexbox для вёрстки. Изучите визуальное влияние каждого свойства.</p> </header> <main> <section class="demo-section"> <h2>Демонстрация justify-content</h2> <p>Управляет выравниванием вдоль ГЛАВНОЙ оси (по умолчанию — горизонтальной).</p> <div class="example"> <h3>1. justify-content: flex-start (по умолчанию)</h3> <div class="container demo-justify-start"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div> </div> <div class="example"> <h3>2. justify-content: center</h3> <div class="container demo-justify-center"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div> </div> <div class="example"> <h3>3. justify-content: flex-end</h3> <div class="container demo-justify-end"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div> </div> <div class="example"> <h3>4. justify-content: space-between</h3> <div class="container demo-justify-between"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div> </div> <div class="example"> <h3>5. justify-content: space-around</h3> <div class="container demo-justify-around"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div> </div> </section> <section class="demo-section"> <h2>Демонстрация align-items</h2> <p>Управляет выравниванием вдоль ПОПЕРЕЧНОЙ оси (по умолчанию — вертикальной).</p> <div class="tall-container-example"> <div class="example"> <h3>1. align-items: stretch (по умолчанию)</h3> <div class="container tall-container demo-align-stretch"> <div class="tall-box">A</div> <div class="tall-box">B</div> <div class="tall-box">C</div> </div> </div> <div class="example"> <h3>2. align-items: flex-start</h3> <div class="container tall-container demo-align-start"> <div class="tall-box">A</div> <div class="tall-box">B</div> <div class="tall-box">C</div> </div> </div> <div class="example"> <h3>3. align-items: center</h3> <div class="container tall-container demo-align-center"> <div class="tall-box">A</div> <div class="tall-box">B</div> <div class="tall-box">C</div> </div> </div> <div class="example"> <h3>4. align-items: flex-end</h3> <div class="container tall-container demo-align-end"> <div class="tall-box">A</div> <div class="tall-box">B</div> <div class="tall-box">C</div> </div> </div> </div> </section> <section class="practice-section"> <h2>Практическое задание</h2> <p>Используя <strong>только свойства display: flex, justify-content и align-items</strong>, выполните следующее:</p> <div class="tasks"> <div class="task"> <h3>Задача 1: Навигационное меню</h3> <p>Сделайте навигацию flex-контейнером. Элементы должны быть равномерно распределены по всей ширине.</p> <!-- Студент должен добавить стили для .navigation --> <div class="navigation"> <a href="#">Главная</a> <a href="#">О нас</a> <a href="#">Услуги</a> <a href="#">Контакты</a> </div> </div> <div class="task"> <h3>Задача 2: Карточки товаров</h3> <p>Сделайте контейнер карточек flex-контейнером с переносом строк. Выровняйте карточки по центру по горизонтали и по вертикали.</p> <!-- Студент должен добавить стили для .cards --> <div class="cards"> <div class="card"> <div class="card-img">📱</div> <h4>Смартфон</h4> <p>25 000 ₽</p> </div> <div class="card"> <div class="card-img">💻</div> <h4>Ноутбук</h4> <p>65 000 ₽</p> </div> <div class="card"> <div class="card-img">⌚</div> <h4>Часы</h4> <p>15 000 ₽</p> </div> </div> </div> <div class="task"> <h3>Задача 3: Профиль пользователя</h3> <p>Сделайте контейнер профиля flex-контейнером. Аватар и текст должны быть выровнены по центру вертикально и разнесены к противоположным краям горизонтально.</p> <!-- Студент должен добавить стили для .user-profile --> <div class="user-profile"> <div class="user-avatar">👤</div> <div class="user-info"> <h4>Иван Петров</h4> <p>Frontend-разработчик</p> </div> </div> </div> </div> </section> </main> </body> </html>