Блочная верстка уроки. Блочная верстка: что это и зачем она нужна? Активное применение тега

15.07.2020

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

Эта статья будет полезна начинающим вебразработчикам, которые только становятся на тернистый путь "сайтостроителей" и хотят самостоятельно делать сайты . Вебразработчики со стажем тоже смогут что-то почерпнуть для себя, в частности в статье сравниваются достоинства и недостатки табличной и блочной верстки .
Пожалуй, нужно начать с того, что такое верстка сайта? Верстальщик получает от дизайнера макет будущего сайта, как правило, макеты предоставляются в формате photoshop. Макет это по сути рисунок, только более детализированный, в нем отдельные элементы (меню, шапка сайты...) разнесены по слоям, это получается естественным путем когда дизайнер рисует макет, кроме того это очень удобно, можно легко скопировать рисунок с нужно слоя, посмотреть параметры шрифта и т.д. Так вот суть верстки в трансформации макета в html документ и составления набора CSS правил.

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

Виды верстки Как заявлено в названии верстка бывает блочная или табличная . В блочной верстке элементы сайта структурируются с помощью блоков (div ), в табличной верстке обходятся таблицами (table ). Табличная верстка

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

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

шапка
контент	сайдбар
футер

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

Достоинства и недостатки табличной верстки:

Проста в понимании, не требует более глубоких знаний HTML и CSS (+ )
Интуитивно понятна при построении, минимум CSS правил (+ )
Трудно разбираться в HTML коде при более сложной структуре сайта (- )
Пока вся таблица не загрузиться она не будет показана на экране (- )
Сложный дизайн с перекрытием элементов не реализуем (- )
Много лишнего кода (- )

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

блочная верстка Блочная верстка базируется на том, что блочные элементы HTML, как правило, располагаются по вертикали, сверху вниз друг за другом в том порядке, в котором они встречаются в HTML коде. Кроме этого блокам можно задавать свойство плавучести (float:left | right | none | inherit ). Если блоку указать свойство float:left , то он будет выровнен по левому краю, а все остальные блоки будут игнорировать его, как будто этого блока нет, за исключение текста, остальные блоки, которым задано это же свойство будут обтекать его справа, на сколько это позволяет ширина экрана или элемента внутри которого они находятся. Следует заметить, что любой элемент можно сделать блочным, заданием ему свойства display:block , изначально только элементы div по умолчанию считаются блочными элементами, для не блочных элементов (span, p ) свойство float игнорируется и такие элементы располагаются как обычно последовательно сверху вниз. Чтобы свойство float не игнорировалось необходимо задать элементы свойство display:block .

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

Свойство float:none отменяет эффект плавучести для блока, но это не значит что блок будет располагаться как обычно сверху вниз, если выше расположен блок с эффектом плавучести, то нижний блок будет игнорировать верхний и встанет под него, чтобы этого не было нужно задать этому блоку свойство clear:both . Ух, сложно да? Это только, кажется, на первый взгляд, на самом деле все логично и просто, надо только потренироваться.

float:inherit - задает свойство плавучести, такое же, как у родительского блока (блока в который вложен данный дочерний блок).

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

теперь нужно добавить в этот блок еще пару блоков, зеленый и серый с высотой и шириной 100 пикс, у серого блока высота 120 пикс.

Видно, что блоки располагаются в общем потоке снизу вверх, в том порядке, в котором они встречаются в коде, сначала зеленый затем серый в конце голубой. Давайте зеленому блоку зададим свойство float:left , чтобы серый и голубой блоки игнорировали его.

как видно серый блок проигнорировал зеленый блок и встал под него, зеленый блок, как бы сам по себе, голубой блок выстроился за серым. Зададим обтекание всем блокам.

Видно, что блоки выстроились один за другим в том порядке, в котором они идут в коде. Давайте попробуем расположить два блока друг за другом, а третий как обычно ниже. Для этого нужно убрать у третьего блока свойство float:left , но этого недостаточно, так как он залезет под первые два блока, в чем мы убедились раньше. Чтобы этого не произошло нужно задать третьему блоку свойство clear:both ;

header контент сайдбар foter

Вот такая структура получилась, при задании ширины блокам учитывался тот факт, что рамка 1 пикс. увеличивает размеры блока, поэтому размер хедера задан 398 пикс. а не 400 пикс.

Достоинства и недостатки блочной верстки:

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

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

На этом все дорогие читатели, заходите по-чаще.

Верстка блоками div давно уже стала стандартом и имеет ряд преимуществ перед табличной версткой. Однако на деле начинающие разработчики путаются в поведении этих самых блоков.

Давайте разберем основные моменты при блочной верстке. Сейчас мы не будем брать во внимание стандарт html5, а просто рассмотрим основу основ при верстке блоками div, которая используется при создании макета или же какого то отдельного компонента страницы.

