好的,以下是一个简单的购物车网站前端页面的代码示例:
HTML 代码:
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>购物车</h1>
</header>
<main>
<section class="items">
<ul>
<li>
<img src="item1.jpg">
<h2>商品1</h2>
<p>商品描述</p>
<div class="item-info">
<span class="price">$20</span>
<button>添加到购物车</button>
</div>
</li>
<li>
<img src="item2.jpg">
<h2>商品2</h2>
<p>商品描述</p>
<div class="item-info">
<span class="price">$15</span>
<button>添加到购物车</button>
</div>
</li>
<li>
<img src="item3.jpg">
<h2>商品3</h2>
<p>商品描述</p>
<div class="item-info">
<span class="price">$25</span>
<button>添加到购物车</button>
</div>
</li>
</ul>
</section>
<section class="cart">
<h2>购物车</h2>
<ul>
<!-- 这里用 JavaScript 动态生成购物车列表 -->
</ul>
<div class="cart-total">
<p>总价: <span class="total-price">$0</span></p>
<button>结算</button>
</div>
</section>
</main>
<script src="app.js"></script>
</body>
</html>