Учебная практика по теме Резиновая и адаптивная верстка

Резиновая и адаптивная  верстка  

Повторение пройденной темы

1.               Назначение свойства <alt>?

2.               Тег кнопки называется..?

3.               Для чего применяется flex-верстка?

4.               Как выравниваются элементы?

5.               Что представляет макет веб-страницы при flexверстке?

6.               Назовите единицы измерения размера  элементов на страницах сайта?

7.               Размер шрифта текущего элемента на сайте?

8.               Как записываются единицы измерения (высота и ширина)  элемента сайта в процентах?

Повторение пройденной темы

Задание_3: описать значение свойств: 

.header { display: flex; justify-content: space-between; align-items: center; background: beige; } .logo {     flex: 20%;     padding-left: 50px;     padding-top: 25px;    background: beige; } .menu  {     overflow: hidden;     background-color: #0099cc;    }

display -  justify-content - align-items - background –

flex – padding-left   -  padding-top –   overflow -   background-color -

Резиновая и адаптивная верстка

Правила адаптивной верстки

Записывается  в head

Медиа-запросы

Операторы медиа-запросов

Страница сайта

Задание_1 Исчезающая кнопка

Образец

Дополнение

Попробуйте размеры:

   1200,  900 и другие

Запишите вывод и вставьте в отчет скрин

Задание_2 Изменение размера шрифта

Образец  

Дополнение

Попробуйте размеры:

   1400,  900 и другие

Запишите вывод и вставьте в отчет скрин

Задание 3

                  CSS

Образец

Задание Самостоятельной работы

Задайте медиа-запрос так, чтобы:

1.           при размере меньше 1300px исчезли все кнопки;

2.           при размере меньше 1100px размер шрифта футера утроился;

3.           при размере меньше 900px футер исчез.