Css html верстка: Как сверстать веб-страницу. Часть 1 / Хабр — Независимое театральное объединение "Зрительские симпатии"

Содержание

Курс «Профессиональная вёрстка на HTML и CSS»

Будете много практиковаться и сделаете 7 проектов для портфолио

Отработаете навыки на 250+ задачах в тренажёре

Получите обратную связь от экспертов на проекты, которые сдадите вовремя

Освоите инструменты для вёрстки, которые используют опытные разработчики

Сможете заниматься онлайн в любое время и в своём темпе

На курсе вы изучите современные теги HTML и свойства CSS, освоите нужные инструменты и научитесь смотреть на макет глазами опытных разработчиков.

HTML и CSS — база, на которой основана вся разработка интерфейсов. Мода на инструменты меняется, а HTML и CSS остаются.

Писать код на HTML и CSS по современным стандартам

Превращать дизайн-макеты в страницы сайта

Создавать сайты под разные устройства

Делать веб-страницы быстрыми и производительными

Создавать анимации на CSS

Адаптировать сайты для людей с разными типами восприятия и условиями

Дизайнерам

Научитесь создавать прототипы в браузере и верстать макеты. Посмотрите на дизайн глазами разработчиков, поймёте возможности и ограничения вёрстки.

Бэкенд-разработчикам

В дополнение к бэкенду сможете создавать графический интерфейс. Вёрстка — начало пути в фулстек-разработке.

Менеджерам

Разберётесь в процессе создания сайтов и сможете лучше планировать работу над проектами. Научитесь говорить с разработчиками на одном языке.

SASS и SCSS

PostCSS

Prettier и Stylelint

NodeJS и NPM

GitHub

CSS Layouts

Logical Properties

Custom Properties

БЭМ и Atomic CSS

Типографика

2D- и 3D-анимации

Адаптивная вёрстка

Декорирование

Мобильная версия сайта

Одностраничный лендинг

Страница с фоном из видео

Сайт с медиаконтентом

Текстовая страница со светлой и тёмной темой

Адаптивный сайт с разными цветовыми гаммами

Сайт для создания мудбордов

Дополнительные материалы по каждой теме

О типах раскладки, ментальной модели вёрстки, взглядах на адаптивные сайты и о других важных концепциях

Продвинутые технологии и инструменты

Сможете пройти дополнительный курс, где мы собрали темы, которые позволят не просто верстать, а делать это профессионально: кодстайл, линтинг, препроцессоры, автоматизация, шаблонизаторы

Бесплатная часть

Как всё устроено

Бесплатная часть15 часов

Основы HTML и CSS: бесплатный вводный курс

Подготовительный модуль5 часов

Подготовка к работе

1 модуль3 недели

Семантика и лэйаут

2 модуль3 недели

Доступность и интерактив

3 модуль3 недели

Дизайн и адаптивность

4 модуль3 недели

Красотища

Наставники научат находить ответы

Пояснят теорию и помогут найти решение, если столкнётесь с трудной задачей

Ревьюеры проверят код и проекты

Укажут на ошибки и дадут развивающую обратную связь

Кураторы сделают обучение комфортным

Напомнят о сроках по проектам, пришлют записи воркшопов, выслушают и поддержат

Специалисты поддержки устранят неполадки

Им можно писать 24/7: например, если не открывается учебник

Если знания курса пригодятся вам на текущем месте работы, поговорите с руководителем о частичной или полной оплате учёбы. Мы подготовили инструкцию, как оформить оплату за счёт работодателя.

Посмотреть инструкцию в PDF

Можно взять перерыв в учёбе

Если жизненные обстоятельства осложнились или темп нужно снизить, вы можете сделать паузу в учёбе на месяц.

Вернём деньги, если не понравится

Вы можете в любой момент вернуть деньги за оставшееся время обучения — для этого не нужно ничего доказывать.

У вас будет удостоверение о повышении квалификации

Если у вас есть среднее профессиональное или высшее образование. Если у вас среднее образование, выдадим сертификат о прохождении курса и справку об обучении.

Сможете получить налоговый вычет

Чтобы вернуть 13% от стоимости курса, надо быть налоговым резидентом РФ и работать по трудовому договору.

Подойдёт ли мне этот курс?

