css中点击商品添加到购物车里

最近在学习前端开发中的CSS，觉得很有意思。今天我要和大家分享的是如何实现在网站上点击商品后将它添加到购物车里的效果。这个功能可以让购物变得更加方便快捷。

/* HTML 代码 */
<div class="product">
  <img src="product1.jpg" alt="product 1">
  <p>Product 1</p>
  <p class="price">$20</p>
  <button class="add-to-cart">Add to Cart</button>
</div>

/* CSS 代码 */
.product {
  margin: 10px;
  display: inline-block;
  background-color: #f4f4f4;
  padding: 20px;
  text-align: center;
}

img {
  width: 100%;
  height: auto;
}

.price {
  font-weight: bold;
  font-size: 1.2em;
  margin-top: 10px;
}

.add-to-cart {
  background-color: #2ecc71;
  border: none;
  padding: 10px 20px;
  color: #fff;
  font-size: 1.2em;
  margin-top: 15px;
  cursor: pointer;
}

/* JavaScript 代码 */
const addToCartBtns = document.querySelectorAll('.add-to-cart');
const cartItems = document.querySelector('.cart-items');

addToCartBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const product = btn.parentNode;
    const productName = product.querySelector('p').textContent;
    const productPrice = product.querySelector('.price').textContent;

    const cartItem = document.createElement('div');
    cartItem.innerHTML = `${productName} - <span class="cart-item-price">${productPrice}</span>`;
    cartItems.append(cartItem);
  });
}); 

以上是相关的代码，简单解释一下：我们首先创建了一个商品块的div元素，里面包括商品图片、商品名称、商品价格以及一个按钮“Add to Cart”，接着添加了一些CSS样式，使页面显示更加美观。然后，我们为所有的“Add to Cart”按钮绑定了一个点击事件，当用户点击它时，我们从商品块中获取商品的名称和价格，并把它们展示在购物车中。

以上就是如何用CSS实现添加购物车的功能，我们可以自己去尝试一下，相信会有更多的收获！