商品详细信息展示页面html
时间: 2023-10-29 12:32:13 浏览: 39
<!DOCTYPE html>
<html>
<head>
<title>商品详细信息展示页面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>商品详细信息展示页面</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">我的</a></li>
</ul>
</nav>
<main>
<div class="product-image">
<img src="product-image.jpg" alt="商品图片">
</div>
<div class="product-info">
<h2>商品名称</h2>
<p>商品描述</p>
<h3>价格</h3>
<p>¥100.00</p>
<h3>库存</h3>
<p>100</p>
<h3>颜色</h3>
<p>红色、蓝色、绿色</p>
<h3>尺寸</h3>
<p>小号、中号、大号</p>
<a href="#" class="add-to-cart-btn">加入购物车</a>
<a href="#" class="buy-now-btn">立即购买</a>
</div>
</main>
<footer>
<p>版权信息</p>
</footer>
</body>
</html>