Web-дизайн : приемы адаптивного Web-дизайна: технологии Flexbox и CSS Grid
Здесь можно купить книгу "Web-дизайн : приемы адаптивного Web-дизайна: технологии Flexbox и CSS Grid" в печатном или электронном виде. Также, Вы можете прочесть аннотацию, цитаты и содержание, ознакомиться и оставить отзывы (комментарии) об этой книге.
Автор: Галина Никулова, Алексей Терлецкий
Форматы: PDF
Издательство: Липецкий государственный педагогический университет им. П.П. Семенова-Тян-Шанского
Год: 2021
Место издания: Липецк
ISBN: 978-5-907461-41-3
Страниц: 69
Артикул: 98522
Возрастная маркировка: 16+
Краткая аннотация книги "Web-дизайн"
В пособии представлены теоретические материалы и лабораторные работы по основам Web-разработок адаптивных макетов ресурсов для мобильных устройств, связанные с применением современных языков разметки и спецификаций на базовом уровне. Учебно-методическое пособие «Web-дизайн. Приемы адаптивного Web-дизайна: технологии Flexbox и CSS Grid» входит в состав УМК подготовки бакалавров по направлениям «Информационные системы и технологии», «Информационная безопасность», «Профессиональное обучение». Рекомендовано также слушателям программ дополнительного профессионального образования соответствующего направления подготовки.
Содержание книги "Web-дизайн : приемы адаптивного Web-дизайна: технологии Flexbox и CSS Grid"
ВВЕДЕНИЕ
Вводные теоретические сведения
Лабораторная работа №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>
Никулова Г. А. другие книги автора
С книгой "Web-дизайн" читают
Внимание!
При обнаружении неточностей или ошибок в описании книги "Web-дизайн : приемы адаптивного Web-дизайна: технологии Flexbox и CSS Grid (автор Галина Никулова, Алексей Терлецкий)", просим Вас отправить сообщение на почту help@directmedia.ru. Благодарим!
и мы свяжемся с вами в течение 15 минут
за оставленную заявку