用前端帮我写一个商品详情页,带图片展示的
时间: 2023-10-26 14:06:03 浏览: 32
好的,以下是一个简单的商品详情页的前端代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>商品详情页</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
font-size: 32px;
margin: 0;
padding: 10px 0;
}
p {
font-size: 18px;
margin: 0;
padding: 10px 0;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
padding: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>商品名称</h1>
<img src="https://example.com/product-image.jpg" alt="商品图片">
<p>商品描述Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non mauris vel tellus vestibulum fermentum. Sed euismod mollis massa, eget lacinia arcu feugiat id. Vivamus ullamcorper velit a massa consequat, non sagittis augue venenatis. Nulla facilisi. Aliquam vestibulum metus ante, a ultrices purus blandit at. Nam iaculis, nibh accumsan accumsan malesuada, felis metus blandit enim, ut hendrerit dolor dolor nec ipsum. Phasellus volutpat elementum elit, vel vestibulum velit fringilla vel. Pellentesque sed sapien sit amet neque pretium ullamcorper. Sed auctor, orci a malesuada bibendum, diam velit finibus est, quis commodo nisi enim eget libero. Ut rhoncus ultricies eros et suscipit. Nam euismod, lacus nec euismod euismod, arcu odio semper dui, id faucibus quam nulla et magna. Nulla facilisi. Ut at elit mauris.</p>
<p>价格:$99.99</p>
<p>库存:10</p>
</div>
</body>
</html>
```
该示例使用了 HTML 和 CSS,展示了商品名称、商品图片、商品描述、价格和库存等信息,并对页面进行了基本的样式设计。你可以根据自己的需求进行修改和扩展。