Что считать блочным элементом?

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

Итак, от простого к сложному. Посмотрим, как отобразятся блоки div по умолчанию без стилей, влияющих на их положение. Для наглядности стили к элементам будем добавлять инлайново, через атрибут style.

Блок 1
Блок 2
Блок 3

Добавим значение ширины для каждого блока:

Блок 1
Блок 2
Блок 3

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

Теперь возникает вопрос, как расположить блоки div на одной строке , друг за другом?

Для этого существует свойство , которое определяет, с какой стороны блок будет принудительно выровнен. При этом с другого края, он может обтекаться другими элементами.

Свойство float имеет следующие значения:

left - блок выравнивается по левому краю, обтекание справа
right - блок выравнивается по правому краю, обтекание слева
none - обтекание не задано, блок ведет себя по умолчанию, как в предыдущих примерах.

Добавим float:left к нашим блокам, чтобы блоки выровнялись по левому краю:

Блок 1
Блок 2
Блок 3

В результате, блоки выстроились на одной строке. Хорошо, допустим, мы захотели добавить еще один div снизу, и сделаем это без указания свойства float:

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

left - запрещает обтекание с левой стороны, все элементы будут показаны с новой строки (под элементом)
rigth - запрещает обтекание элемента с правой стороны
both - запрещает обтекание элемента с обоих сторон, рекомендуется использовать, когда явно надо показать элемент с новой строки или неизвестно с какой именно стороны возможно обтекание другими элементами

Добавим Блоку 4 свойство clear:left, которое запретит этому элементу обтекание других плавающих элементов с левой стороны.

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Блок 4 разместился с новой строки, как нам надо.

В данном случае мы знаем как располагаются другие блоки, потому в примере сразу указали clear:left. Бывают ситуации, когда мы точно не знаем, с какой стороны встретится плавающий блок, поэтому в таких случаях стоит указывать clear:both, отменяющий обтекание с обеих сторон. Теперь мы разобрались как расположить блоки div на одной строке горизонтально.

Следует помнить, что блоки со значением float располагаются на одной строке, если позволяет ширина родительского элемента. Если блочные элементы не умещаются в ряд, они будут переноситься на новую строку. Если это критично, например, при верстке макетов, нужно это учитывать и у блоков с float обязательно задавать ширину - фиксированную (px) или резиновую (%, rem и т.д.). Дальше посмотрим на такие ситуации.

Как повлиять на блоки, если мы хотим разместить эти блоки по центру?

Классическим решением будет добавление блокам родителя и использование свойства margin: 0 auto;

Почему собственно родителю мы дали класс.wrapper ? «wrapper» в переводе означает «обертка». Это некая общепризнанная практика, определяющая название класса, когда элемент оборачивает другие блоки и тем самым позволяет управлять/влиять на них посредством изменения самого родителя.

Возьмем разметку из предыдущих примеров и усовершенствуем её.

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Здесь вроде всё просто.

А если нам не нравится, что текст вплотную прилипает к краю родительского блока и хотим добавить поля без внесения изменений в разметку, только с помощью css. Добавим элементам свойство padding:

Блок 1. Lorem

Блок 2. Lorem ipsum

Блок 3. Lorem ipsum

Блок 4. Lorem

И видим, что наша верстка рассыпалась! Блок 3 куда то уехал. Почему так вышло? Ответ прост. Добавив поля элементам мы увеличили их ширину. Теперь значения таковы:

Блок 1: 10 + 200 + 10 = 220px

Блок 2: 10 + 150 + 10 = 170px

Блок 3: 10 + 100 + 10 = 120px

Блок 4: 10 + 450 + 10 = 470px

220 + 170 + 120 = 510px

Общая ширина трех блоков 510, они не умещаются в ширину родителя (450) и потому переносятся на новую строку.

Как поправить? Можно сделать следующее:

Задать заново значения ширины для каждого блока с учетом полей. Уменьшив размеры блоков. Все снова аккуратно встанет в одну строку. Согласитесь, это неудобно? Каждый раз лезть в верстку и что-то править.

Использовать свойство box-sizing: border-box. Чтобы расчет брался из общей ширины блока. Советую узнать, что такое блоковая модель сss.

Используем второй вариант, получается так:

Блок 1. Lorem
Блок 2. Lorem ipsum
Блок 3. Lorem ipsum
Блок 4. Lorem

Блок 1. Lorem

Блок 2. Lorem ipsum

Блок 3. Lorem ipsum

Блок 4. Lorem

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

Создаем разметку макета:

Document Шапка сайта Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit rem fugit itaque, est impedit aperiam a autem repellat vitae porro ex expedita, cumque nulla, velit. Soluta velit eos, quia. Fugiat voluptates nisi aliquid eum sapiente sunt nobis, adipisci assumenda earum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. In itaque dolor vitae praesentium consectetur molestias consequatur voluptatem rem dolore nihil officiis voluptates aperiam asperiores, saepe iure repudiandae expedita natus eaque magnam tempore delectus. Подвал

Пишем стили:

Body { max-width: 900px; /* ограничение максимальной ширины */ margin: 0 auto; } /* для всех блоков внутри body изменяем алгоритм расчета ширины блоков и добавляем все блокам поля 10px */ body div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; } .header { background: #CCA69E; padding: 10px; } .left-sidebar { width: 20%; background: #8ED9B6; float: left; } .content { float: left; width: 60%; } .right-sidebar { width: 20%; background: #FF9282; float: left; } .footer { background: #000; clear: both; /* запрещаем обтекание с обоих сторон, блок выводится с новой строки */ color: #ccc; }

Если что-то непонятно — спрашивайте в комментариях.

Цель урока: Знакомство с блочной версткой CSS. Получение навыков использования блочной верстки сайта

При работе со слоями или, иначе говоря, блоками и элементами div , основная нагрузка ложится на CSS, т.к. без свойств слои из себя практически ничего не представляют.
К сожалению до сих пор существует проблема с кроссбраузерностью при работе с блоками. Т.е. одни и те же свойства дают разный результат в разных браузерах. Для борьбы с такими проблемами существуют так называемые хаки. Хак - это набор приемов, когда отдельным браузерам подается код, который понимается только этим браузером, а остальными игнорируется.

Отличительные черты от табличной верстки

Допустим, необходимо создать шаблон страницы с «шапкой», «подвалом» и двумя колонками.
Отличия:

Фиксированный дизайн или
жесткая блочная верстка (две колонки)

Фиксированный макет подразумевает использование слоев заданной ширины, которая определяется разрешением монитора пользователя.
Так как наиболее популярным среди пользователей сети является разрешение монитора 1024×768, то желательно ориентироваться именно на него. Общая ширина блоков в таком случае составляет 900–1000 пикселей (небольшая часть пикселей требуется на полосы прокрутки и границы окна браузера).
Основной блок с контентом размещается по центру , тогда «свободные» поля по краям неплохо смотрятся даже при большом разрешении монитора.

Рис.1. Пример фиксированного дизайна

Общая ширина может выбираться дизайнером, что называется «на глаз», или после сбора каких-либо дополнительных сведений.

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

Выполнение:

«Разбиваем» все основные элементы страницы на блоки следующим образом:
- блок 1 — слой первый (id="shapka"),
- блок 2 и 3 заключаются в единый блок (id="container"),
- блок 2 — слой с меню (id="menu"),
- блок 3 — слой с контентом (id="content"),
- блок 4 — слой с id="bottom" .

Схематично изобразим расположение блоков:

1 2 3 4

1. Задаем свойства «шапки» (блок 1)

Выбираем общую ширину слоев «на глаз» — 750 пикселей.

margin-right: auto; margin-left: auto;

либо задать высоту при помощи отступа

например:

padding-top : 15px ; padding-bottom : 15px ;

padding-top: 15px; padding-bottom: 15px;

Весь код для шапки:

#shapka{ text-align: left; /* Выравнивание внутреннего контента по левому краю */ width: 750px; /* Ширина блока и общая ширина*/ background: #900000; /* Цвет фона */ height: 50px; /* Высота блока */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ padding: 10px; }

2. Создаем свойства контейнера

Задаем ширину контейнера: она должна быть 750px + 20px (общая ширина макета + внутренние отступы в общей ширине макета). Т.е. в контейнере нет внутренних отступов, поэтому увеличим его ширину на 10 пикселей слева и 10 пикселей справа
Если макет должен прилегать к левой части экрана, то браузер выполнит это автоматически. В нашем случае отцентрируем блок контейнера

#container { width: 770px; /* Ширина слоя или (ширина макета+20) */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ }

3. Создаем свойства для блока 2 — меню

Слой номер 2 шириной в 200 пикселей (width)
Для этого же слоя (меню) устанавливаем обтекание соседним блоком, т.е. свойство float: left
Задаем внутренние поля, чтобы текст не «приклеился» к краю слоя (свойство padding)
Задаем цвет текста и заднего фона (background , color)

#menu { width: 200px; /* Ширина слоя */ float: left; color: white; /* Цвет текста */ background: #008080; /* Цвет фона */ padding: 10px; /* Внутренние поля вокруг содержимого */ }

4. Создаем свойства для блока 3 — контент

Задаем ширину слоя из расчета 770px — 200px = 570px, Но! так как мы установили внутренние отступы в обоих блоках 2 и 3, то мы должны вычесть еще 40 пикселей: 20 — внутренние отступы блока с меню и 20 — внутренние отступы блока с контентом. Получим ширину слоя 770px — 200px — 40px = 530px
Задаем обтекание float: left , исключая баг браузера Internet Explorer: если не установить свойство, то между слоями будет зазор. Кроме того, если не установить это свойство, то блок окажется за блоком меню, и только лишь его контент (текст) будет обтекать блок меню справа.
Задаем цвет заднего фона (background) и внутренние поля (padding)

#content { /* Правая колонка*/ width: 550px; /* Ширина слоя */ float: left; /* Обтекание с соседним слоем */ padding: 10px; /* Внутренние поля вокруг содержимого */ background: #e0e0e0; /* Цвет заднего фона */ }

5. Создаем свойства для блока 4 — «подвал»

Ширину слоя устанавливаем в 750 пикселей
Для этого блока надо убрать обтекание, т.е. установить свойство clear
Устанавливаем внутренние поля padding
Задаем цвет для фона (background) и текста (color)
Центрируем блок (margin-right и margin-left)

#bottom{ width:750px; /* Ширина слоя */ clear:left; /* возвращаем блочность и располагаем слой слева */ padding: 10px; /* Внутренние поля вокруг содержимого */ background:#444; /* фон */ color:#fff; /* цвет текста */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ }

Итоговый код: всё вместе

/* для блока 1 - шапка */ #shapka { text-align : left ; /* Выравнивание внутреннего контента по левому краю */ width : 750px ; /* Ширина блока и общая ширина*/ background : #900000 ; /* Цвет фона */ height : 50px ; /* Высота блока */ margin-right : auto ; /* Авто-отступ справа */ margin-left : auto ; /* Авто-отступ слева */ padding : 10px ; /* Внутренние поля вокруг содержимого */ } /* для контейнера */ #container { width : 770px ; /* Ширина слоя или ширина макета+20px */ margin-right : auto ; /* Авто-отступ справа */ margin-left : auto ; /* Авто-отступ слева */ } /* для блока 2 - меню */ #menu { width : 200px ; /* Ширина слоя */ float : left ; /* Обтекание с соседним слоем */ color : white ; /* Цвет текста */ background : #008080 ; /* Цвет фона */ padding : 10px ; /* Внутренние поля вокруг содержимого */ } /* для блока 3 - контент */ #content { /* Правая колонка*/ width : 530px ; /* Ширина слоя */ float : left ; /* Обтекание с соседним слоем */ padding : 10px ; /* Внутренние поля вокруг содержимого */ background : #e0e0e0 ; /* Цвет заднего фона */ } /* для блока 4 - подвал */ #bottom { width : 750px ; /* Ширина слоя */ clear : left ; /* возвращаем блочность и располагаем слой слева */ padding : 10px ; /* Внутренние поля вокруг содержимого */ background : #444 ; color : #fff ; margin-right : auto ; /* Авто-отступ справа */ margin-left : auto ; /* Авто-отступ слева */ }

/* для блока 1 - шапка */ #shapka{ text-align: left; /* Выравнивание внутреннего контента по левому краю */ width: 750px; /* Ширина блока и общая ширина*/ background: #900000; /* Цвет фона */ height: 50px; /* Высота блока */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ padding: 10px; /* Внутренние поля вокруг содержимого */ } /* для контейнера */ #container { width: 770px; /* Ширина слоя или ширина макета+20px */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ } /* для блока 2 - меню */ #menu { width: 200px; /* Ширина слоя */ float: left; /* Обтекание с соседним слоем */ color: white; /* Цвет текста */ background: #008080; /* Цвет фона */ padding: 10px; /* Внутренние поля вокруг содержимого */ } /* для блока 3 - контент */ #content { /* Правая колонка*/ width: 530px; /* Ширина слоя */ float: left; /* Обтекание с соседним слоем */ padding: 10px; /* Внутренние поля вокруг содержимого */ background: #e0e0e0; /* Цвет заднего фона */ } /* для блока 4 - подвал */ #bottom{ width:750px; /* Ширина слоя */ clear:left; /* возвращаем блочность и располагаем слой слева */ padding: 10px; /* Внутренние поля вокруг содержимого */ background:#444; color:#fff; margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ }

1 2 3 4

Результат:

Рис.2. Жесткая блочная верстка из двух колонок

При фиксированном дизайне для макета из трех колонок можно выделить два основных подхода построения модульной сетки:

Использование свойства для расположения колонок рядом.

Использование набора тех CSS свойств, которые предназначены для позиционирования слоев.

Рассмотрим первый случай.

Использование свойства float для макета в три колонки

На рис. 3 — результат использования свойства для трехколонного макета. На самом деле используется 6 слоев — отдельно для заголовков колонок и отдельно для самих колонок.

Рис. 3. Фиксированный дизайн в три колонки

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

Выполнение:

Определим для заголовков три слоя (#header...) и для колонок три слоя (#col...).
Так как колонки и их заголовки расположены на двух разных строках, то объеденим их в контейнеры (class="container").
Получим схематичное изображение расположения блоков:

Получим следующую html-структуру:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Евгений Евтушенко Валерий Брюсов Эдуард Асадов Мне снится старый друг,
который стал врагом,
но снится не врагом,
а тем же самым другом.
Со мною нет его,
но он теперь кругом,
и голова идет
от сновидений кругом. Великое вблизи неуловимо,
Лишь издали торжественно оно,
Мы все проходим пред великим мимо
И видим лишь случайное звено. В любых делах при максимуме сложностей
Подход к проблеме все-таки один:
Желанье - это множество возможностей,
А нежеланье - множество причин.

2. Добавление стилей для заголовков (селектор header...) и колонок (селектор col...)

Ширину колонок и заголовков сделаем у всех одинаковой. Поскольку колонок 3, а средняя ширина страницы должна быть примерно 700-900 пикселей, то установим ширину колонок в 250 пикселей.

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ }

Добавим внутренние поля (отступы от содержимого текста) — padding и внешние отступы, чтобы обеспечить зазор между колонками. Поскольку свойства задаются сразу для все колонок одновременно, а сам весь макет не центрируется, а выравнивается по левому краю, то установим отступ только с одной стороны — левой — у всех колонок одновременно (margin-left).

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ }

Добавим также внешний отступ сверху, обеспечив зазор по вертикали между заголовками и колонками, а также отступ заголовков от верха страницы (margin-top).

#header1, #header2, #header3, #col1, #col2, #col3 { ... float: left; }

Добавляем границу для блоков (border) и и задаем параметры шрифта (font-family , font-weight , font-size , color).

#header1, #header2, #header3, #col1, #col2, #col3 { ... border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */ font-weight: bold; font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ }

Получим код:

#header1 , #header2 , #header3 , #col1 , #col2 , #col3 { width : 250px ; /* Ширина колонок */ padding : 5px ; /* Поля вокруг текста */ /* Отступ сверху */ float : left ; /* Состыковка колонок по горизонтали */ /* Рамка вокруг слоя */ /* Не серифный или рубленый шрифт */ font-weight : bold ; /* Жирное начертание текста заголовка */ font-size : 80% ; /* Размер шрифта */ color : white ; /* Цвет текста заголовка */ }

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ margin-top: 2px; /* Отступ сверху */ float: left; /* Состыковка колонок по горизонтали */ border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ }

Установим задний фон отдельно для каждого селектора.

#header1 { background : #B38541 ; } #header2 { background : #008159 ; } #header3 { background : #006077 ; } #col1 { background : #EBE0C5 ; } #col2 { background : #BBE1C4 ; } #col3 { background : #ADD0D9 ; }

