Основная статья
Текст статьи
- Семантика HTML5. Лекция 2
Содержание
- 2. Flexible Box Layout Module CSS flexbox представляет собой способ компоновки элементов, в основе лежит идея оси.
- 3. Flexible Box Layout Module Шапка сайта Меню сайта Основная статья Текст статьи
- 4. Flexible Box Layout Module a.css: header { border:1px solid black; margin-bottom:10px; } main { display:flex; width:100%;
- 6. Flexbox контейнер Направление главной оси flex-direction: row | row-reverse | column | column-reverse Управление переносом flex-wrap:
- 7. Flexbox элемент Базовый размер: flex-basis: величина в любых единицах измерения Коэффициент роста: flex-grow: величина в любых
- 8. Преимущества flexbox Все блоки очень легко делаются “резиновым”, что уже следует из названия “flex”. Элементы могут
- 9. Введение в медиа-запросы В CSS3 доступны следующие параметры media: all Все типы. используется по умолчанию braille
- 10. Пример Моя страница Это моя страница Пример текста, который не будет выводится на печать не выводится
- 11. Пример comp.css (для экранов): h1 {color:green;} p {color:blue;} print.css (для принтера): h1 {color:black;} p {display:none;}
- 13. Адаптивный сайт Адаптивный сайт - это сайт, который может «приспосабливаться» под различные устройства (ширину рабочей области
- 14. Медиа-функции media=“screen and (min-width:1440px)”> Логические операторы: and для объединения not для отрицания Медиа-функции: width device-width color
- 15. Пример Моя страница media="screen and (max-width:1000px)"> Это моя страница Пример текста, который не будет выводится на
- 16. Пример comp.css: p {display:none;}
- 17. Альтернативное подключение Вместо media=“screen and (min-width:1440px)”> можно использовать медиа-запросы и медиа-функции в самом css-файле: @media screen
- 18. Viewport Мобильные браузеры отображают страницы в виртуальном «окне» (viewport, вьюпорт), которое, как правило, шире экрана устройства.
- 19. Viewport content="width=device-width, initial-scale=1"> Width - определяет размер окна просмотра. Он может быть установлен на определенное количество
- 20. Реперные точки
- 21. Итоговая структура media=“screen and (min-width:1024px)”> media=“screen and (min-width:768px) and (max-width:1023px)”> media=“screen and (min-width:480px) and (max-width:767px)”> media=“screen
- 22. ВЕРСТКА ТИПОВЫХ ЭЛЕМЕНТОВ
- 23. «Сложный» логотип Под сложным логотипом будем понимать элемент, содержащий в себе кроме текста еще и изображение,
- 24. «Сложный» логотип Для того, чтобы удовлетворить и потребности SEO, и вывести на экран изображение, можно использовать
- 25. Горизонтальное меню Меню сайта является аналогом содержания книги, которое, в свою очередь, представляет из себя список
- 27. Скачать презентацию
Flexible Box Layout Module
CSS flexbox представляет собой способ компоновки элементов, в основе
Flexible Box Layout Module
CSS flexbox представляет собой способ компоновки элементов, в основе
Flexible Box Layout Module
Шапка сайта
Flexible Box Layout Module