写一个手机端商品详情页面
时间: 2023-06-26 09:10:10 浏览: 50
以下是一个简单的手机端商品详情页面的示例代码:
```
<!DOCTYPE html>
<html>
<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;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
img {
max-width: 100%;
}
h1 {
font-size: 1.5rem;
margin: 10px 0;
}
p {
margin: 10px 0;
}
.price {
color: #f00;
font-size: 1.2rem;
margin: 10px 0;
}
button {
background-color: #f00;
border: none;
color: #fff;
cursor: pointer;
display: block;
font-size: 1.2rem;
margin: 10px auto;
padding: 10px 20px;
}
</style>
</head>
<body>
<header>
<h1>商品名称</h1>
</header>
<main>
<img src="商品图片.jpg" alt="商品图片">
<p>商品描述</p>
<p class="price">¥ 99.99</p>
<button>立即购买</button>
</main>
</body>
</html>
```
这个页面中包含了一个标题栏、商品图片、商品描述、价格和一个购买按钮。可以根据需求进行修改和扩展,比如加入更多商品信息、评论区等等。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)