css将商品加入购物车,简单实用的商品购物和添加购物车UI设计

简要说明

这是一款使用jQuery和CSS3制作的简单实用的商品购物和添加购物车界面设计方案。用户可以在商品购物界面中预览各种型号、颜色、尺寸的商品。然后通过点击添加到购物车按钮就可以将该商品添加到购物车中，操作简单直观。

在传统的购物网站中，用户在商品展示界面看中了一件商品之后，点击这件商品的缩略图，然后可以键入到对应水平的子页面中。在这个子页面中，用户可以选择查看一些商品的属性，然后把商品添加到购物车中。但是在这个购物车界面设计中，用户可以直接在购物界面查看商品的属性，并直接将商品添加到购物车中，简化了用户的操作，大大提升了用户的体验度。

通过在商品预览图界面添加“快速添加到购物车”按钮，可以减少用户的操作步骤，提升用户体验，增加转化率。

HTML结构

该购物界面的HTML结构使用一个无序列表来制作。每一个无序列表项中又包含一个无序列表，由于制作商品的图片画廊。div.cd-customization是包含商品的属性和“添加到购物车”按钮的面板。div.cd-item-info是商品的名称和价格。

color-1

color-2

Small

Medium

Add to Cart

Customize

Product Name

$9.99

CSS样式

对于商品的图片画廊，默认情况下，列表项使用绝对定位，并被移动到它的父元素.cd-gallery之外，因此它们是不可见的。它们使用了两个class：.selected用于添加到列表项的第一项，使其可见，.move-left，图片向左移动，使其不可见。

.