lightanddesign.ru
You might also like
В этом уроке показано, как создать корзину для интернет-магазина с помощью HTML и CSS3. Будут использоваться шрифты Google ("Roboto").
Шаг 1: Создание структуры HTML
Сначала необходимо создать контейнер div. Это называется ".shopping-cart".
Он будет содержать заголовок и три элемента.
- кнопки "удалить" и "добавить в избранное", а также
- Изображение продукта
- Название и описание продукта,
- кнопка, позволяющая задать количество товара, и
- общая сумма.
При создании корзины покупок для вашего сайта на PHP включите шрифты, используемые в этом учебнике. Затем добавьте основные стили для частей тела.
Затем создайте корзину с размером 750 x 423 пикселей и определите ее стиль. Обратите внимание, что мы используем flexbox. Поэтому установите свойство display в flex, а flex-direction в column. Это происходит потому, что flex-direction по умолчанию установлен на row.
Далее создайте первый элемент корзины на сайте на JavaScript. Это будет название продукта. Для этого измените высоту на 60 пикселей и задайте базовый стиль. Следующие три элемента — это товары в корзине. Для каждого из них установите высоту 120 пикселей и отобразите следующее
Вы определили основные стили. Далее давайте поочередно стилизовать элементы. Первые элементы — это кнопки Удалить и Добавить в избранное.
Мне всегда нравилась анимация кнопки сердца в Твиттере. Я думаю, что он будет отлично смотреться в скрипте корзины для покупок на сайте.
Мы установим класс ‘is-active’ при нажатии на кнопку и используем jQuery для ее анимации, о которой мы поговорим подробнее в следующем разделе.
Следующим элементом сценария корзины веб-страницы HTML является изображение товара, где поле должно быть установлено на 50 пикселей вправо.
Далее необходимо определить стиль количества закупаемой продукции. Это кнопка для увеличения или уменьшения количества. Сначала создайте корзину CSS для веб-страницы, а затем используйте JavaScript, чтобы заставить ее функционировать.
Все затраты на продукцию:.
Следующие строки кода также добавляются для реализации функции адаптации корзины на веб-странице HTML.
Это все о CSS.
JavaScript
Перед созданием корзины на сайте создайте анимацию сердца, которая запускается, когда пользователь нажимает на нее.
Затем сделайте так, чтобы кнопка количества работала.
А это окончательный вариант корзины на сайте.
Ваш путеводитель завершен! Надеюсь, вам понравилось и вы узнали что-то новое. Если у вас есть вопросы, оставляйте их в разделе комментариев!
Пожалуйста, оставьте комментарий к текущей теме статьи. Спасибо за отзывы, комментарии, лайки и дислайки!