#header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; }

Смотрим промежуточный результат:

Рис. 4. Промежуточный результат

3. Задание стиля для контейнеров

Теперь необходимо объединить в отдельные слои-контейнеры заголовки и колонки и задать им соответствующий стиль — отмену обтекания (clear)

.container { clear : both ; /* Отменяет действие обтекания float */ }

Container { clear: both; /* Отменяет действие обтекания float */ }

Теперь осталось доработать шрифт текста в колонках, изменив его размер, начертание и цвет.

#col1, #col2, #col3 { font-family: "Times New Roman", Times, serif; /* Шрифт серифный или с засечками */ font-size: 100%; /* Размер шрифта */ font-weight: normal; /* Нормальное начертание */ color: black; /* Цвет текста */ }

Итоговый код: всё вместе

/* для колонок и их заголовков */ #header1 , #header2 , #header3 , #col1 , #col2 , #col3 { width : 250px ; /* Ширина колонок */ padding : 5px ; /* Поля вокруг текста */ margin-left : 5px ; /* Отступ слева */ margin-top : 2px ; /* Отступ сверху */ float : left ; /* Состыковка колонок по горизонтали */ border : 1px solid black ; /* Рамка вокруг слоя */ font-family : Verdana, Arial, sans-serif ; /* Рубленый шрифт */ font-weight : bold ; /* Жирное начертание текста заголовка */ font-size : 80% ; /* Размер шрифта */ color : white ; /* Цвет текста заголовка */ } /* для колонок */ #col1 , #col2 , #col3 { font-family : "Times New Roman" , Times, serif ; /* Шрифт с засечками */ font-size : 100% ; /* Размер шрифта */ font-weight : normal ; /* Нормальное начертание */ color : black ; /* Цвет текста */ } /* Цвет фона каждого слоя */ #header1 { background : #B38541 ; } #header2 { background : #008159 ; } #header3 { background : #006077 ; } #col1 { background : #EBE0C5 ; } #col2 { background : #BBE1C4 ; } #col3 { background : #ADD0D9 ; } .container { clear : both ; /* Отменяет действие float */ }

