用js写一个“狗狗玩具“介绍的页面
时间: 2023-12-10 14:04:29 浏览: 27
好的,以下是一个简单的示例:
```
<!DOCTYPE html>
<html>
<head>
<title>狗狗玩具介绍</title>
<style>
h1 {
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.card {
width: 300px;
margin: 20px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
text-align: center;
}
.card img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.card h2 {
font-size: 18px;
margin-top: 0;
margin-bottom: 10px;
}
.card p {
font-size: 14px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<h1>狗狗玩具介绍</h1>
<div class="container">
<div class="card">
<img src="https://picsum.photos/id/237/300/200" alt="狗狗玩具1">
<h2>球球</h2>
<p>狗狗们最爱的玩具之一,可以让狗狗们运动,同时也可以训练它们的反应能力。</p>
</div>
<div class="card">
<img src="https://picsum.photos/id/238/300/200" alt="狗狗玩具2">
<h2>咬咬棒</h2>
<p>适合爱咬东西的狗狗,可以让它们发泄一下自己的精力,同时也可以帮助它们锻炼牙齿。</p>
</div>
<div class="card">
<img src="https://picsum.photos/id/239/300/200" alt="狗狗玩具3">
<h2>填充玩具</h2>
<p>可以放入食物或零食,让狗狗们在嬉戏中得到奖励,同时也可以训练它们的智力和耐心。</p>
</div>
</div>
</body>
</html>
```
这是一个基本的 HTML 和 CSS 页面,展示了三种狗狗玩具的介绍,包括图片、名称和简单描述。你可以根据自己的需求进行修改和扩展。