做一个购物网站物品分类的代码
时间: 2024-02-27 13:55:22 浏览: 12
好的,这是一个简单的购物网站物品分类的代码示例,供您参考:
```html
<!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>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li class="active"><a href="#">商品分类</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">我的账户</a></li>
</ul>
</nav>
</header>
<main>
<h2>商品分类</h2>
<nav class="categories">
<ul>
<li class="active"><a href="#">全部商品</a></li>
<li><a href="#">电子产品</a></li>
<li><a href="#">服装鞋帽</a></li>
<li><a href="#">家具家居</a></li>
<li><a href="#">日用百货</a></li>
</ul>
</nav>
<section class="product-grid">
<h3>全部商品</h3>
<div class="product">
<img src="product1.jpg" alt="商品1">
<h4>商品1</h4>
<p>价格:$50</p>
<button>加入购物车</button>
</div>
<div class="product">
<img src="product2.jpg" alt="商品2">
<h4>商品2</h4>
<p>价格:$80</p>
<button>加入购物车</button>
</div>
<div class="product">
<img src="product3.jpg" alt="商品3">
<h4>商品3</h4>
<p>价格:$100</p>
<button>加入购物车</button>
</div>
</section>
</main>
<footer>
<p>© 2021 购物网站</p>
</footer>
</body>
</html>
```
在这个示例中,我们使用了一个导航栏来显示商品分类,用户可以点击不同的分类来浏览不同的商品。我们还在商品列表上方添加了一个标题,以便用户可以清晰地知道当前浏览的是哪个分类的商品。需要注意的是,这只是一个简单的示例,实际的商品分类页面需要更加复杂和完整,您可以根据自己的需求来进行修改和扩展。