Вы будете изучать вёрстку с нуля, поэтому курс подойдёт вам, даже если вы раньше ничего не верстали. Если у вас уже есть опыт, то курс поможет разобраться, как дизайн превращается в код, освежить и структурировать знания по HTML и CSS.

Чтобы точно понять, подойдёт ли вам этот курс, вы сможете пройти бесплатную вводную часть.

За 3 месяца правда можно научиться верстать сайты и приложения?

Да, но нужно уделять занятиям порядка 15 часов в неделю, решать задачи, верстать проекты и общаться с наставниками.

Выше можно скачать программу, чтобы оценить количество учебного материала и свои возможности.

Что нужно, чтобы начать учиться?

Вам не понадобятся специальные навыки или опыт в программировании — мы обучим всему с нуля.

Главное, чтобы был компьютер и достаточно времени для занятий.

Что делать, если я не справлюсь с нагрузкой?

Вы сможете взять перерыв на месяц, если поймёте, что нужно сделать паузу. Но только один раз за время обучения.

Могу ли я вернуть деньги, если мне не понравится?

Да, причём в любой момент. Правда, если обучение в потоке уже началось, мы вернём деньги только за оставшееся время. Более подробно рассказываем об этом в седьмом пункте оферты.

Получу ли я какой-то документ после курса?

Если у вас есть среднее профессиональное или высшее образование, после курса вы получите удостоверение о повышении квалификации.

Если у вас среднее образование, выдадим сертификат о прохождении курса и справку об обучении в электронном виде.

Я смогу оформить налоговый вычет за обучение?

Да, если вы работаете по трудовому договору и являетесь налоговым резидентом Российской Федерации, то есть 183 дня в году находитесь на территории страны.

За обучение на курсе «Профессиональная вёрстка на HTML и CSS» вы сможете вернуть до 7 215 ₽ (зависит от выбранного способа оплаты). Для этого нужно подать заявление на налоговый вычет через личный кабинет на сайте nalog.ru (в него можно войти через аккаунт на Госуслугах).

К заявлению нужно приложить :

Справку 2-НДФЛ от вашего работодателя.
Договор на обучение, в нашем случае это оферта Практикума.
Лицензию на образовательную деятельность. Вот наша.
Чек об оплате обучения. Мы отправляем его на электронную почту. Если не найдёте чек у себя в почте, напишите в чат службы поддержки — вышлем копию.
Справку о получении образовательных услуг — её тоже нужно запросить в чате поддержки.

Подробнее о налоговом вычете — на сайте Федеральной налоговой службы.

У меня останется доступ к курсу после завершения обучения?

Да, доступ к курсу вы получаете навсегда.

Вёрстка | WebReference

Использование псевдоэлементов ::after и ::before является одним из самых популярных приёмов при вёрстке фрагментов веб-страниц и их стилизации. С их помощью можно выводить произвольный текст, добавлять тени, треугольники, линии и др.

Практически любая веб-страница содержит множество похожих компонентов, которые встречаются и на других сайтах. Это меню, навигация, элементы форм, заголовки и колонки. Чтобы меньше писать кода и по максимуму задействовать уже готовые решения применяются специализированные библиотеки, их часто называют фреймворками. Одним из таких фреймворков для вёрстки является Bootstrap.

Font Awesome — это шрифт с иконками, которые могут добавляться к любым элементам веб-страницы, чтобы повысить их наглядность и улучшить дизайн. Разработчик Дэйв Ганди собрал впечатляющую коллекцию из несколько сотен иконок подходящих под любые задачи.

HTML (HyperText Markup Language, язык разметки гипертекста) — это прежде всего система вёрстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Информация на сайте, способ её представления и оформления зависят исключительно от разработчика и тех целей, которые он перед собой ставит.

Less — это препроцессор CSS, позволяющий использовать переменные, функции, циклы и другие технологии для упрощения работы со стилями. Препроцессор в данном случае означает, что мы имеем дело с динамическим языком стилей, который преобразуется в CSS. Таким образом, на выходе получаем стандартный стилевой файл.

В CSS нет функций, нет повторяющихся фрагментов кода, в общем, нет ничего, что характерно для любого языка программирования и облегчения работы. На помощь приходят препроцессоры CSS, одним из них как раз и является Sass (Syntactically Awesome Stylesheets). Sass это особый метаязык, похожий на CSS, который поддерживает множество возможностей необходимых для работы со стилями.

