Проектирование и дизайн ИС Практическая работа №15

Обновите страницу в браузере для просмотра изменений.

Как правило, jumbotron (джамботрон) на сайте — это большой, привлекающий внимание блок, растянутый на всю ширину страницы. Фоном для нашего джамботрона послужит изображение в хорошем качестве, растянутое на всю ширину, а текстовое содержимое будет находиться в ограничивающем блоке .container.

Фоновое изображение вы найдете в папке «img». Добавьте следующий CSS-код и посмотрите результат и попробовать самостоятельно понять, что и как в нем работает:

Мы добавим еще несколько строк к стилю джамботрона — для создания вертикальных отступов по 80 пикселей и установки минимальной высоты в 250 пикселей, для выравнивания внутреннего содержимого по центру блока, а также для сброса обтекания, которое было задано навигационному меню:

Стиль для заголовка джамботрона мы добавили ранее, поэтому сразу перейдем к созданию яркой кнопки, расположенной под ним. Если быть точнее, это обычная ссылка с классом .button, но ведь CSS позволяет нам творить чудеса!

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

Текст кнопки будет белым и без подчеркивания, шрифт — жирный 18 пикселей, верхний margin — 40 пикселей, а цвет фона — #22a7f0. Чтобы это больше было похоже на кнопку, необходимо добавить отступы с четырех сторон — в нашем случае по 20 пикселей вертикально и по 30 пикселей горизонтально. Также мы округлим углы элемента с помощью уже известного нам свойства border-radius:

Данная секция будет включать в себя три блока, расположенных в один ряд. В этом нам снова поможет свойство float. Все блоки будут иметь одинаковую ширину, указанную в процентах, и в сумме они займут всю ширину контейнера. Разделив число 100 на 3, получаем 33,333333. Именно его мы записываем в стиль для класса .service. Дополнительно зададим каждому блоку внутренние отступы в размере 15 пикселей и внешние вертикальные отступы в 30 и 50 пикселей:

Сейчас вы можете обновить страницу и увидеть, как третий блок съехал вниз. Догадаетесь, почему так произошло? Вспомните урок, где мы разбирали, как браузер вычисляет размеры элемента и что делает свойство box-sizing. Мы добавили нашим блокам свойство padding, и сумма их ширин превысила ширину контейнера, поэтому один из них не помещается в ряд. Добавьте к стилю элемента .service свойство box-sizing со значением border-box, после чего обновите страницу в браузере. Вы увидите, что теперь все блоки выстроились так, как надо.

Идем дальше. Добавим стили для самого блока .services — сделаем верхний отступ в 50 пикселей и центрируем всё текстовое содержимое:

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

Обновите страницу в браузере и полюбуйтесь результатом. Нам осталось написать стиль для двух последних блоков.

Прежде всего необходимо отменить обтекание для блока .blog. Он будет иметь вертикальные внутренние отступы в 50 пикселей, а также легкий серый фон, в соответствии с макетом:

Выровняем заголовок этого блока по центру:

Каждому блоку с классом .post присвоим внутренний отступ в 30 пикселей сверху и поведение строчно-блочного элемента:

Для миниатюр постов зададим обтекание и внешний отступ 30 пикселей с правой стороны:

После чего дополните стиль элементов .post строкой clear:both, благодаря которой каждый блок будет отображаться корректно и не съезжать.

Для основного блока подвала понадобится сбросить обтекание, задать вертикальные отступы в 50 пикселей, выравнивание текста по центру и темно-серый фон:

Установим цвет текста для элемента .brand (как уже упоминалось, он будет отличаться от стиля, применяемого к элементу .brand в шапке сайта):

Для пунктов меню в футере зададим отступы и цвет ссылок:

Обратите внимание: чтобы свойство text-align:center, примененное к тегу , повлияло на блок с меню, необходимо сделать его строчно-блочным:

И, наконец, напишем небольшой стиль для последнего элемента — .copyright:

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

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

Первое, что бросается в глаза — это три блока .service, каждый из которых имеет ширину 33,333333% от ширины контейнера. На узких экранах текст в этих блоках становится трудночитаемым.

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

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

Теперь, если ширина экрана пользователя будет менее чем 576 пикселей, каждый блок .service будет иметь ширину 100% и не иметь обтекания.

Продолжаем проверять нашу верстку на адаптивность. Отчетливо видно, что на маленькие экраны нормально не помещаются блоки .post. Миниатюра поста чересчур большая для небольшого экрана и следующий за ней текст некрасиво обтекает ее. Исправим это следующим стилем (просто добавьте код к уже созданному медиазапросу):

Напоследок добавим еще пару строк кода, которые помогут всем изображениям на странице стать адаптивными. Внимание: этот стиль добавляем в раздел General!

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

Дополнительное задание

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

Контрольные вопросы

1. Какие свойства существуют для установки полей или отступов в CSS?

2. За что отвечает свойство border-style и какие значения может принимать?

3. Каким образом можно закруглить углы в CSS для границ?