/* для колонок и их заголовков */ #header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ margin-top: 2px; /* Отступ сверху */ float: left; /* Состыковка колонок по горизонтали */ border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ } /* для колонок */ #col1, #col2, #col3 { font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */ font-size: 100%; /* Размер шрифта */ font-weight: normal; /* Нормальное начертание */ color: black; /* Цвет текста */ } /* Цвет фона каждого слоя */ #header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; } .container { clear: both; /* Отменяет действие float */ }

Евгений Евтушенко Валерий Брюсов Эдуард Асадов Мне снится старый друг, который стал врагом, но снится не врагом, а тем же самым другом. Со мною нет его, но он теперь кругом, и голова идет от сновидений кругом. Великое вблизи неуловимо, Мы все проходим пред великим мимо В любых делах при максимуме сложностей Желанье - это множество возможностей,

Результат:

Рис. 5. Результат

Использование позиционирования слоев для макета в три колонки

Возьмем в качестве примера макет, состоящий из трех колонок разграниченных разделительной линией (рис. 6).

Рис. 6. Позиционирование слоев для макета в три колонки с разделителем

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

Выполнение:

1. Создание структуры html-кода

Для данного макета достаточно создать три слоя div для каждой колонки.

Поэтому структура будет простой:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

Иван Бунин Золотится отблеском окно. Белым снегом всё запушено. И всё утро яркие и чистые Хризантемы на моём окне. 1903

Иван Бунин

На окне, серебряном от инея,
За ночь хризантемы расцвели.
В верхних стёклах - небо ярко-синее
И застреха в снеговой пыли. Всходит солнце, бодрое от холода,
Золотится отблеском окно.
Утро тихо, радостно и молодо.
Белым снегом всё запушено. И всё утро яркие и чистые
Буду видеть краски в вышине,
И до полдня будут серебристые
Хризантемы на моём окне.

1903

2. Добавление стилей для колонок

Установим одинаковую ширину колонок (width) и внутренние поля по вертикали и горизонтали (padding).

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; }

Для удаления блочности слоев, т.е. для того, чтобы расположить их рядом по горизонтали, необходимо задать свойство css float .

#col1 , #col2 , #col3 { width : 250px ; /* Ширина колонок */ padding : 0 6px ; /* Поля по вертикали и горизонтали */ float : left ; /* Обтекание слоев */ }

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; /* Поля по вертикали и горизонтали */ float: left; /* Обтекание слоев */ }

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

#col1 , #col2 { border-right : 1px solid #000 ; /* Поля по вертикали и горизонтали */ float : left ; /* Обтекание слоев */ } #col1 , #col2 { border-right : 1px solid #000 ; /* Параметры линии справа от текста */ }

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; /* Поля по вертикали и горизонтали */ float: left; /* Обтекание слоев */ } #col1, #col2 { border-right: 1px solid #000; /* Параметры линии справа от текста */ }

Иван Бунин На окне, серебряном от инея, За ночь хризантемы расцвели. В верхних стёклах - небо ярко-синее И застреха в снеговой пыли. Всходит солнце, бодрое от холода, Золотится отблеском окно. Утро тихо, радостно и молодо. Белым снегом всё запушено. И всё утро яркие и чистые Буду видеть краски в вышине, И до полдня будут серебристые Хризантемы на моём окне. 1903

Дизайн в три колонки готов!

Здравствуйте, дорогие любители айтишной тематики. Сегодня основной способ создания красивых многостраничных сайтов основывается на блочной верстке при помощи тега div.

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

Особенности блочных элементов

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

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

Главным в блоке выступает контент .

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

После идут сами границы, которые именуются английским словом border .

И, наконец, последней рамкой вокруг всего перечисленного выступает margin –отступы от внешнего края border-а до границ страницы или других элементов. Стоит отметить, что задавать эти свойства не обязательно.

В качестве примера запрограммируем 2 и заполним созданные элементы текстом.

Заголовок В этом блочном элементе разместим текст первого объекта. А вот в этом блочном элементе разместим текст второго объекта.

На данный момент в этот код отобразится как обычные два предложения. Для оформления дизайна блоков необходимо подключить таблицу стилей и языком css задать определенные свойства.

Внесем-ка ярких красок в обыденную жизнь html

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

Для этого в контейнере head после тега необходимо добавить строку:

Сам по себе элемент располагается только внутри тега и устанавливает связь с внешними файлами, отвечающими за стили.