Вёрстка с помощью flexbox, официально называемая CSS Flexible Box Layout Module, представляет собой новый модуль компоновки в CSS3, предназначенный для улучшения выравнивания, направления и порядка элементов в контейнере, даже если они имеют динамический или неизвестный размер. Главной характеристикой flex-контейнера является способность менять ширину или высоту дочерних элементов, чтобы наиболее оптимально заполнить доступное пространство при разных размерах экрана.

Это книга о создании сайтов на HTML5 и CSS для самых новичков. Цель этой книги — рассказать об искусстве создания сайтов простым языком, полным практических аналогий. После прочтения свыше 100 печатных страниц вы освоите основные понятия и методы веб-разработки и будете в состоянии сделать свой первый сайт!

CSS запутан. Мы все любим его, но он запутанный. Я сравниваю его с английским языком: есть куча правил и вы можете узнать их. Но иногда гораздо лучше просто попробовать всякую гадость и увидеть, что работает, а что нет. Магия — это упорядочивание того, что я узнал из этого сумасшедшего процесса.

Погружение в HTML5 основано на фишках, вручную отобранных из спецификации HTML5 и других замечательных стандартов.

Продвинутые уроки по HTML и CSS — это более глубокий взгляд на фронтенд-разработку, уроки, которые расширяют знания, полученные в руководстве для начинающих. Посвящённое современной фронтенд-разработке, это руководство учит последним веб-технологиям и совершенствует ваши профессиональные навыки.

Псевдокласс :checked определяет, помечен флажок (<input type=»checkbox»>), переключатель (<input type=»radio»>) или пункт списка (<option>), соответственно, применяет стиль только к помеченному элементу формы. С помощью :checked можно стилизовать поля формы, создавать вкладки, меню, галерею изображений и др.

Псевдокласс :focus определяет стиль элемента, когда он получает фокус, иными словами, становится активным для взаимодействия. К примеру, при получении фокуса в текстовом поле можно набирать текст, на мобильных устройствах включается экранная клавиатура.

Фокус могут получить не все элементы, а только ссылки, кнопки, поля формы. Именно к ним в стилях и следует добавлять :focus, для остальных элементов это не даст видимого результата.

Псевдокласс :hover определяет стиль элемента при наведении на него курсора мыши. Это один из самых самых популярных псевдоклассов, поскольку простыми методами позволяет создать разные эффекты и привлечь внимание к элементам интерфейса. К примеру, с помощью :hover можно менять цвет ссылок, создавать всплывающие подсказки, меню, увеличивать изображения и др.

Bootstrap 4 капитально переработал Bootstrap 3 и многое поменял в его функционировании. Множество изменений было внесено в компоненты, таких как таблицы, формы, сетки, выпадающие списки, панели навигации и многое другое.

Флексбоксы (Flexbox, от flexible box — гибкие блоки) дают веб-разработчикам контроль над расположением элементов, их выравниванием и размерами внутри контейнера.

Стилевое свойство clip-path — это способ отказаться от однообразных прямоугольных макетов, традиционно ассоциируемых с плоским, адаптивным дизайном. Вы станете думать не только о прямоугольниках, на ваших страницах они буквально начнут принимать форму шестиугольников, звёзд и восьмиугольников.

Структурные псевдоклассы позволяют выбрать элементы, основываясь на их положении в дереве документа и отношении к другим элементам. К примеру, :first-child выбирает первый элемент в группе братских элементов, т. е., имеющих одного родителя.

«Уроки по HTML и CSS» являются простым и полным руководством, целью которого служит помощь начинающим при обучении HTML и CSS. Излагая основы, это руководство проходит через все основные этапы проектирования и разработки.

Макет CSS — Изучите веб-разработку

На этом этапе мы рассмотрели основы CSS, как стилизовать текст, как стилизовать и манипулировать блоками, внутри которых находится ваш контент. Теперь пришло время посмотреть, как правильно расположить блоки по отношению к области просмотра, а также друг к другу. Мы рассмотрели необходимые предварительные условия, поэтому давайте углубимся в макет CSS, рассмотрев такие различные функции, как: различные настройки отображения, позиционирование, современные инструменты макета, такие как flexbox и CSS grid, а также некоторые из устаревших методов, о которых вы, возможно, захотите узнать. о.

Хотите стать веб-разработчиком?

