Как верстать сайт из PSD в HTML? Стилизация input и select на CSS.

Автор Ruslana Chernenko
Как верстать сайт из PSD в HTML? Стилизация input и select на CSS.

Привет.

Это четвёртое видео в котором и верстаем сайт индийской кухни по макету. Если ты не смотрел предыдущие видео то ссылка на плейлист появится. В верху страницы прямо сейчас в этом видео мы сверстать форму обратной связи и бронирования столика и так.

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

Гранта изображение которое только, что взяли из Photoshop установим значение новый для того чтобы изображение в полицию каждым по центру. А размер ковра чтобы покрыть всё пространство секции полностью укажем внутренние отступы для секции так наш контент опуститься ниже как того требует макет вернёмся к разметке нам понадобится блок в котором будем размещать весь контент и его Class Menu Content внутреннего создадим разметку заголовки и список меню заголовки повести. В общем блок как и перечисление блюдо начнем заголовков вставь необходимые текст и оформим стиле сейчас нам необходимо выровнять блоки по центру задачи лифты и цвета текста для начала копируем в стиле следующего блока с такой же разметкой дали разместим блок заголовков и текста внутри его дочерних элементов по центру копируем стиле из похожего блока нам придётся обернуть текст в теге span добавим секции свойство Display Flex justify-content Center тем самым выровнять контент по центру с подзаголовком поступим. Аналогично копируем стиле и немного изменим разметку мы не очень грамотно подошли к разбору макета в одном из следующих видео поговорим о том как работать с макетами правильно экономить время на верстке добавим белую подложку ко всему содержимому для этого используем background со значением заданным через USB чтобы управлять прозрачностью заливки приступим к разметке спирт для левого и правого списка создаем отдельные блоки внутри которых в списке будут располагаться в колонку подготовим место под названием описание блюда, а также размножить их добавим текст в блоке описания сейчас воспользуемся рыбой. А в последующие замене в его настоящий. А может и нет для общего блока зададим свойство Display Flex Direction Row чтобы колонки не располагались в строку, а также разнесем их от центра растением контейнер на все 1440 пикселей используется 100% для блока колонками меню зададим ширину этом сделаем ненадолго, но мне так удобней для блока с контентом и блока с колонками заводи машину 100% так и не займёт всю ширину родительского блока колонки разъехались совместимых центр заниматься только внутри блока с контентом используя сокращённую запись поединок. Добавь название блюд и займемся их оформления для этого снова будем копировать стиль и других элементов и менять значение наберу название Dragons пантекстиль применяется правильно размер заголовка слишком велик установим верное значение размера шрифта, а также. Нижневартовск тупо поступил точно также, но вместо стен будем использовать тпы уменьшить межстрочный интервал. Заведи боковые выступы блока контента. А чтобы развести колонки меню используем отступ справа от левой колонке. Я совсем забыл, что нам необходимо изображение для этого нужно изменить разметку повернем название описание в отдельный блок, а также добавим блоки для изображения такси города изображение и описание сделаем флекса задание направление в строку чтобы изображение было рядом с описанием блоку изображение создадим высоту и ширину установлен прозрачную обводку зададим радиус закругления в 50%, а так мы получим окружность изображение будем подключать через background сейчас изображение получилось не круглым — это происходит из-за проблемы с размерами блока с описанием уберём ограничение ширины блока в стихах и изменим классу блоков так стили применяются ко всем блокам и после чего мы зададим ширину блока с описанием 80% теперь наши изображение будет круглым уместен изображён добавим свойства новый вид, а также зададим размер и положение изображение внутри блока ABS типы текста продублирую блок изображение, а также берём остальные текстовые блоки для того чтобы использовать разные изображения для фона зададим дополнительный индивидуальный классы для них подготовим изображение осталось подключить оформление и указать изображение для подключения добавим цену так как мы ранее уже делали блок с ценой то воспользуемся стилями из блока для этого ценного вернусь текст исправим правый отступ чтобы текст был немного пошире и зададим общему благу изображение и описание justify-content space-between чтобы добавить отступ от изображения до ли у нас в пакете блок который полностью состоит изображение для начала экспортировать в папку с изображениями сайт, а затем созвонимся какую зададим для неё фоновые изображения. То которое только, что получили из макета будет без повторов на весь блок располагаться будет по центру высоту секцию каждом составе она будет высотой высотой экрана. Ну — это первое время двигаемся дальше. Сейчас наша цель секция с формой бронирования столиков разметка нам уже знакомо секции внутри которой контейнер забудем фоновый цвет все секции, а также сделаем контейнер флисовый внутри контейнера разместить блок заголовка формы зададим необходимые свойства чтобы расположить по центру и часть свойства копируем из похожего блока. Ну конечно не забываю центрирование контента зададим внутренние отступы блока.

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

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