Web-дизайн
В пособии представлены теоретические материалы и лабораторные работы по основам Web-разработок адаптивных макетов ресурсов для мобильных устройств, связанные с применением современных языков разметки и спецификаций на базовом уровне.Учебно-методическое пособие «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 минут
за оставленную заявку