Как сделать страницу товара html

Верстка интернет-магазина: список товаров

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

Некоторые приемы уже были рассмотрены в различных статьях. Однако у меня возникло желание объединить их и проиллюстрировать отдельными демо. Надеюсь, в таком виде наработки окажутся полезны верстальщикам, которым часто приходится работать над интернет-магазинами.

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

Адаптивная сетка

Итак, начнем с создания адаптивных плиток — будущих карточек товаров. У нас будет 8 комнатных растений:

Оберткой для товаров послужат блоки, занимающие 100% ширины родителя на мобильных устройствах.

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

И зададим стили карточек товаров.

Исправим это с помощью отрицательного значения margin-right у родителя.

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

Фото товаров

Следующим интересным моментом является верстка блоков с фотографиями растений. Разметка в данном случае будет такой:

Сделаем родителя тега img квадратом с помощью свойства padding-bottom со значением 100%. Вот все стили для данного блока.

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

Осталось немного увеличивать фото при наведении.

Как все это работает можно посмотреть на примере демо.

Описание товара

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

Перечеркнутые цены

Всплывающие кнопки

Чтобы лучше разобраться с кнопками, можно посмотреть это демо.

Переключение вида карточек товаров

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

Далее абсолютно позиционированные элементы занимают свое «естественное» положение. Например, так происходит с кнопками.

Это был последний момент, которым хотелось с вами поделиться. С праздниками и всего доброго.

Источник

Создание страницы товара с интерактивными цветами с помощью HTML, CSS3 и jQuery

В этом уроке мы собираемся создать страницу товара для сайта с использованием HTML, CSS3 и jQuery. Вы можете использовать ее, чтобы показать товары на сайте вашего интернет-магазина.

В уроке, мы будем использовать шрифты Google, Roboto если точно. Убедитесь, что шрифт подключен, прежде чем начинать.

Первым шагом, мы создадим HTML структуру. Вот то, что нам нужно:

Окей, давайте обернем всё классом `.container`.

Beats EP

Теперь, давайте перейдем к следующему шагу и настроим внешний вид.

Добавляем основные стили для body.

Обратите внимание, что классу `.container` задано свойство `display: flex` для выравнивания колонок.

Теперь, давайте добавим некоторую ширину колонкам и свойство `position: relative` для класса `.left-column`, потому что мы будем использовать свойство `position: absolute` для абсолютного позиционирования изображений.

Здорово! Теперь добавим стили для первой колонки с классом `.left-column`. В этой колонке у нас есть три изображения, трех наушников с разным цветом. Прописываем изображениям свойство `opacity: 0`, также изображениям нужно добавить класс `.active` и прописать свойство `opacity: 1`, нам понадобится это позже, когда мы будем работать с jQuery.

Теперь настроим стиль для правой колонки с классом `.right-column`. Начнем с класса `.product-description`, где расположено описание товара.

Теперь, нам нужно настроить стили цветовых конфигураций товара.

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

Отлично! Теперь, давайте зададим стили классу `.cable-configuration`, раздела конфигураций. Здесь у нас есть три кнопки и ссылка. Давайте настроим стили состояний и сделаем их красивыми.

Последнее, что нужно сделать в этой колонке, настроить стиль секции с ценой товара, ей задан класс `.product-price`.

Замечательно! Вот финальный результат того, что мы делали:

Также давайте добавим адаптивность.

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

Обратите внимание, что мы добавляем класс `.active`. Как я упоминал ранее, каждый раз при нажатии на соответствующий цвет.

Посмотреть демо и скачать страницу товара веб-сайта

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

Источник

Как верстать каталог товаров

Дата публикации: 2016-10-03

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

Итак, начнем с определения того, что же такое каталог товаров. Думаю, ответить на этот вопрос сможет практически любой. Каталог — это, по сути, интернет-магазин без возможности купить, т.е. интернет-магазин без корзины. Посетитель такого сайта может смотреть товары, сравнивать их цены, но лишен возможности купить эти самые товары. Вот и вся разница.

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

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

Итак, наш сайт, пусть это будет каталог одежды, должен предполагать категории и товары. Категории я вынесу в сайдбар, ну а товары будут занимать основное место сайта — область контента. Также категории нередко можно видеть и в виде меню между шапкой и контентом. Чтобы не писать много стилей, я использую CSS фреймворк Bootstrap, который и подключу к нашей странице.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

Верстка каталога товаров

Результат по итогу данного урока

Листинги кода урока

index.html:

style.css:

Начало урока. Разбор файла index.html

Посмотрите на сайт https://imdiz.ru/store/. Здесь на главную страницу выведены товары из трех категорий: Desktops, Laptops & Notebooks и Components.

Во-первых, они представлены вкладками (по-английски «tabs»). Во-вторых, каруселью, то есть товары можно листать влево и вправо стрелками.

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

А теперь спуститесь в самый низ файла index.html и посмотрите на код:

Здесь сперва подключается библиотека jQuery. Затем подключается скрипт для создания вкладок. Затем подключается скрипт для создания карусели Owl Carousel. И в конце подключается скрипт, в котором находятся пользовательские настройки для владок и для карусели.

Сейчас пока всё, что вы должны запомнить, это как подключать javascript. В сами скрипты пока не лезьте, если у вас нет опыта программирования. Еще запомните, что лучше подключать скрипты javascript перед закрывающим тегом

Источник

Верстка каталога товаров ч.1

В этом уроке и в следующих 2-х будет верстаться каталог товаров.

Если у Вас нет верстки из бесплатных уроков уровня ПРОФЕССИОНАЛ, то можете скачать ее здесь — imdiz.ru/files/store.zip. Создайте папку store на компьютере и распакуйте скачанный архив в эту папку. У Вас должна получиться папка store со следующей структурой:

В первую очередь подключим правильно шрифт.

Как правильно подключать шрифты в HTML и CSS

Для правильного подключения шрифта нужно:

На уровне ПРОФЕССИОНАЛ шрифт подключался в style.css строкой:

Здесь путь до шрифта указан в строке src: url(https://imdiz.ru/files/store/fonts/Roboto.ttf);. Как видите шрифт подключается прямо с сайта imdiz.ru, и скачивать шрифт не надо.

А в только что скачанном Вами архиве imdiz.ru/files/store.zip путь до шрифта выглядит так src: url(../fonts/Roboto-Regular.ttf); (это в файле style.css в самом верху). Здесь шрифт уже находится в Вашей верстке. Находится он в папке fonts. Вы можете открыть Вашу папку fonts и увидите там несколько шрифтов, и один из них называется Roboto-Regular.ttf. Вообще в этой папке сейчас целое семейство шрифтов Roboto. Да, «семейство шрифтов» — это нормальный термин, используемый в сайтостроении и типографике.

Сразу разберу путь «url(../fonts/Roboto-Regular.ttf)». Эта строка находится в файле style.css, а он находится в папке css. Так вот, первые 2 точки означают — выйти из папки css. Затем слеш означает — зайти в папку fonts. Ну, а в папке fonts уже взять файл Roboto-Regular.ttf. То есть браузер при обработке верстки будет проходить именно такой путь, чтобы подключить нужный шрифт.

Такой путь «../fonts/Roboto-Regular.ttf» в CSS называется относительным. Так как он начинается относительно чего-то, в данном случае относительно файла style.css.

А вот путь «https://imdiz.ru/files/store/fonts/Roboto.ttf» называется абсолютным, так как в нем указан абсолютный адрес.

Шрифт подключен. Идем дальше.

Начало верстки каталога товаров

Теперь нужно сверстать новую страницу сайта с каталогом товаров.

Для сдачи заказчику или работодателю нужно готовить полную страницу. То есть нельзя сверстать только один каталог. Новая страница — это новый html-файл. Но шапка и подвал на всех сайтах одинаковые, поэтому в этот новый html-файл нужно будет скопировать верхушку и подвал верстки из index.html. СSS-файл останется тот же — style.css, он общий для всех страниц сайта. Новые стили нужно будет добавлять в этот же style.css.

Каталог товаров обычно представлен в 2-вариантах:

1-ый вариант:

В 1-ом варианте товары расположены в строку, а во 2-м — в столбец. Обычно в каждом интернет-магазине есть кнопки, чтобы расположить товары как Вы хотите. Обычно кнопки выглядят так: . И верстать нужно оба варианта. Часто верстаются 2 разных файла, например, products.html и products_row.html (row переводится как «строка»).

Начнем с создания нового файла.

Тег ul для верстки каталога товаров

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

Больше интереса представляет собой расположение товаров в строку. Чтобы карточки встали в одну строку нужно использовать CSS-свойство flex.

Сперва сразу итоговые коды верстки products_row.html и style.css:

Ваш style.css можете полностью заменить.

В style.css новый код начинается после строки /* Products_row page */. Большие участки кода для новых страниц лучше комментировать для удобства. Но перед сдачей готовой работы все комментарии нужно удалять. Это считается хорошим тоном.

Добавьте коды в соответствующие файлы, сохраните (CTRL+S).

Для изображения товара сохраните себе эту картинку в папку img:

Откройте products_row.html в браузере. Перед Вами готовая верстка каталога товаров.

И здесь небольшое отступление. На уровне ПРОФЕССИОНАЛ не добавлена тень под полосой меню:

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

Чтобы появилась тень в style.css изменен участок кода:

Добавить комментарий Отменить ответ

Начните зарабатывать версткой сайтов до 50 000 р./месяц уже через 5 дней

Источник