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

.

Разметка заголовка и позиционирование секции заголовка Начнем с разметки первой секции, так называемого заголовка веб-страницы. Мы разместим логотип и ссылки слева, а навигационные ссылки выровняем по правой стороне шапки страницы, для наглядности я добавил белую рамку для элементов. Все они показаны в уроке Горизонтальное меню для сайта. Обратите внимание, что после того, как мы применили обводку, заголовок исчез.

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

Выравнивание ссылок меню заголовка 3. Создание сетки для основной части страницы Основная часть страницы часто представляет собой сетку из блоков разной ширины. Эти блоки можно расположить и с помощью свойства float.

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

Навигация

Comments

  1. Между нами говоря, я бы попросил помощи у пользователей этого форума.


Add a Comment

Ваш e-mail не будет опубликован. Обязательные поля помечены *