Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Веб-сайты часто отображают содержание в нескольких столбцах (например, журнал или газета). HTML5 предлагает новые семантические элементы, которые определяют разные части веб-страницы:
|
|
Существует пять разных способов создания многоколоновых макетов. Каждый способ имеет свои плюсы и минусы:
Элемент <table> не был разработан как инструмент компоновки веб-страниц! Целью элемента <table> является отображение табличных данных. Значит, не используйте таблицы для создания макета страницы! Они принесут беспорядок в ваш код. И представьте, как тяжело будет сделать редизайн вашего сайта (т.е. изменить дизайн) через какое-то время, т.к. придётся практически полностью переписывать HTML код.
Совет: НЕ используйте таблицы для создания макета веб-страницы!
Если вы хотите быстро создать макет, вы можете использовать фреймворк, например W3.CSS, Bootstrap или любой другой (Semantic UI, Materialize, Pure, Foundation, Milligram, Bulma, UIkit, Skeleton, Base, Spectre, Picnic, Tailwind CSS, Material-UI, Leaf, YAML CSS, Gumby и т.д.).
Это обычное использование целых веб-макетов с помощью свойства CSS float. Float легко выучить - необходимо просто запомнить, как работают float и чистые свойства. Недостатки: плавающие элементы привязаны к потоку документов, что может мешать гибкости. Подробнее о float можно узнать в разделе CSS Float и Clear.
В этом примере мы создали заголовок, две колонки / поля и нижний колонтитул. На небольших экранах столбики будут располагаться друг над другом.
Измените размер окна веб-браузера, чтобы увидеть эффект реагирования (об этом вы узнаете в следующим разделе - HTML Адаптивность.)
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Flexbox - это новый режим компоновки в CSS3. Использование flexbox гарантирует, что элементы будут вести себя предвидено, когда макет страницы должен соответствовать разным размерам экрана и разным устройствам отображения. Недостатки: не работает в браузере Internet Explorer 10 и более ранних версиях.
Узнать больше про flexbox можно в разделе CSS Flexbox.
В этом примере мы создали заголовок, две колонки / поля и нижний колонтитул. На небольших экранах столбики будут располагаться друг над другом.
Измените размер окна браузера, чтобы увидеть эффект адаптивности.
Примечание: Flexbox не поддерживается в Internet Explorer 10 и более ранних версиях.
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Модуль CSS Grid Layout предлагает систему компоновки на основе сетки, со строками и столбцами, что облегчает разработку веб-страниц без использования float и позиционирования.
Недостатки: не работает ни в Internet Explorer, ни в Edge 15, ни в более ранних версиях.
Подробнее про CSS grid смотрите в разделе CSS Grid.
Примечание: Для получения полного списка всех доступных HTML тегов, посетите Справочник HTML тегов.