Создание адаптивного сайта из PSD Разметка «Само совершенство» Урок 5

Автор Pavel Shevchuk
Создание адаптивного сайта из PSD Разметка «Само совершенство» Урок 5

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

Раньше здесь у нас идёт блок с тремя товарами. То есть в принципе он у нас будет довольно-таки похож на тот который мы хотим сделать с нашим макете то есть тоже из трех товаров как бы замене поменяем стилей и здесь нам надо будет создать вот такую ещё шапочку и сделать его соответственно экран пока у нас он где-то вот такой ширины там у нас стоит Max Sweet 16 пикселей нам надо сделать на всю ширину экрана для этого нам нужно создать ещё один вот такой где-то который будет у нас растягиваться на полную ширину экрана ему мы зададим background. Вот такой у нас клан с этим блоком и снизу здесь сидите у нас идёт вчера ещё линия чтобы реализовать соответственно.

Давайте сразу заменим на другие вот сейчас.

Наш Бог. Так выглядит значит папочки сайт 2 где мы работаем открываем индекс если он у вас ещё не открыт и соответственно ищем вот конец слайдером и следующий блок у нас идёт вот отсюда. Том смартфоны товары соответственно здесь у нас стоят три отекла и в них идут картинка H2 текст заглавие и поэт описание наша тикал состоит из трёх как бы кусочков вот здесь картинка заглавие как ссылка и P соответственно сейчас меняем картинки находим расширение джипег оставляем на PNG сохраняем как — это мы поменяли дальше. Давайте создадим обёртку то есть блок который будет заливаться по грантам серым и будет растягиваться до краев нашего браузера соответственно здесь прописан blockdev назначенному класс с которым мы будем дальше работать я его назову медаль триол также тоже. Напишите Давайте мы его закроем и оставим этот закрывающий тег соответственно самый конец перед смартфоны товары. Выдели вот всё, что находится в этом блоге я поставил курсор нажал Shift — это у нас выделяется. Почему так чтобы она сместилась вправо чтобы была какая-то иерархия и сразу после первого этого блока у нас будет заглавие линия и ещё одно заглавие здесь у нас идёт. Стрим вот эту фразу утонченный дизайн. А я возьму — это ваш 3, а дальше у нас идёт линия. Как вы видите стремлению спишем HR дальше у нас идёт ещё соответствующий текст текст ниже. Возьми мой тортик H2 закрывайте теги чтобы они были закрыты у меня в древнем проще если например что-то не закрыта он показывает мне в этом плане проще сделали сохраняем так вот — это появилось всё правильно дальше мы назначим соответствующий стиле теперь поменяем текст который вот здесь у нас ниже — это у нас идёт сразу после картинки как ссылка в соответствующей текст и дальше дальше чтобы назначить здесь сидите другой стиль у нас позолота мы применим декспан потом его пишем для вот этих частей так дальше здесь xpan справочный текст и маму класс чтобы могли влиять на эту часть кода я его назову Golden текст текст несоответствие его закроют для других элементов что. Оно содержит 40 в час 60% и последний элемент сохраняем смотрим всё текст стоит тоже самое сделайте с вот этим блоком и вот этим блоком смотрите как здесь написано. Я сделаю — это самостоятельно потом свяжемся с вами я внес соответствующие справки и также я добавил там где не нужны чтобы текст не был в одну строчку по замыслу на свете есть строчка кончается потом начинает то есть вот здесь вам надо было поставить в конце иначе ваш бы текст так не получился соответственно вот прямо вот так получилось как нам нужно сделайте этот для трёх этих блоков в следующем уроке мы назначим стиле и приведем их в соответствующие виду у нас на макете.

0 комментариев
0

Читайте также