Верстка интернет-магазина: список товаров
Требования к верстке каталогов интернет-магазинов имеют свойство повторяться из проекта в проект. Поэтому у меня выработался набор стандартных приемов, которыми я хочу поделиться в этой статье.
Некоторые приемы уже были рассмотрены в различных статьях. Однако у меня возникло желание объединить их и проиллюстрировать отдельными демо. Надеюсь, в таком виде наработки окажутся полезны верстальщикам, которым часто приходится работать над интернет-магазинами.
В качестве примера мы будем верстать список товаров для интернет-магазина комнатных растений. Демо готового каталога можно посмотреть по ссылке. В результате должен получиться список растений с фото, описаниями и всплывающими кнопками. Кроме того, вид списка можно будет переключать: товары будут выглядеть либо как плитка, либо как таблица.
Адаптивная сетка
Итак, начнем с создания адаптивных плиток — будущих карточек товаров. У нас будет 8 комнатных растений:
Оберткой для товаров послужат блоки, занимающие 100% ширины родителя на мобильных устройствах.
Теперь используем медиа-запросы, чтобы разместить по две, три и четыре плитки в ряд при больших разрешениях монитора.
И зададим стили карточек товаров.
Из-за того, что карточки имеют margin-right равный 20px , весь список имеет нежелательный отступ справа.
Исправим это с помощью отрицательного значения margin-right у родителя.
Теперь все в порядке. Посмотреть на получившуюся сетку можно на страничке демо. Для наглядности блокам в демо задана фиксированная высота.
Фото товаров
Следующим интересным моментом является верстка блоков с фотографиями растений. Разметка в данном случае будет такой:
Сделаем родителя тега img квадратом с помощью свойства padding-bottom со значением 100%. Вот все стили для данного блока.
В указанном блоке расположим картинку таким образом, чтобы при любых размерах она не выходила за пределы родителя, и отцентрируем ее горизонтально и вертикально.
Осталось немного увеличивать фото при наведении.
Как все это работает можно посмотреть на примере демо.
Описание товара
Нам нужно, во-первых, задать описанию товара высоту в четыре строки, а во-вторых, сделать конец последней строки слегка размытым.
Первую задачу можно решить, задав высоту параграфа с описанием, равную четырем line-heigth .
А эффекта размытия последних букв четвертой строки мы добьемся с помощью псевдоэлемента :after с линейным градиентом в качестве фона.
Перечеркнутые цены
Чтобы перечеркнуть цену линией отличной по цвету от текста, задаем блоку с ценой значение color равное #ff3535 и text-decoration — line-through . При этом устанавливаем для вложенных элементов серый цвет текста.
Всплывающие кнопки
Что касается кнопки «Быстрый просмотр», ее реализация сравнительно проста. Кнопка абсолютно позиционирована относительно блока с классом .product-photo , скрыта с помощью opacity: 0 и немного сдвинута вниз за счет transition: translateY(2em) . При наведении курсора на карточку товара стили кнопки меняются следующим образом.
Несколько сложнее дело обстоит с кнопками «В корзину» и «Купить в 1 клик». Здесь внешний контейнер .product-buttons-wrap абсолютно позиционирован в блоке .product и равен родителю по ширине и высоте.
Далее мы стилизуем псевдоэлемент .product-buttons-wrap:before таким образом, чтобы он вытеснял любой контент блока вниз, под нижнюю границу, блока-родителя.
Теперь можно добавить собственно контент — кнопки, размещенные в блоке .buttons .
Благодаря правилу float: left у псевдоэлемента .product-buttons-wrap:before , кнопки расположены ниже основного контента, и блок .buttons занимает всю площадь карточки.
Чтобы лучше разобраться с кнопками, можно посмотреть это демо.
Переключение вида карточек товаров
Для переключения между плиткой и табличным видом каталога мы создаем две кнопки.
По клику на кнопки у списка товаров удаляется и добавляется класс .table-layout .
Таким образом, прописав стили для карточек-дочерних элементов блока ul.table-layout , мы можем «превратить» список в таблицу только с помощью CSS, без перезагрузки страницы. Для этого задается ширина карточек равная 100%. А вложенные блоки теперь займут только часть ширины карточки, например:
Далее абсолютно позиционированные элементы занимают свое «естественное» положение. Например, так происходит с кнопками.
Это был последний момент, которым хотелось с вами поделиться. С праздниками и всего доброго.
Responsive Ecommerce Product Cards In HTML/CSS
Template Name: Responsive Ecommerce Product Cards In HTML/CSS.
High Resolution: — Yes.
Compatible Browsers: — All Browser.
Source Files included: — HTML, Internal CSS, and Images.
An e-commerce card is used to show product details in the shot with price and names. Here we design a responsive eCommerce product card using HTML and CSS with an image.
In this element, we used a custom grid with the help of flex CSS properties. Also, we used the height and width to set this element properly. we used the button in the card at the bottom of rating stars and to make responsive, we used media queries. On the other outside of the card, we used hover effects when you hover your mouse on the card it will go topside a little bit and also we used hover effects in icons.
Make it yours now by using it, downloading it, and please share it. we will design more elements for you.
How To Create Shopping Website Using HTML CSS And jQuery
In this post, you will learn how to make a shopping website using HTML, CSS, and jQuery.You can Easily create an E-Commerce shopping website using HTML, CSS, and jQuery. Beginners easily learn about HTML in this tutorial. I also provide you the youtube video tutorial which helps you to understand this tutorial better way. How to make E-Commerce shopping using the HTML tutorial link is given below.
How To Make a Responsive Shopping Website Using HTML, CSS, And jQuery
- 0.0 — 2.40 min : Intro
- 2.40 — 104.14 min: Create an E-Commerce Shopping Website Using HTML, CSS and jQuery.
This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices.
I create the Navigation Bar for the E-commerce website using HTML, CSS, and Javascript to show the search bar, login, and Sign up box when clicking on their icons. There has the logo of the website on the left side of the navigation, the menu on the center of the navigation, and some icons for show search and login on the right side. This navigation has been fixed with the window when we scroll down the page. All secitons HTML and CSS code is given below.
➤Navigation Bar HTML Code have given below.
➤ Font Awesome Link
➤Navigation Bar CSS Code is have given below.
Search Bar
➤Search Bar HTML Code have given below.
➤ Search Bar CSS Code is have given below.
➤JQuery Link
➤Search Bar JavaScript
Login And Sign Up Form
➤Side Login and Registration Form Bar HTML Code have given below.
➤ Login and Sign Up Form CSS Code is have given below.
➤Login and Sign Up JavaScript Code
Full Slider
➤Full Slider HTML Code have given below.
➤Light Slider Files
➤Full Slider CSS Code is have given below.
➤Full Slider JavaScript Code
FEATURED CATEGORIES
➤Featured Categories Slider HTML Code have given below.
➤Featured Categories Slider CSS Code is have given below.
➤Featured Categories Slider JavaScript Code
Product List-1
➤Product list-1 HTML Code have given below.
➤Product list-1 CSS Code is have given below.
Sale Offer Boxes
➤Sale Offer Boxes HTML Code have given below.
➤ Side Login and Registration Form CSS Code is have given below.
Product List-2
➤Product Box List-2 HTML Code have given below.
Sale Banner
➤Sale Banner HTML Code have given below.
➤Sale Banner CSS Code is have given below.
Services Box and Footer
➤Services Box and Footer HTML Code have given below.
➤Services Box and Footer CSS Code is have given below.
Making Navigation Fix When Scroll
➤JavaScript Code For Fix Navigation
➤CSS Code For Fix Navigation
Making Website Responsive
➤ Side Login and Registration Form CSS Code is have given below.
Верстка каталога товаров ч.1
В этом уроке и в следующих 2-х будет верстаться каталог товаров.
Если у Вас нет верстки из бесплатных уроков уровня ПРОФЕССИОНАЛ, то можете скачать ее здесь — imdiz.ru/files/store.zip. Создайте папку store на компьютере и распакуйте скачанный архив в эту папку. У Вас должна получиться папка store со следующей структурой:
В первую очередь подключим правильно шрифт.
Как правильно подключать шрифты в HTML и CSS
Для правильного подключения шрифта нужно:
- скачать шрифт — это файлы с расширением .ttf;
- загрузить скачанные шрифты в папку сайта — обычно создается новая папку fonts, и все шрифты загружаются в нее;
- подключить шрифты в файле style.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 переводится как «строка»).
Начнем с создания нового файла.
В Вашей папке store создайте файл products_row.html. Как уже было написано, в этот файл нужно перенести верхушку и низ сайта. Всё лишнее нужно убрать. Например, из верхушки нужно убрать строку <link rel=»stylesheet» type=»text/css» href=»https://imdiz.ru/files/store/css/owl.carousel.css»> . Данная строка отвечает за подключение карусели, которая использовалась на главной странице. На странице каталога карусели не будет. Также, внизу нужно убрать все теги <script></script>. Код в products_row.html должен остаться таким:
Тег ul для верстки каталога товаров
Чаще всего оба варианта верстаются списками, то есть тегом <ul></ul>. И выглядит это примерно так:
Информация о каждом товаре помещается в тег <li></li>.
О расположении товаров в столбец рассказывать особо нечего. При использовании тега <ul></ul> карточки товаров итак расположатся сверху вниз, так как <li></li> — это блочный элемент.
Больше интереса представляет собой расположение товаров в строку. Чтобы карточки встали в одну строку нужно использовать CSS-свойство flex.
Сперва сразу итоговые коды верстки products_row.html и style.css:
Ваш style.css можете полностью заменить.
В style.css новый код начинается после строки /* Products_row page */. Большие участки кода для новых страниц лучше комментировать для удобства. Но перед сдачей готовой работы все комментарии нужно удалять. Это считается хорошим тоном.
Добавьте коды в соответствующие файлы, сохраните (CTRL+S).
Для изображения товара сохраните себе эту картинку в папку img:
Откройте products_row.html в браузере. Перед Вами готовая верстка каталога товаров.
И здесь небольшое отступление. На уровне ПРОФЕССИОНАЛ не добавлена тень под полосой меню:
И это приближает обучение к реальным условиям, когда во время верстки проекта, что-то замечается не сразу, а потом редактируется.
Чтобы появилась тень в style.css изменен участок кода:
Здесь за тень отвечает строка box-shadow: 0 10px 10px 0 #e0e0e0; . Первое значение — это сдвиг по оси x, второе значение — сдвиг по оси y, третье — радиус размытия (чем он больше, тем шире и светлее тень), четвертое — растяжение (положительное значение растягивает тень, отрицательное сжимает), последнее значение — цвет тени.