Web-дизайн
книга

Web-дизайн : приемы адаптивного Web-дизайна: технологии Flexbox и CSS Grid

Автор: Галина Никулова, Алексей Терлецкий

Форматы: PDF

Издательство: Липецкий государственный педагогический университет им. П.П. Семенова-Тян-Шанского

Год: 2021

Место издания: Липецк

ISBN: 978-5-907461-41-3

Страниц: 69

Артикул: 98522

Возрастная маркировка: 16+

Электронная книга
138

Краткая аннотация книги "Web-дизайн"

В пособии представлены теоретические материалы и лабораторные работы по основам Web-разработок адаптивных макетов ресурсов для мобильных устройств, связанные с применением современных языков разметки и спецификаций на базовом уровне. Учебно-методическое пособие «Web-дизайн. Приемы адаптивного Web-дизайна: технологии Flexbox и CSS Grid» входит в состав УМК подготовки бакалавров по направлениям «Информационные системы и технологии», «Информационная безопасность», «Профессиональное обучение». Рекомендовано также слушателям программ дополнительного профессионального образования соответствующего направления подготовки.

Содержание книги "Web-дизайн"


ВВЕДЕНИЕ
Вводные теоретические сведения
Лабораторная работа №1
ЗНАКОМСТВО С FLEXBOX. ВОЗМОЖНОСТИ ТЕХНОЛОГИИ FLEXBOX
Лабораторная работа №2
ГИБКОСТЬ FLEX-ЭЛЕМЕНТОВ. ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ
Лабораторная работа №3
СОЗДАНИЕ МАКЕТА СТРАНИЦЫ НА ОСНОВЕ СЕТОК – ТЕХНОЛОГИЯ CSS GRID
Литература
Приложение
Приложение 2

Все отзывы о книге Web-дизайн : приемы адаптивного Web-дизайна: технологии Flexbox и CSS Grid

Чтобы оставить отзыв, зарегистрируйтесь или войдите

Отрывок из книги Web-дизайн : приемы адаптивного Web-дизайна: технологии Flexbox и CSS Grid

36 ЛАБОРАТОРНАЯ РАБОТА №2 ГИБКОСТЬ FLEX-ЭЛЕМЕНТОВ. ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ Цель: познакомиться с возможностями «гибкого» отображения flex-элементов, освоить принципы выравнивания при формировании адаптивного макета. Определяющим аспектом гибкого макета является возможность менять flex-элементы, изменяя их ширину/высоту (в зависимости от того, какой размер находится на главной оси), чтобы заполнить доступное пространство в основном измерении. Это делается с помощью свойства flex. 1. Определим расширение и сжатие элементов в flex-контейнере. Flex-контейнер распределяет свободное пространство между дочерними элементами пропорционально значению flex-grow, сжимает их пропорционально коэффициенту сжатия flex-shrink, чтобы предотвратить переполнение контейнера. При flex-grow: 0 и flex-shrink:0 макет перестает адаптироваться (рис. 1). Создадим файл с боксами нескольких типов и текстом. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Лабораторная работа №2</title> </head> <body> <div class="text"> <h1> box_1: flex-grow:3;</h1> <h1> box_2: flex-grow:3;</h1> <h1> box_3: flex-grow:3;</h1> <h1> box_4: flex-grow:3;</h1> </div> <div class ="box2"> <div class="box21"><h2>1</h2></div> <div class="box"><h2>2</h2></div> <div class="box"><h2>3</h2></div> <div class="box"><h2>4</h2></div> </div> <div class = "box2"> <div class="box"><h2>1</h2></div>