jQuery購物車樣式是Web開發中的一個常見需求。在實現購物車功能的同時，美觀的樣式也是必不可少的。jQuery購物車樣式可以使用CSS和JS代碼來進行樣式的設計和添加效果。下面是一個示例代碼：
<html>
<head>
<title>jQuery購物車樣式示例</title>
<style>
/* CSS樣式 */
.shopping-cart {
border: 1px solid #ccc;
padding: 10px;
width: 300px;
}
.cart-item {
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
padding-bottom: 10px;
}
.cart-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.cart-item img {
float: left;
margin-right: 10px;
width: 50px;
}
.cart-item h4 {
margin: 0;
font-size: 16px;
}
.cart-item p {
margin: 0;
font-size: 14px;
}
.cart-total {
margin-top: 10px;
text-align: right;
}
.cart-total strong {
font-size: 18px;
color: #f00;
}
</style>
</head>
<body>
<div class="shopping-cart">
<div class="cart-item">
<img src="images/product1.jpg" alt="product 1">
<h4>Product 1</h4>
<p>$19.99</p>
</div>
<div class="cart-item">
<img src="images/product2.jpg" alt="product 2">
<h4>Product 2</h4>
<p>$29.99</p>
</div>
<div class="cart-total">
<p>Total: <strong>$49.98</strong></p>
<a href="#">Checkout</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
/* jQuery代碼 */
$(function() {
var total = 0;
$('.cart-item').each(function() {
var price = parseFloat($(this).find('p').text().substr(1));
total += price;
});
$('.cart-total strong').text('$' + total.toFixed(2));
});
</script>
</body>
</html>上述代碼中，CSS樣式定義了購物車的樣式，包括邊框、內邊距、商品條目、圖片、文字等。JavaScript代碼使用jQuery來計算商品總價，并將結果渲染到HTML頁面中。使用jQuery可以方便地操作HTML元素，實現動態效果。
上一篇jquery購物車總計
下一篇css怎么控制顯示字數