- •Ещё более многоуровневый список [6/17]
- •Список определений [7/17]
- •Важность. Теги strong и b [8/17]
- •Акцентируем внимание. Теги em и I [9/17]
- •Переносы и разделители. Теги br и hr [10/17]
- •Цитаты [11/17]
- •Верхние и нижние индексы [12/17]
- •Помечаем изменения. Теги del и ins [13/17]
- •Преформатированный текст [14/17]
- •Просто выделенный текст [15/17]
- •Испытание: разметка статьи [16/17]
- •Испытание: Рецепт каши [17/17]
- •Работа с таблицами Добавляем строки [2/23]
- •Задаём рамки с помощью css [4/23]
- •Улучшаем отображение рамок [5/23]
- •Горизонтальные и вертикальные рамки [6/23]
- •Отступы внутри ячеек [7/23]
- •Отступы между ячейками [8/23]
- •Испытание: простая, но аккуратная таблица [9/23]
- •Ячейки-заголовки [10/23]
- •Заголовок таблицы [11/23]
- •Заголовок таблицы [17/23]
- •Выравнивание содержимого в ячейках [18/23]
- •Добавим цвета [19/23]
- •Раскрашиваем строки [20/23]
- •Задаём размеры таблицы [21/23]
- •Испытание: итоговая таблица [23/23]
- •Знакомство с формами Первая форма [1/18]
- •Текстовое поле ввода [2/18]
- •Идентификатор и значение по умолчанию [3/18]
- •Подпись для поля ввода [4/18]
- •Связываем подпись и поле по id [5/18]
- •Добавим ещё одно поле [6/18]
- •Поле для ввода пароля [7/18]
- •Кнопка отправки формы [8/18]
- •Многострочное поле ввода [9/18]
- •Чекбокс или «галочка» [10/18]
- •Испытание: форма регистрации [11/18] проверка
- •Переключатель или «радиобаттон» [12/18]
- •Группа переключателей [13/18]
- •Раскрывающийся список или «селект» [14/18]
- •«Мультиселект» [15/18]
- •Поле для загрузки файлов [16/18]
- •Скрытое поле [17/18]
- •Работа с css Введение в css [1/15]
- •Продвинутые селекторы [3/15]
- •Свойства для оформления текста [4/15]
- •Свойства для задания размеров и отступов [5/15]
- •Позиционирование элементов [6/15]
- •Создание сетки страницы [7/15]
- •Декоративные свойства [8/15]
- •Каскадность [9/15]
- •Каскадность. Переопределение стилей [10/15]
- •Каскадность и приоритеты [11/15]
- •Каскадность. Коктейль из классов [12/15]
- •Наследование [13/15]
- •Испытание: макет-прототип [15/15]
- •Селекторы Селекторы по классам [3/18]
- •Отрабатываем селекторы по классам [4/18]
- •Контекстные селекторы [5/18]
- •Соседние селекторы [6/18]
- •Контекстные и соседние селекторы [7/18]
- •Потомки [7/19]
- •Псевдоклассы Псевдоклассы [9/18]
- •Псевдокласс :nth-child [10/18]
- •Курс «Селекторы, часть 1» :nth-child и контекстные селекторы [11/18]
- •Псевдокласс :hover [12/18]
- •Динамические эффекты с помощью :hover [13/18]
- •Испытание. Дуэль. [18/18]
- •Курс «Наследование и каскадирование» Иерархическое дерево [1/18]
- •Наследование [2/18]
- •Наследование «на пальцах» [3/18]
- •Еще немного про наследование [4/18]
- •Наследуемые свойства [5/18]
- •Ненаследуемые свойства [6/18]
- •Принудительное наследование [7/18]
- •Каскадирование [8/18]
- •Битва за курочку [9/18]
- •Битва за курочку. Раунд второй [10/18]
- •Битва за курочку. Раунд третий [11/18]
- •Битва за курочку. Борьба накаляется [12/18]
- •Битва за курочку. Запрещённый приём [13/18]
- •Еще одна задачка на специфичность [14/18]
- •Расчет значения специфичности [15/18]
- •Ещё задачка на порядок кода [16/18]
- •Перекрестное наследование [17/18]
- •Испытание: взломанный котопрофайл [18/18]
- •Курс «Оформление текста, часть 1» Главный текстовый тег — span [1/16]
- •Свойство font-size: задаем размер шрифта [2/16]
- •Свойство font-weight: толщина начертания [3/16]
- •Свойство font-style: курсив [4/16]
- •Свойство font-family: шрифт [5/16]
- •Свойство color: цвет текста [6/16]
- •Свойство text-decoration: подчеркивание и другие эффекты [7/16]
- •Декоративное подчеркивание [8/16]
- •Задаем регистр символов с помощью text-transform [9/16]
- •Управляем пробелами: white-space [10/16]
- •Верхние и нижние индексы на css [13/16]
- •Свойство line-height: управляем высотой строки[14/16]
- •Вертикальный ритм текста [15/16]
- •Горизонтальное выравнивание текста: text-align[11/16]
- •Вертикальное выравнивание: vertical-align [12/16]
- •Испытание: рецепт на css [16/16]
- •Параметры фона Cвойство background-color [1/16]
- •Свойство background-image [2/16]
- •Свойство background-repeat [3/16]
- •Свойство background-position [4/16]
- •Ещё немного background-position [5/16]
- •Свойство background-attachment [6/16]
- •Курс «Фоны, часть 1» Свойство background [7/16]
- •Формат jpeg [9/16]
- •Формат png-8 [10/16]
- •Формат png-24 [11/16]
- •Формат gif [12/16]
- •Несколько фонов [13/16]
- •Эффекты с повторяющимся фоном [14/16]
- •Спрайты [15/16]
- •Испытание: cat Academy [16/16]
- •Блоки Блочные элементы [1/23]
- •Курс «Блочная модель документа» Строчные элементы [2/23]
- •Ширина и высота [3/23]
- •Внутренние отступы, свойство padding [4/23]
- •Внешние отступы, свойство margin [5/23]
- •Рамки [6/23]
- •Стандартная блочная модель [7/23]
- •Первое испытание [8/23]
- •«Схлопывание» внешних отступов [9/23]
- •«Выпадание» внешних отступов [10/23]
- •Как отцентрировать элемент? [11/23]
- •Блочная модель и строчные элементы [12/23]
- •Ширина 100% и ширина по умолчанию [13/23]
- •Проблемы обычной блочной модели [14/23]
- •Изменяем блочную модель, свойство box-sizing[15/23]
- •Второе испытание [16/23]
- •Управление типом элемента, свойство display[17/23]
- •Последнее испытание [23/23]
- •Курс «Сетки» Пробуем управлять потоком [1/32]
- •Другой поток, шаг 3 [6/32]
- •Другой поток, финал [7/32]
- •Погружение в флоаты [8/32]
- •Float и ширина [9/32]
- •Float и выпадание из потока [10/32]
- •Флоат рядом с флоатом [11/32]
- •Когда флоатов много, а места мало [12/32]
- •Испытание: пазл на флоатах [13/32]
- •Свойство clear [14/32]
- •Борьба с выпаданием флоатов: распорки [15/32]
- •Борьба с выпаданием флоатов: псевдораспорки[16/32]
- •Простейшая сетка, шаг 1 [17/32]
- •Простейшая сетка, шаг 2 [18/32]
- •Простейшая сетка, финал [19/32]
- •Сетка посложнее, шаг 1 [20/32]
- •Сетка посложнее, шаг 2 [21/32]
- •Сетка посложнее, шаг 3 [22/32]
- •Сетка посложнее, добавляем содержание [23/32]
- •Последняя сетка, шаг 1 [24/32]
- •Последняя сетка, шаг 2 [25/32]
- •Последняя сетка завершена [26/32]
- •Испытание: строим сетку [27/32]
- •Погружение в inline-block [28/32]
- •Простая сетка на inline-block [30/32]
- •Inline-block и пробелы в коде [31/32]
- •Испытание: котогалерея на inline-block [32/32]
- •Позиционирование Поток документа [1/20]
- •Позиционирование Поток документа [1/20]
- •Относительное позиционирование [2/20]
- •Position: relative и свойство top [3/20]
- •Position: relative и свойство left [4/20]
- •Position: relative и свойство bottom [5/20]
- •Position: relative и свойство right [6/20]
- •Относительное позиционирование на практике[7/20]
- •Абсолютное позиционирование [8/20]
- •Абсолютное позиционирование и строчные элементы [9/20]
- •Position: absolute и свойство left [10/20]
- •Position: absolute и свойство top [11/20]
- •Position: absolute и свойство right [12/20]
- •Position: absolute и свойство bottom [13/20]
- •Точка отсчёта координат [14/20]
- •Тренируемся задавать координаты [15/20]
- •Неявная точка отсчёта [16/20]
- •Абсолютное позиционирование на практике[17/20]
- •Фиксированное позиционирование [18/20]
- •Создаем меню Создаём вертикальное меню [1/28]
- •Добавляем ссылки [2/28]
- •Сбрасываем стили списка [3/28]
- •Оформляем контейнер меню [4/28]
- •Оформляем пункты, простой вариант [5/28]
- •Более сложное оформление пунктов [6/28]
- •Добавляем разделители [7/28]
- •Оформляем состояния пунктов [8/28]
- •Испытание: вертикальное меню [9/28]
- •Многоуровневое вертикальное меню [10/28]
- •Устраняем проблемы оформления [11/28]
- •Переносим рамки, задаём отступы подменю[12/28]
- •Оформляем пункты подменю [13/28]
- •Тестируем на большой вложенности [14/28]
- •Испытание: многоуровневое меню [15/28]
- •Горизонтальное меню [16/28]
- •Что делать, если пункты не влезают? [17/28]
- •Усложненное оформление пунктов [18/28]
- •Завершаем оформление пунктов [19/28]
- •Испытание: горизонтальное меню [20/28]
- •Вертикальное меню с выпадающим подменю[21/28]
- •Позиционируем выпадающее подменю [22/28]
- •Отображаем подменю при наведении [23/28]
- •Горизонтальное меню с выпадающим подменю [24/28]
- •Оформляем выпадающее меню [25/28]
- •Включаем механизм выпадания [26/28]
- •Состояние «открытое подменю» [27/28]
- •Испытание: выпадающее меню [28/28]
- •Курс «Мастерская: декоративные элементы» Социальные кнопки, шаг 1 [1/18]
- •Социальные кнопки, шаг 2 [2/18]
- •Социальные кнопки, шаг 3 [3/18]
- •Переключатель страниц, шаг 1 [4/18]
- •Переключатель страниц, шаг 2 [5/18]
- •Переключатель страниц, шаг 3 [6/18]
- •Переключатель страниц, шаг 4 [7/18]
- •Переключатель страниц, тестирование [8/18]
- •Испытание: карточка курса [9/18]
- •Контакты, шаг 1 [10/18]
- •Контакты, шаг 2 [11/18]
- •Контакты, шаг 3 [12/18]
- •Комментарии, шаг 1 [13/18]
- •Комментарии, шаг 2 [14/18]
- •Комментарии, шаг 3 [15/18]
- •Основное содержание. Тег main [2/19]
- •Разделы страницы. Теги article и section [3/19]
- •Изображения в формате svg [4/19]
- •Навигация. Тег nav [5/19]
- •Завершаем футер [6/19]
- •Использование нестандартных шрифтов [7/19]
- •Подробнее о шрифтах. Правило @font-face [8/19]
- •Дополнительное содержание. Тег aside [9/19]
- •Еще раз про article. Анонс поста [10/19]
- •Завершаем главную: наполнение [11/19]
- •Внутренняя страница: структура поста [12/19]
- •Даты для людей и машин. Тег time [13/19]
- •Картинки с подписями. Теги figure и figcaption[14/19]
- •Видео. Тег video [15/19]
- •Форматы и источники видео [16/19]
- •Аудио. Тег audio [17/19]
- •Форматы и источники звука [18/19]
- •Испытание: другой вариант главной [19/19]
- •Html5 и формы Испытание: формы — вспомнить всё [1/28]
- •Сброс введенных значений [2/28]
- •Простая кнопка [3/28]
- •Кнопка-изображение [4/28]
- •Альтернативный способ задания кнопок [5/28]
- •Обязательные поля [6/28]
- •Поле выбора даты [7/28]
- •Поле выбора времени [8/28]
- •Список возможных значений [9/28]
- •Поле ввода числового значения [10/28]
- •Поле поиска [11/28]
- •Автофокус [12/28]
- •Другие поля для ввода дат [13/28]
- •Выбор из диапазона [14/28]
- •Область для вывода результата [15/28]
- •Группировка полей формы [16/28]
- •Паттерны значений полей [17/28]
- •Поле ввода телефона [18/28]
- •Подсказка при заполнении полей [19/28]
- •Поля ввода адресов сайтов и email [20/28]
- •Поле выбора цвета [21/28]
- •Группировка элементов списка [22/28]
- •Запрет редактирования полей [23/28]
- •Управление автозаполнением полей [24/28]
- •Переключение между полями [25/28]
- •Проверяем работу localStorage [27/28]
- •Испытание: через тернии к звёздам [28/28]
- •Селекторы, часть 2
- •Объединение селекторов [1/20]
- •Псевдокласс :not [2/20]
- •Комбинируем :not [3/20]
- •Псевдокласс :nth-last-child [4/20]
- •Псевдокласс :first-of-type [5/20]
- •Псевдокласс :last-of-type [6/20]
- •Псевдокласс :nth-of-type [7/20]
- •Псевдокласс :nth-last-of-type [8/20]
- •Испытание: первая раскладка [9/20]
- •Cелектор последующих элементов [10/20]
- •Псевдокласс :empty [11/20]
- •Псевдокласс :only-child [12/20]
- •Псевдокласс :only-of-type [13/20]
- •Псевдоэлемент ::before [14/20]
Усложненное оформление пунктов [18/28]
Теперь давайте усложним оформление. Сделаем пункты более объемными и добавим разделители по аналогии с вертикальным меню.
Для начала избавимся от фона и отступов у списка. А рамку у списка оставим, т.к. в горизонтальном меню пункты не всегда занимают всю ширину или влезают на одну строку.
Чтобы расположить пункты в одну строку и иметь возможность задавать им отступы и размеры, зададим блочно-строчный тип элементам списка.
А ссылкам внутри элементов списка зададим блочный тип и добавим отступы.
Что повторить:
display: inline-block
Завершаем оформление пунктов [19/28]
На этом шаге мы добавим рамки, избавимся от лишних отступов и оформим состояния меню.
Так как отступы мы задали ссылкам, то и рамки добавим им же. Причем нам нужно задать только рамки слева, а чтобы не было двойной рамки у самого первого пункта, добавим отрицательный внешний отступ слева.
Обнулим отступ после элементов списка, но этого недостаточно, так как пробелы после блочно-строчных элементов добавляют небольшой отступ. Чтобы от него избавиться, зададим отрицательный внешний отступ справа элементам списка.
Затем оформим состояние ссылки при наведении (добавим фон). При желании можете поэкспериментировать с оформлением активного пункта меню.
Чтобы пробелы после блочно-строчных элементов были видны, мы добавили для ссылок серый фон.
menu-19.html
Испытание: горизонтальное меню [20/28]
Оформите горизонтальное меню. HTML-код уже готов и его изменить невозможно.
В испытании используются следующие цвета:
#ffffff
#2980b9 синий
#2c3e50 темно-синий
#1abc9c зеленый
Подсказки: все размеры и отступы кратны 5. Толщина рамок у пунктов меню 2px. Для борьбы с пробелами после инлайн-блоков используется приём с отрицательным маргином.
menu-20.html
Вертикальное меню с выпадающим подменю[21/28]
Еще один распространенный тип меню — это меню с выпадающими подменю. Обычно в таких меню только два уровня, но встречаются и многоуровневые, когда из выпадающего подменю может выпадать еще одно и так далее.
Разметка таких меню простая — обычный многоуровневый список, который вы уже делали в этом курсе. При создании такого меню необходимо использовать абсолютное и относительное позиционирование.
Обычно элементам списка li верхнего уровня задают относительное позиционирование, а для выпадающего меню — абсолютное.
Начнем создавать такое меню с этапа, когда готова разметка и базовые стили списков и пунктов. Для удобства фон подменю сделан светло-коричневым, а подменю есть только у одного пункта.
Что повторить:
Относительное позиционирование
Абсолютное позиционирование
Задание
Задайте элементам списка верхнего уровня относительное позиционирование.
Задайте выпадающему подменю абсолютное позиционирование.
menu-21.html
Позиционируем выпадающее подменю [22/28]
Затем выпадающее подменю располагают в том месте, куда оно будет «выпадать». Лучше располагать так, чтобы оно немного «нависало» над родительским пунктом.
Также нужно установить для подменю z-index больше, чем у родительских пунктов, чтобы подменю располагалось выше и перекрывало их при появлении.
Так как абсолютное позиционирование сбрасывает ширину, то можно установить ширину для подменю.
Что повторить:
Точка отсчета координат
Тренируемся задавать координаты
z-index или кто кого перекроет
menu-22.html