Мы подготовили курс, который включает в себя всю необходимую информацию, необходимую для работайте над своей целью.

Начало работы

Прежде чем приступить к этому модулю, вы уже должны:

Иметь базовые знания HTML, как обсуждалось в модуле Введение в HTML.
Освойте основы CSS, как обсуждалось в разделе Введение в CSS.
Узнайте, как оформлять коробки.

Примечание: Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать собственные файлы, вы можете попробовать (большинство) примеров кода в онлайн-программе кодирования, такой как JSBin или глюк.

Эти статьи содержат инструкции по основным инструментам и методам компоновки, доступным в CSS. В конце уроков проводится оценка, которая поможет вам проверить свое понимание методов верстки при верстке веб-страницы.

Введение в макет CSS

В этой статье будут рассмотрены некоторые функции компоновки CSS, которые мы уже затрагивали в предыдущих модулях, например различные значения для отображения , а также представлены некоторые концепции, которые мы рассмотрим в этом модуле.

Нормальный поток

Элементы на веб-страницах располагаются в соответствии с обычным потоком — пока мы не сделаем что-то, чтобы это изменить. В этой статье объясняются основы нормального потока в качестве основы для изучения того, как его изменить.

Флексбокс

Flexbox — это метод одномерной компоновки для размещения элементов в строках или столбцах. Элементы сгибаются, чтобы заполнить дополнительное пространство, и сжимаются, чтобы поместиться в меньшие пространства. В этой статье объясняются все основы. Изучив это руководство, вы сможете проверить свои навыки работы с флексбоксами, прежде чем двигаться дальше.

Сетки

CSS Grid Layout — это система двумерной компоновки для Интернета. Он позволяет размещать содержимое в строках и столбцах и имеет множество функций, упрощающих создание сложных макетов. Эта статья даст вам все, что вам нужно знать, чтобы начать работу с макетом страницы, а затем проверьте свои навыки работы с сеткой, прежде чем двигаться дальше.

Поплавки

Первоначально предназначенное для плавающих изображений внутри текстовых блоков, свойство float стало одним из наиболее часто используемых инструментов для создания макетов нескольких столбцов на веб-страницах. Как объясняется в этой статье, с появлением Flexbox и Grid он вернулся к своему первоначальному назначению.

Позиционирование

Позиционирование позволяет выводить элементы из обычного потока компоновки документа и заставлять их вести себя по-разному, например, располагая их друг над другом или всегда оставаясь на одном и том же месте в окне просмотра браузера. В этой статье объясняются различные

позиция значения и как их использовать.

Макет с несколькими столбцами

Спецификация макета с несколькими столбцами дает вам метод размещения содержимого в столбцах, как вы можете видеть в газете. В этой статье объясняется, как использовать эту функцию.

Адаптивный дизайн

По мере того, как на устройствах с доступом в Интернет появилось все больше различных размеров экрана, появилась концепция адаптивного веб-дизайна (RWD): набор методов, которые позволяют веб-страницам изменять свой макет и внешний вид в соответствии с различной шириной экрана, разрешением и т.

д. Это идея, которая изменила способ проектирования веб-сайтов с несколькими устройствами, и в этой статье мы поможем вам понять основные приемы, которые вам необходимо знать, чтобы освоить ее.

Руководство для начинающих по медиазапросам

CSS Media Query позволяет применять CSS только в том случае, если среда браузера и устройства соответствует заданному вами правилу, например, «область просмотра шире 480 пикселей». Медиа-запросы являются ключевой частью адаптивного веб-дизайна, поскольку они позволяют создавать различные макеты в зависимости от размера области просмотра. Их также можно использовать для определения других особенностей среды, в которой работает ваш сайт, например, использует ли пользователь сенсорный экран, а не мышь. В этом уроке вы сначала узнаете о синтаксисе, используемом в медиа-запросах, а затем будете использовать его в интерактивном примере, показывающем, как можно сделать простой дизайн адаптивным.

Устаревшие методы компоновки

Сетки — очень распространенная функция, используемая в макетах CSS.

До CSS Grid Layout они, как правило, реализовывались с использованием плавающих элементов или других функций макета. Сначала вы представляете свой макет как определенное количество столбцов (например, 4, 6 или 12), а затем размещаете столбцы контента внутри этих воображаемых столбцов. В этой статье мы рассмотрим, как работают эти старые методы, чтобы вы поняли, как они использовались, если вы работаете над старым проектом.

