品优购商品详情页html代码记录
时间: 2024-12-06 19:14:16 浏览: 43
HTML+CSS+JavaScript实现的品优购项目源代码,包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
5星 · 资源好评率100%
品优购商品详情页的HTML代码记录是用于展示商品详细信息的一个重要部分。以下是一个简单的示例代码,展示了如何构建一个基本的商品详情页:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品详情</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
.product-image {
width: 40%;
float: left;
}
.product-info {
width: 55%;
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.product-name {
font-size: 24px;
margin-bottom: 10px;
}
.product-price {
font-size: 20px;
color: #e44d26;
margin-bottom: 10px;
}
.product-description {
font-size: 16px;
margin-bottom: 20px;
}
.add-to-cart {
padding: 10px 20px;
background-color: #e44d26;
color: white;
border: none;
cursor: pointer;
}
.add-to-cart:hover {
background-color: #c0392b;
}
</style>
</head>
<body>
<div class="container">
<div class="product-image">
<img src="product-image.jpg" alt="商品图片" width="100%">
</div>
<div class="product-info">
<div class="product-name">商品名称</div>
<div class="product-price">¥99.99</div>
<div class="product-description">这是一个非常棒的商品,具有多种功能和特点。</div>
<button class="add-to-cart">加入购物车</button>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
```
这个示例代码展示了一个基本的商品详情页结构,包括商品图片、名称、价格、描述和加入购物车的按钮。你可以根据实际需求进行进一步的样式和功能扩展。
阅读全文