Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Шаг 1. Строим сетку для блоков первого уровня
На этом шаге выстраиваем по сетке крупные блоки первого уровня: 1. шапка, 2. подвал, 3. основной контент. Как правило, тип отображения для этих блоков не меняют. Блоки идут друг под другом и display: block для этого подходит идеально. Сетка блоков первого уровня Блоки на примере тянутся на всю ширину браузера — это поведение по умолчанию для блочных боксов. Для блоков первого уровня могут быть заданы внешние или внутренние отступы, центрирование контента. .main-header { margin-bottom: 75px; /* … */}.main-footer { padding-top: 25px; padding-bottom: 25px; text-align: center; /* … */}Замечание Шаг 2. Добавляем контейнер-центровщик для выравнивания содержимого В случае, если содержимое сайта имеет фиксированную ширину и центрируется, можно использовать дополнительный контейнер для задания нужного поведения. Такой контейнер ещё называют «центровщиком». Это типовой способ для выравнивания содержимого сайта. Контейнер-центровщик легко распознать на макете. Рассмотрим пример. Содержимое в шапке, в блоке бестселлеров, в промо-блоке и в блоке категорий товаров имеет фиксированную ширину и выровнено по центру. Реализуем такое поведение с помощью контейнера-центровщика. Центровка блоков Добавим в разметку контейнер-центровщик — <div> с классом container. Зададим ему фиксированную ширину, центровку с помощью внешних отступов и небольшие внутренние отступы. При определении размеров руководствуемся макетом. .container { width: 1170px; margin: 0 auto; padding: 0 28px;}Шаг 3. Выстраиваем горизонтальные блоки Это могут быть колонки в сетке, элементы горизонтального меню, элементы управления в плеере, карточки товаров, фильтры в каталоге и так далее. Разберём всё на примерах. Пример 1 Построим сетку для шапки сайта. Этот блок содержит в себе логотип, главное меню и меню пользователя. Сетка шапки сайта <header class="main-header"> <div class="container"> <nav class="main-navigation"> <a href="index.html"><img src="img/logo.svg" height="30" alt="Логотип"></a> <ul class="site-navigation">…</ul> </nav> <ul class="user-navigation">…</ul> </div></header>В контейнере-центровщике выстраиваем блоки.main-navigation и.user-navigation в ряд с помощью display: flex. Эти блоки относятся к крупной сетке. Блокам в такой сетке важно ограничить или зафиксировать ширину. Почему? Может измениться количество пунктов меню или размеры логотипа. Сетка должна предусматривать эти изменения и не должна сломаться. Подробно про переполнение мы поговорим позже в 5 шаге методики.
Сетка шапки сайта Для главной навигации укажем ширину 800px. Зададим ширину для навигации по сайту 445px. Блоки в контейнере выровнены по ширине, поэтому используем тип выравнивания по главной оси justify-content со значением равным space-between. Чтобы получить это же выравнивание блоков, можно использовать автоматический внешний отступ слева для блока с пользовательской навигацией. Внутри блока с главной навигацией между логотипом и навигация по сайту отступ равный 265px. В стилях укажем внешний отступ слева для блока с навигацией по сайту. Значение ширины для блоков и отступы мы замерили в макете. Собираем всё вместе и получаем такие CSS-правила: .main-header.container { display: flex; justify-content: space-between;} /* альтернативный вариант */.main-header.container { display: flex;}.user-navigation { margin-left: auto;} /* ещё один альтернативный вариант */.main-navigation { display: flex; width: 800px;}.site-navigation { width: 445px; margin-left: 265px;}Пример 2 Построим сетку для типичного информационного раздела сайта с текстом и картинкой. Содержимое раздела выстроено в две колонки. Ширина первой колонки 670px, второй — 500px. Для того чтобы два блочных элемента выстроить в ряд, используем display: flex, направление главной оси флексбокса оставим по умолчанию. Колонки выровнены по ширине, поэтому укажем тип выравнивания по главной оси justify-content равным space-between. Сетка информационного блока И для нашей разметки: <section class="symptoms"> <div class="container"> <div class="column1"> <h2>Что из этого списка вы находите у себя?</h2> … </div> <div class="column2"> … </div> </div></section>Получаем следующие CSS-правила: .symptoms.container { display: flex; justify-content: space-between;}.column1 { width: 670px;}.column2 { width: 500px;}Пример 3 Псевдоэлементы::before и::after для тега с display: flex ведут себя также как и флекс-элементы внутри флекс-контейнера. Рассмотрим пример. Необходимо построить сетку для блока с номером телефона и выстроить в ряд два блока: изображение телефона и текст с номером. Сетка блока с номером телефона Изображение телефона — это декоративное изображение и может быть добавлено на страницу с помощью псевдоэлемента before для тега <a>.
Разметка элемента с номером телефона будет выглядеть так: <a href="tel:88000000000">8 800 000-00-00</a>Стили для оформления номера телефона: a::before { content: ""; width: 30px; height: 30px; background-image: url("img/phone.svg");}Если указать для тега <a>display: flex, то изображение телефона и номер выстроятся в ряд, что и требуется в макете.
|
||||||
Последнее изменение этой страницы: 2021-01-14; просмотров: 149; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.224.246.203 (0.008 с.) |