Настало время задать цветное оформление и расположение блокам.

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.element1 { opacity: 0.7; background: #edab92; float: left; width: 310px; border: 4px solid red; padding: 6px; padding-right: 15px; } .element2 { width: 310px; float: left; background: #fc0; border: solid 1px grey; position: relative; padding: 6px; left: -65px; top: 55px; border-radius: 10px; }

Element1 { opacity: 0.7; background: #edab92; float: left; width: 310px; border: 4px solid red; padding: 6px; padding-right: 15px; } .element2 { width: 310px; float: left; background: #fc0; border: solid 1px grey; position: relative; padding: 6px; left: -65px; top: 55px; border-radius: 10px; }

Для того чтобы вы смогли лицезреть данный пример во всей красе во вкладке , создайте простой текстовый файл и внесите в него выше написанный текст. После сохраните документ с названием «style.css», обязательно проверьте, совпадает ли название документа со значением атрибута тега href="style.css".

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

Теперь давайте разберем строки css-кода. Для наглядности я структурировал все в таблицу с двумя колонками.

Свойство	Значение
opacity	Отвечает за прозрачность объекта. При opacity равному 0 элементы становятся полностью прозрачными, при 1 – полностью видимыми.
width	Отвечает за ширину блочных элементов.
background	Задает характеристические параметры фона, который в свою очередь может задаваться как цветом, так и картинкой.
border	Позволяет установить толщину, цвет и стиль границ вокруг объекта.
float	Задает выравнивание элемента. Остальные объекты по умолчанию обтекают данный. Можно задать значения: left, right, none (не задает обтекание элементов) или inherit (повторяет значение родительского объекта).
border-radius	Способствует округлению углов блока. Можно указывать как одинаковый радиус для всех углов, так и уникальный для каждого.
top	Определяет расстояния между верхними границами родительского элемента и дочернего.
left	Определяет расстояния между левыми границами родительского и дочернего элементов.

Обратите внимание на строку в коде примера position: relative в element2. Так как этому атрибуту, определяющему позиционирование объекта, задано значение relative, то расположение самого объекта будет меняться не от координат верхнего края браузера, а от координат верхней границы первого блока element1.

Вот почему при задании top = 55px и left = -65px второй блочный элемент сдвинулся вниз на 55 пикселей и вправо на 65 пикселей от границ первого блока.

Кстати, особо внимательные могли заметить, что left = -65px и right = 65px – это одно и то же.

А что же HTML 5

Напоследок хотел бы добавить, что в современной платформе html 5 есть нововведенные блочные теги , , , и другие, которые заменяют привычный div. Их суть применения для человека не отличается ничем, однако они облегчают работу машин.

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

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

Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.

Структура файлов Первым шагом давайте создадим простую структуру файлов для наших файлов.

Создаем папку с названием нашего проекта, например Whitesquare.
В ней создаем пустой файл index.html.
В папке проекта создаем папку css с пустым файлом styles.css.
В папке проекта создаем пустую папку images.

Предварительный осмотр После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:

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

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

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

Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png

В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png

Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png

Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org . В итоге получится два файла:
/images/social.png
/images/social-small.png

Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.

Основные стили И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.

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

Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.

Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.

Прописываем все эти стили в styles.css:

Body { color: #8f8f8f; font: 12px Tahoma, sans-serif; background-color: #f8f8f8; border-top: 5px solid #7e7e7e; margin: 0; } input { background-color: #f3f3f3; border: 1px solid #e7e7e7; height: 30px; color: #b2b2b2; padding: 0 10px; vertical-align: top; } button { color: #fff; background-color: #29c5e6; border: none; height: 32px; font-family: "Oswald", sans-serif; } p { margin: 20px 0; }

В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».

Каркас HTML И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:

Whitesquare

Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.

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

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

Опишем это в теге body:

Wrapper используется для объединения блоков и их выравнивания по центру страницы.

Затем укажем стили блоков:

Логотип

Вставляем логотип в тег header:

Дополнительных стилей не требуется.

Поиск

Вставляем форму поиска в тег header:

… GO

И стили выравнивания по правому краю для нее:

Form { float: right; }

Меню

Для отображения меню необходимо создать список со ссылками внутри тега nav:

CSS стили для него будут следующие:

Nav a { text-decoration: none; } nav ul { margin: 0; padding: 0; } nav li { list-style-position: inside; font: 14px "Oswald", sans-serif; padding: 10px; } .top-menu li { display: inline-block; padding: 10px 30px; margin: 0; } .top-menu li.active { background: #29c5e6; color: #fff; } .top-menu a { color: #b2b2b2; }

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

Заголовок страницы

Заголовок страницы помещается в div с идентификатором heading

ABOUT US

Заголовок имеет следующие стили:

#heading { background: transparent url(../images/h1-bg.png); margin: 30px 0; padding-left: 20px; } h1 { display: inline-block; color: #7e7e7e; font: 40px/40px "Oswald", sans-serif; background: url(../images/bg.png); margin: 0; padding: 0 10px; }

Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.

Колонки Для того, чтобы создать колонки страницы нужно прописать следующие стили:

Aside { float: left; width: 250px; } section { margin-left: 280px; padding-bottom: 50px; }

Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.

Подменю

Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:

И применяем к подменю следующие стили:

Aside-menu li { font-weight: 300; list-style-type: square; border-top: 1px solid #e7e7e7; } .aside-menu li:first-child { border: none; } .aside-menu li.active { color: #29c5e6; } .aside-menu a { color: #8f8f8f; }

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

Контент сайдбара В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.

В html это выглядит так:

OUR OFFICES

В стилях укажем шрифты, цвета и отступы:

Aside > h2 { background: #29c5e6; font: 14px "Oswald", sans-serif; color: #fff; padding: 10px; margin: 30px 0 0 0; } aside > p { background: #f3f3f3; border: 1px solid #e7e7e7; padding: 10px; margin: 0; }

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

Цитата Вёрстку контента начнём с добавления цитаты.

Добавим код цитаты в раздел section

“QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”

John Doe, Lorem Ipsum

И применим для него стили:

Blockquote { margin: 0; background: #29c5e6; padding: 10px 20px; font-family: "Oswald", sans-serif; font-weight: 300; } blockquote p { color: #fff; font-style: italic; font-size: 33px; margin: 0; } blockquote cite { display: block; font-size: 20px; font-style: normal; color: #1d8ea6; margin: 0; text-align: right; }

Здесь нет ничего нового, так же - шрифты, фоны и отступы.

Контент

Lorem ipsum dolor sit amet…

Donec vel nisl nibh…

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

Которому зададим следующие стили:

Figure { display: inline-block; margin: 0; font-family: "Oswald", sans-serif; font-weight: 300; } figure img { display: block; border: 1px solid #fff; outline: 1px solid #c9c9c9; } figure figcaption { font-size: 16px; font-weight: 300; margin-top: 5px; } figure figcaption span { display: block; font-size: 14px; color: #29c5e6; } section > figure + figure { margin-left: 28px; }

Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.

Блок «Our team»

При верстке этого блока добавим сначала заголовок:

OUR TEAM

Со стилем:

Section > h2 { background: #29c5e6; font: 30px "Oswald", sans-serif; font-weight: 300; color: #fff; padding: 0 10px; margin: 30px 0 0 0; }

А затем два блока-строки с карточками сотрудников

John Doeceo Saundra Pittsleyteam leader … Ericka Nobrigaart director Cody Roussellesenior ui designer …

Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:

Figure figcaption { font-size: 16px; font-weight: 300; margin-top: 5px; } figure div { font-size: 14px; color: #29c5e6; } .team-row figure { margin-top: 20px; } .team-row figure + figure { margin-left: 43px; }

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

Футер Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.

Для начала создадим контейнер футера с этим блоками:

И применим к нему оформление:

Footer { background: #7e7e7e; color: #dbdbdb; font-size: 11px; } #footer { max-width: 960px; margin: auto; padding: 10px 0; height: 90px; }

Контейнер с id=”footer” находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.

Лента Твиттера Верстаем содержимое ленты Твиттера:

TWITTER FEED 23 oct

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug

Footer h3 { font: 14px "Oswald", sans-serif; color: #fff; border-bottom: 1px solid #919191; margin: 0 0 10px 0; } #twitter time a { color: #b4aeae; } footer p { margin: 5px 0; } #twitter { float: left; width: 300px; } #twitter p { padding-right: 15px; }

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

Карта сайта Карта сайта представляет собой два блока со ссылками:

SITEMAP Home About Services Partners Support Contact

Footer a { color: #dbdbdb; } #sitemap { width: 150px; float: left; margin-left: 20px; padding-right: 15px; } #sitemap div { display: inline-block; } #sitemap div + div { margin-left: 40px; } #sitemap a { display: block; text-decoration: none; font-size: 12px; margin-bottom: 5px; } #sitemap a:hover { text-decoration: underline; }

Социальные ссылки

Вставляем набор ссылок в контейнер

SOCIAL NETWORKS

И стилизуем их:

#social { float: left; margin-left: 20px; width: 130px; } .social-icon { width: 30px; height: 30px; background: url(../images/social.png) no-repeat; display: inline-block; margin-right: 10px; } .social-icon-small { width: 16px; height: 16px; background: url(../images/social-small.png) no-repeat; display: inline-block; margin: 5px 6px 0 0; } .twitter { background-position: 0 0; } .facebook { background-position: -30px 0; } .google-plus { background-position: -60px 0; } .vimeo { background-position: 0 0; } .youtube { background-position: -16px 0; } .flickr { background-position: -32px 0; } .instagram { background-position: -48px 0; } .rss { background-position: -64px 0; }

Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.

Копирайт