商品分类展示页面html
时间: 2023-10-25 20:16:48 浏览: 120
以下是一个简单的商品分类展示页面的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>商品分类展示页面</title>
<style>
/* 样式表,用于美化页面 */
.category {
margin: 20px auto;
width: 80%;
display: flex;
flex-wrap: wrap;
}
.category-item {
flex-basis: 20%;
margin: 10px;
padding: 10px;
text-align: center;
background-color: #f2f2f2;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.category-item:hover {
transform: scale(1.05);
background-color: #ddd;
color: #fff;
}
</style>
</head>
<body>
<div class="category">
<div class="category-item">
<h3>电子产品</h3>
<p>手机、电脑、平板等</p>
</div>
<div class="category-item">
<h3>服装鞋帽</h3>
<p>男装、女装、童装、运动鞋等</p>
</div>
<div class="category-item">
<h3>家居用品</h3>
<p>家具、家饰、厨具等</p>
</div>
<div class="category-item">
<h3>食品饮料</h3>
<p>零食、饮料、茶叶等</p>
</div>
<div class="category-item">
<h3>美容护肤</h3>
<p>化妆品、护肤品、香水等</p>
</div>
</div>
</body>
</html>
```
上述代码中,使用了`<div>`标签来创建一个包含所有商品分类的容器,并使用`display: flex;`和`flex-wrap: wrap;`来实现自适应布局。每个商品分类使用一个`<div>`标签,并设置了基本的样式,包括背景颜色、边框、圆角等。在鼠标悬停在商品分类上时,使用CSS`transform`属性实现了放大效果。