Как сделать края для сайта

14.11.2016 14 комментариев

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

1. Как разбить макет страницы на секции

Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье 1.11. HTML5 семантические элементы.

Стандартная веб-страница содержит следующие секции:

<body> <header></header> <div class="main"></div> <footer></footer> </body> structure-mainРис. 1. Основные секции страницы

Мы не будем использовать элемент <main>, так как он поддерживается не всеми браузерами.

Элементы <header>, <div> и <footer> — блочные, поэтому они будут занимать всю ширину их блока-контейнера — элемента <body>. Страница с такой разметкой будет хорошо смотреться на небольших экранах, но на устройствах с большим разрешением текст таких страниц будет неудобно читать. Поэтому необходимо добавить тег-контейнер для контента — содержимого каждой секции:

container-mainРис. 2. Основные секции страницы с тегом-контейнером

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

.container { width: 100%; max-width: 1024px; /максимальная ширина может иметь другое значение/ padding: 0 15px; margin: 0 auto; }

Таким образом мы получили каркас для нашей страницы (высота секций в данном случае виртуальная, так как без содержимого секции имеют нулевую высоту).

2. Разметка шапки сайта и позиционирование её элементов

Приступим к разметке первой секции, сайта так называемой шапки веб-страницы. Элемент <header> предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега <header> логотип сайта и навигационные ссылки:

<header> <div class="container"> <a href="/" class="logo">LOGO</a> <nav> как сделать края для сайта <ul> <li><a href="">Главная</a></li> <li><a href="">О нас</a></li> <li><a href="">Контакты</a></li> </ul> </nav> </div> </header> container-headerРис. 3. Шапка сайта с добавленными логотипом и ссылками

Разместим логотип слева, а ссылки навигации — с выравниванием по правому краю шапки (для наглядности я добавила элементам белую границу):

.logo { float: left; } nav { float: right; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; /один из способов разместить элементы в строку/ }

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

header-collapseРис. 4. Эффект схлопывания блока-контейнера

Обратите внимание, что после того, как мы применили обтекание, шапка исчезла. Это произошло потому, что плавающие элементы (для которых задано свойство float) изымаются из нормального потока и родительский контейнер больше не видит их высоту, поэтому и элемент <header> и элемент внутри него с классом.container схлопнулись. Чтобы исправить эту ситуацию, воспользуемся очисткой потока для элемента с классом.container:

.container:after { content: ""; display: table; clear: both; }

Также добавим ему вертикальные отступы, отделяющие элементы внутри него от краёв шапки. В результате стили будут иметь следующие вид:

.container { width: 100%; max-width: 1024px; padding: 15px; margin: 0 auto; } header-clearfixРис. 5. Очистка потока

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

logo-headerРис. 6. Логотип-картинка

В нашем примере высота логотипа равна 38px, поэтому чтобы выровнять ссылки меню по высоте по середине шапки, нужно задать для них соответствующую высоту строки:

nav a { text-decoration: none; line-height: 38px; } hyperlinks-headerРис. 7. Выравнивание ссылок меню шапки

3. Создание сетки для основной части страницы

Основная часть страницы чаще всего представляет собой сетку из блоков разной ширины. Позиционирование таких блоков осуществляется также с помощью свойства float. Каждую строку блоков обернём дополнительным блоком с классом.row:

<div class="main"> <div class="container"> <div class="row"> <div class="col-1-3"></div> <div class="col-2-3"></div> </div> <div class="row"> <div class="col-1-2"></div> <div class="col-1-2"></div> </div> <div class="row"> <div class="col-1-4"></div> <div class="col-1-4"></div> <div class="col-1-2"></div> </div> </div> </div> layout-mainРис. 7. Сетка основной части страницы.col-1-2 { width: 50%; float: left; }.col-1-3 { width: 33.3333333333%; float: left; }.col-1-4 { width: 25%; float: left; }.col-2-3 { width: 66.6666666667%; float: left; }

Для элемента с классом.row также применим очистку потока:

.container:after,.row:after { content: ""; display: table; clear: both; }

Чтобы отделить ряды друг от друга, можно добавить нижний внешний отступ:

.row { margin-bottom: 15px; }

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

different-heightРис. 8. Разная высота элементов сетки

Высоту блоков можно зафиксировать, указав её явно, например,.row div {height: 100px}. Но в этом случае нужно быть уверенным, что при добавлении адаптивности макету содержимое блоков не будет выходить за край блока.

Если необходимо задать фоновый цвет для блоков ряда, то можно это можно сделать следующим образом: для элемента с классом.row добавим новый класс, который позволит стилизовать только этот ряд (получится.row row-one), укажем для него фоновый цвет меньшего по высоте блока, а для высокого блока зададим его собственный цвет, то есть таким образом мы сделаем фоновую подложку.

<div class="row row-one"> <div class="col-1-3">Lorem ipsum dolor sit amet.</div> <div class="col-2-3">Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at.</div> </div>.row-one { background: lightblue; }.col-2-3 { width: 66.6666666667%; float: left; background: seashell; } equal-heightРис. 9. Фоновая подложка

Если основная секция страницы содержит только два блока, то дополнительный ряд-обёртку можно не добавлять:

<div class="main"> <div class="container"> <div class="col-2-3"></div> <div class="col-1-3"></div> </div> </div>

4. Разметка подвала страницы

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

<footer> <div class="container"> <div class="col-1-3"></div> <div class="col-1-3"></div> <div class="col-1-3"></div> </div> </footer>

Источник: https://html5book.ru/vyorstka-stranicy-sayta/



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Как сделать шапку сайта, чтобы она отображалась от края до края браузера? - Как снять выкройки видео



Как сделать края для сайта Как сделать края для сайта Как сделать края для сайта Как сделать края для сайта Как сделать края для сайта Как сделать края для сайта