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

Всем противникам бутстрапа я могу сказать — вы не правы )). Дело в том, что бутстрап содержит огромное количество мелочей, которые мы не узнаем, даже изучая Responsive-верстку по учебникам. Например, очень трудно сымитировать поведение row или container, которые содержат все внутренние дивы и обтекают их. Обычно содержащий див выглядит как полоска сверху тех дивов, которые, по идее, находятся внутри него.

Итак, скачаем готовый макет: rezina

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

div{
border: 3px solid #9960b7;
}

О боже, все упало! Что делать?!?

Переходим к очень важному свойству в нынешние времена, называется border-box.

Это свойство указывает — как интерпретировать паддинги и бордеры (внутренние оступы и рамки). Дело в том, что каждый паддинг и каждая рамка имеют свою ширину. Например, у нас бордер равен 3 пикселям в ширину. Поэтому наши контейнеры (дивы) перестали «влезать» в общий, содержащий их див. Вместо того, чтобы высчитывать, сколько всего у нас паддингов и рамок, мы можем одним движением руки исправить наше положение. Добавляем в div:

div{
border: 3px solid #9960b7;
-moz-box-sizing: border-box; /* Для Firefox */
box-sizing: border-box; /* Ширина блока с полями */
}

Префикс -moz- используется для интерепретации свойства Мозиллой. Если вы находите код через Google, который идет с префиксами перед основным свойством — копируйте все варианты — для разных браузеров требуются префиксы. Обычно одно и то же свойство с разными префиксами повторяется 4 раза — для ИЕ, Мозилы, Оперы и Гугл Хрома.

Итак, вставили свойство, обновили страницу. Вуаля! Все стало на свои места, так как мы сказали браузеру, чтобы он падинги и бордеры считал как ЧАСТЬ дива, к которому они принадлежат.

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

Однако мы столкнулись с новой проблемой — наши рамки двоятся, а нужна имитация одинарной на стыках блоков. К сожалению, для дивов нет свойства border-collapse. Что же мы можем сделать? Мы можем просто-напросто убрать «лишние» рамки. Посмотрим на макет:

Начинаем «снаружи» «внутрь». Второй основной блок — избавляемся от рамки слева.

в .d2 пишем:

border-left: none;

Для «кнопок» сверху (Главная и Новости) мы можем убрать вообще все рамки, сверху и по бокам будет рамка общего дива, снизу — рамка дива от «Я — заголовок 2 уровня».

Так как обе кнопки держатся за класс d2, то мы ставим в него:

border: none;

Теперь мы видим, что на обоих элементах рамка пропала, но нужно отделить «Главную» от «Новостей». Удача — на блоке «Новости» стоит дополнительный класс d3_2, давайте напишем ему бордер слева:

border-left: 3px solid #9960b7;

Окей. Пошли дальше. Для «Я — заголовок 2 уровня» убираем все рамки, кроме верхней, пишем в .d4:

border: none;
border-top: 3px solid #9960b7;

И так ячейка за ячейкой. В целом должно получится:

.d2{
width: 50%;
height: 800px;
float: left;
border-left: none;
}

.d3{
width: 50%;
height: 100px;
float: left;
background: #eb008b;
border: none;
}
.d3_2{
background: violet;
float: left;
border-left: 3px solid #9960b7;
}
.d4{
width: 100%;
background: #fff;
height: 100px;
clear: both;
border: none;
 border-top: 3px solid #9960b7;
}
.d5{
width: 50%;
height: 600px;
float: left;
text-align: center;
padding: 15px;
border: none;
border-top: 3px solid #9960b7;
 border-right: 3px solid #9960b7;
}
.d6{
width: 50%;
background: #a8e600;
height: 300px;
float: left;
border: none;
 border-top: 3px solid #9960b7;
}
.d6_2{
background: #eb008b;
}

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

Теперь — что с нашей кнопкой?

Во-первых, она должна быть прибита вправо, добавляем свойство:

float: right;

Обновили страницу — кнопка слишком прилипла к краю дива, дадим ей маргин (внешний отступ):

margin: 10px;

Во-вторых, мне не нравится, что вокруг кнопки дурацкий бордер, имитирующий объем. Такая некрасота тянется с 90-х годов, нужно обнулить значение:

border: none;

Всё, красота!

Итак, в итоге свойства кнопки в цсс выглядят так:

button {
background: #eb008b;
width: 200px;
height: 41px;
color: white;
font-family: Georgia;
float: right;
 margin: 10px;
 border: none;
}

Проблемы с картинкой на мобильном разрешении

Внимание. Если вы ставите свойство:

img{
max-width: 100%;
}

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

Это был настоящий прорыв в html и css — автоматический ресайз картинок без искажения пропорций. Поэтому разберемся — почему наша картинка исказилась? Вытянулась по вертикали? Потому что к ней привязан класс right, у которого прописаны жетские ширина и высота. А так как максимальная ширина у нас 100%, то по ширине картинка меняет размер, а по высоте остается такой же!

Удилим все свойства внутри right.

Всё! Картинка стала нормальной при любом ресайзе, на узком мониторе она уменьшается, на широком — увеличивается, не теряя пропрции.

Всё же она тоже прилипла к краю дива, нужно её отлепить. Здесь мы используем очень интересное свойство для содержащего картинку дива. Дело в том, что картинки можно выравнивать внутри дива так же, как текст! Пишем в .d5

text-align: center;

Обновили страницу — ха-ха, картинка встала по центру, но все же охота ее еще и от верха отлепить. Воспользуемся ради разнообразия не маргином для картинки, а падингом для того же d5, который ее содержит:

padding: 15px;

В целом у вас получится:

.d5{
width: 50%;
height: 600px;
float: left;
text-align: center;
 padding: 15px;
}

Попробуйте опять отресайзить окно браузера до размеров мобилки — смотрите, картинка даже при уменьшении сохраняет вокруг себя пространство и ни к чему не липнет! Кстати — падинги для всех колонок в бутстрапе по умолчанию равны 15px. Часто, наоборот, приходится их обнулять, чтобы тянуть картинки внутри дивов на всю ширину, без просветов.

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

text-align: center;

И что размер шрифта в правых блоках слишком мал.

Но это уже мелочи, которые, однако, требуют вашего внимания, так как на выходе вы должны получить макет, 1 в 1 совпадающий с дизайнерским фотошоп-файлом. Так что скрупулёзно снимайте все размеры шрифтов, все цвета и особенно оступы — для этого с помощью инструмента Выделение выделяйте пространство от картинки, к примеру, до верхней границы дива, и смотрите в панели Информация (Info), сколько там пикселей.

Кстати, раз вы занимаетесь веб-дизайном, вам нужно в Предпочтениях (Preferencies) Фотошопа указать в линейках показывать все в пикселях, а не сантиметрах: