Создаем интернет-магазин на HTML, CSS, JS и PHP. Часть 1. Верстка

Автор Nadezhda Belousova
Создаем интернет-магазин на HTML, CSS, JS и PHP. Часть 1. Верстка

Добрый день.

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

Вы можете назвать папку как угодно.

Я создал папку Imagine где у меня будет хранится картинки для сюда поместил одну картинку фото товара 1 взятого из json файла её на сайте вы сможете её скачать, что я делаю. Дальше я должен создать 2 файла первый файл меня будет будет грузиться по умолчанию. Второй файл — это остался с с которым я буду хранить в стиле вот таким вот образом разделить экран для удобства и создаю v-html стандартную структуру назову yashop электронной толчок язык контента у меня будет русский. Мне необходимо подключить CSS avcs. Мне необходимо сбросить стили для сброса стиле я воспользуюсь размещенные в интернете кодом reset.css стандартный ответ и вот здесь вот представлен сброс стилей копируй и вставляй, что ещё желательно выполнять практически для. Всех элементов мне удобнее для мобильной верстки будет использовать box-sizing border-box. Это первое. Второе всем элементам. Я задал font-family tahoma verdana шрифт вот таким вот образом. Всё вы готовы для работы с чего мы начнём сначала я создам заголовок растянут на весь экран так я обзываю класс кадр внутреннего у меня будет блок у рыб которые шириной будет 1200 пикселей центрируется по центру для хедера я задам в какой-нибудь цвет. Пусть — это будет. Фёдор ширина 100% высота задать высоту минимальная высота 80 пикселей дальше background-color будет когда. Ну в принципе потом вы всегда можете поменять цвет текста будет белый вот таким вот образом для рэпа я задам следующая стиле шерина. Максима ширина пусть будет 1200 пикселей margin 0 Auto Auto чтобы выровнять по центру в принципе всё внутри хедера пока у меня будет только на этом заголовок речи 1 класс сайт title я позову его g-shock в принципе всё. Давайте проверим как — это выглядит просто запускаете двойным по файлу HTML этого будет достаточно я запущу с локального сервера вот так сейчас выглядит у меня заголовок увидите, что не даёт растягивается на всю ширину экрана понятное дело необходимо будет. Дописать размер положения и так далее неважно дальше меня основное тело магазина я сделаю следующим образом после сидра я поставлю класс мы и внутри у меня будет мерин будет располагаться внутри блока и в нём будет располагаться блок в. Пусть говорят внутреннего вот таким вот образом здесь. Я буду располагать карту товара чтобы визуально увидеть мои я напишу следующее в моем background-color. Ну и поставлю F1 F1 F12 на по цвету будет отличаться частично сейчас в нём ничего поэтому мы его не видел осталось добавить Footer putter пока его сделаю просто чёрным минимальную высоту задом 200 пикселей. Ну в принципе можно не полностью чёрным используя какой-нибудь getcolor выбрать тёмно тёмно синий цвет раз уже начали в этих оттенках делать вот какого-то такого вида вот, а вот цвет копирую и добавляю здесь. Мы тоже будем добавлять позже текст цвет текста сразу сделаем. Я просто ну здесь напишем я чтоб 2016 пока этого достаточно вот таким вот образом сейчас у нас сайт поскольку средний блок пустой мы ничего не видим посмотрите пожалуйста у нас есть чтобы во-первых написано с ошибкой во-вторых. И растянулся на всю ширину экрана внутрь утра я тоже помещу классу рыб и. Ершов Перенесу в него фу таким вот образом и результат мы видим на экране. В принципе для футера можно задать. Найди мне чтобы текст не лип к краю экрана я сюда напишу 120 пикселей этого достаточно вот таким вот хорошо начинаем программировать внутреннюю часть внутри у нас располагается карта товара. Пусть — это будет у нас класс год. Минск карта. Почему умер потому, что у вас будет и большая карта товара который располагается там где мы будем смотреть сам товар для того чтобы я под свечу этот блок Good day Card ограничить его ширину поставлю ширину равную у допустимых будет располагаться четыре на странице, тогда шейного будет равна 25 в принципе многие фиксируют ширину с учётом размеров экрана то есть зафиксировать ширину намного проще чем потом подбирать её по размеру я пока сделаю просто ширину 25% и сделаю какую-нибудь background Scroll просто чтобы видеть данный блок поскольку. И сверху и снизу его будут другие блоки я сделаю следующим образом margin 1%. Но, тогда мне необходимо будет отнять от ширины 2%. Пусть бы 23. Давайте посмотрим на результат очень плохо видно поскольку блока просто видим сами отступы внутри заголовок внутри карты товара у нас будет заголовок допустимое 4 название товара название товара возьму из json файла который вы можете найти на сайте если вы зайдете в раздел интернет-магазин создаем интернет магазин то после первого урока в конце у вас будет идти ссылка на файл. Джейсон Вы можете загрузить. Яриком поместить в корень сайта сохранить вот таким вот образом вот он нас находится где открывают файл. Джейсон он мне — это том, что у нас 1 будет название товара мы сейчас вот копируем просто чтобы примерную ширину экрана. Которая понадобится для данного названия соответственно я оставляю дальше. У меня идёт картинка. Обратите внимание специальные классы посылку всё находится в блоке goods Mine Cart png. Папочка и Magic находится вот этот вот файл альпака не прописывает дальше будет идти некоторых краткие характеристики в частности если мы посмотрим то-то varivas описан объем и стоимость этого пока достаточно п пока напишу так объём 1000 мл цена просто добавлю п.

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

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