Поддержка старых браузеров

В этом модуле мы рекомендуем использовать Flexbox и Grid в качестве основных методов макета для ваших проектов. Однако в будущем обязательно найдутся посетители сайта, который вы разработаете, которые будут использовать старые браузеры или браузеры, которые не поддерживают методы, которые вы использовали. Так будет всегда в Интернете — по мере разработки новых функций разные браузеры будут отдавать приоритет разным функциям. В этой статье объясняется, как использовать современные веб-технологии, не исключая пользователей старых технологий.

Следующая оценка проверит ваше понимание методов компоновки CSS, описанных в руководствах выше.

Понимание фундаментальной схемы: Тест для проверки ваших знаний о различных методах компоновки путем компоновки веб-страницы.

Практические примеры позиционирования: В этой статье показано, как создать несколько реальных примеров, иллюстрирующих возможности позиционирования.
Книга рецептов компоновки CSS: Книга рецептов компоновки CSS предназначена для того, чтобы собрать воедино рецепты общих шаблонов компоновки, которые вам могут понадобиться для реализации на ваших сайтах. В дополнение к предоставлению кода, который вы можете использовать в качестве отправной точки в своих проектах, эти рецепты освещают различные способы использования спецификаций макета и выбор, который вы можете сделать как разработчик.

Обнаружили проблему с содержанием этой страницы?

Отредактируйте страницу на GitHub.
Сообщить о проблеме с содержимым.
Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 23 февраля 2023 г. участниками MDN.

WebD2: макет страницы с CSS

Обзор

В этом модуле вы научитесь использовать CSS для управления расположением контента на вашей веб-странице. С помощью CSS у нас есть полный контроль над расположением элементов на странице, хотя иногда может быть сложно понять, как именно этого добиться. В текущем уроке мы рассмотрим основные приемы управления положением содержимого страницы с помощью CSS.

Результаты учащегося

По завершении этого упражнения:

вы сможете продемонстрировать базовое понимание принципов позиционирования CSS.
вы сможете определить, использует ли веб-страница фиксированный или гибкий макет
вы сможете применить позиционирование CSS для выравнивания элементов по двум столбцам на вашей веб-странице.
вы сможете позиционировать элементы, используя как относительное, так и абсолютное позиционирование

Виды деятельности

Часть 1: Общий макет страницы

Читать страницу Макет страницы: общие стратегии проектирования.
Откройте внешнюю таблицу стилей портфолио в текстовом редакторе и домашнюю страницу портфолио в браузере.
Примените дизайн фиксированной ширины к своему сайту, добавив следующее свойство в объявление CSS для тега body:
ширина: 1000 пикселей;
Сохраните файл CSS, обновите браузер и попробуйте изменить размер окна браузера, чтобы увидеть, какой эффект оказывает этот CSS. Поэкспериментируйте, изменив ширину. Попытка использовать меньшие значения и большие значения.
Теперь вы изменили дизайн с фиксированной шириной на гибкий дизайн, изменив ширину на процент. Попробуйте различные процентные значения, пока не найдете то, которое хорошо подходит для вашего дизайна.

Гибкий дизайн, вероятно, хорошо подойдет для вашего портфолио, но позже в этом курсе (в Разделе 4) вы добавите изображение баннера на свой сайт, поэтому вам нужно сделать что-то, чтобы разместить это изображение. Изображение будет иметь ширину 720 пикселей, поэтому добавьте следующее свойство под свойством ширины в CSS:
минимальная ширина: 720 пикселей;
Теперь ваше основное содержимое будет соответствовать разрешению экрана пользователя, но оно гарантированно будет по крайней мере достаточно широким, чтобы вместить изображение вашего баннера.

Если вы хотите, чтобы ваша страница располагалась по центру по горизонтали, добавьте следующее свойство под другими только что добавленными свойствами:
поле: 0 авто;

Часть 2: Позиционирование других элементов

Прочтите статью CSS Positioning 101 from A List Apart. Не забудьте нажать и посмотреть примеры.
Запишите свои ответы на следующие вопросы и поделитесь ими со своим инструктором:
Откройте внешнюю таблицу стилей портфолио в текстовом редакторе и домашнюю страницу портфолио в браузере.
Начнем со ссылки «перейти к основному содержанию». Она расположена в верхней части документа, но поскольку мы добавили левое поле к таблице стилей в уроке «Применение блочной модели в CSS», эта ссылка больше не располагается в крайнем верхнем левом углу страницы. Пользователи со слабым зрением, использующие программное обеспечение для увеличения экрана, выиграют от его размещения там. Иначе могут не увидеть. Чтобы вернуть эту ссылку в верхний левый угол, добавьте этот CSS в свою таблицу стилей:
```
  div#скипнав {
    верх: 5 пикселей;
    слева: 5 пикселей;
  }
 
```
Сохраните таблицу стилей и обновите домашнюю страницу в браузере. Это дало результат, которого вы ожидали? Если вы ожидаете, что top:5px и left:5px поместят элемент div #skipnav в верхний левый угол экрана, это разумное ожидание. Однако это не сработает, потому что свойство position по умолчанию для всех элементов, включая этот, является статическим, а когда элементы имеют position:static, мы не можем контролировать их верхние, нижние, левые или правые координаты на странице.
Попробуем другой подход. Сохраните определение стиля, которое вы использовали на предыдущем шаге, но теперь добавьте это свойство:
позиция: абсолютная;
Сохраните и обновите. Это дало ожидаемый результат? Если бы все работало, вы бы увидели, как блок #skipnav перемещается в верхний левый угол, что и было задумано, но с помощью position:absolute мы полностью удалили блок #skipnav из потока документа. Это означает, что он больше не занимает место, которое в противном случае удерживало бы содержимое, следующее за ним, на экране немного ниже. Следовательно, остальная часть страницы переместилась вверх, чтобы заполнить вакансию. Это может быть или не быть желаемым результатом. Если не хочется, есть другой способ:
Попробуйте заменить определение стиля #skipnav следующим:
```
  div#скипнав {
    положение: родственник;
    справа: 12,5%;
  }
 
```
Сохраните и обновите. Это лучший результат? При использовании position:relative элемент #skipnav остается в потоке документа, поэтому все последующее содержимое возвращается в исходное положение. Однако теперь свойства top, bottom, left и right можно использовать для позиционирования относительно относительно его положения по умолчанию. Итак, правильно: 12,5% подталкивает 12,5% из вправо (что смещает в сторону влево). Смущенный? Это нормально — даже профессиональные веб-разработчики с многолетним стажем до сих пор борются со всеми нюансами позиционирования CSS.
Продолжайте экспериментировать с различными стратегиями размещения элемента div #skipnav, пока не будете удовлетворены его положением.
Теперь попробуем расположить два элемента div .info так, чтобы они располагались рядом, а не друг над другом. Один из способов позиционирования элементов рядом — использование свойства float CSS. Элементы могут перемещаться слева или справа от содержимого, которое находится рядом с ними. Мы можем перемещать оба элемента div .info слева. Первый будет плавать влево, а второй будет плавать влево рядом с первым. Одним из преимуществ использования плавающего контента является то, что он может трансформироваться, чтобы наилучшим образом соответствовать отображению пользователя. если размер окна браузера пользователя или разрешение экрана слишком малы для размещения двух div рядом друг с другом, второй упадет в исходное положение под первым. Чтобы сделать плавающими все экземпляры div.info, просто добавьте float:left к существующему коду CSS для div. info. Ваш код может выглядеть примерно так:
```
  div.info {
    ширина: 40%;
    размер шрифта: 1.2em;
    плыть налево;
  }
 
```
Примечание: Вы уже должны были создать определение стиля для div.info. Если вы это сделали, не создавайте новый — просто добавьте float:left к существующему определению.
Прежде чем это будет завершено, необходимо выполнить один последний шаг. Поскольку код, который мы только что добавили, заставляет разделы .info плавать слева от содержимого, следующего за ними, это означает, что элемент nav будет перемещаться вверх, чтобы заполнить пробел справа от второго блока .info. Нам это не нужно, поэтому мы также должны добавить следующее определение стиля:
```
  навигация {
    ясно: слева;
  }
 
```
Свойство clear очищает плавающие элементы. Значение может быть левое , правое или оба , указывая, какие поплавки вы хотите очистить. В данном случае элементы div .info были перемещены влево, поэтому мы хотим очистить эти левые элементы, чтобы они не влияли на элемент div #navigation.
No related posts.