用js写一个萌宠用品的页面
时间: 2024-06-08 11:06:29 浏览: 23
好的,以下是一个简单的萌宠用品页面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>萌宠用品</title>
<style>
/* 设置页面样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#header {
background-color: #f1c40f;
color: #fff;
padding: 20px;
text-align: center;
}
#products {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.product {
background-color: #fff;
border: 2px solid #f1c40f;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
margin: 10px;
width: 300px;
}
.product img {
width: 100%;
}
.product h2 {
font-size: 1.5em;
margin: 10px;
}
.product p {
margin: 10px;
}
.product .price {
font-size: 24px;
font-weight: bold;
margin: 10px;
}
</style>
</head>
<body>
<div id="header">
<h1>萌宠用品</h1>
</div>
<div id="products">
<div class="product">
<img src="https://via.placeholder.com/300x200.png?text=Product+1" alt="Product 1">
<h2>狗狗玩具</h2>
<p>这是一款适合狗狗玩耍的玩具,可以让狗狗更加开心健康。</p>
<div class="price">$19.99</div>
</div>
<div class="product">
<img src="https://via.placeholder.com/300x200.png?text=Product+2" alt="Product 2">
<h2>猫咪窝</h2>
<p>这是一款适合猫咪睡觉的窝,可以让猫咪更加舒适。</p>
<div class="price">$24.99</div>
</div>
<div class="product">
<img src="https://via.placeholder.com/300x200.png?text=Product+3" alt="Product 3">
<h2>宠物食物</h2>
<p>这是一款适合宠物食用的食物,可以让宠物更加健康。</p>
<div class="price">$9.99</div>
</div>
</div>
</body>
</html>
```
该页面使用了 HTML 和 CSS 来创建,使用了 flexbox 来布局产品,并使用占位符图片来代替真实的产品图片。您可以将占位符图片的 URL 替换为实际产品图片的 URL。此外,您还可以添加更多产品到产品部分,并修改样式以满足您的需求。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)