用js做一个“狗狗玩具”介绍的网页
时间: 2023-11-22 08:54:30 浏览: 32
好的,以下是一个简单的用 JavaScript 做的“狗狗玩具”介绍的网页,供您参考:
```html
<!DOCTYPE html>
<html>
<head>
<title>狗狗玩具介绍</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 50px;
}
.toy {
background-color: #f5f5f5;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
margin: 20px;
padding: 20px;
text-align: center;
width: 300px;
}
.toy img {
max-width: 250px;
max-height: 250px;
}
.toy h2 {
margin-top: 20px;
}
.toy p {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>狗狗玩具介绍</h1>
<div class="container">
<div class="toy">
<img src="https://images.unsplash.com/photo-1561069888-22abb7c94a3f" alt="狗狗飞盘">
<h2>飞盘</h2>
<p>狗狗们喜欢追逐和抓住飞盘,这是一种很好的锻炼方式。</p>
</div>
<div class="toy">
<img src="https://images.unsplash.com/photo-1574717907068-0fdecc871b7d" alt="狗狗球">
<h2>球</h2>
<p>狗狗们也很喜欢追逐和抓住球,可以让它们消耗多余的精力。</p>
</div>
<div class="toy">
<img src="https://images.unsplash.com/photo-1580519541398-e301a28c8e17" alt="狗狗咬胶">
<h2>咬胶</h2>
<p>狗狗们喜欢咬东西,咬胶可以满足它们的需求,并且还有助于清洁它们的牙齿。</p>
</div>
<div class="toy">
<img src="https://images.unsplash.com/photo-1584860639262-aee6e5a3c8a8" alt="狗狗绳">
<h2>绳</h2>
<p>狗狗们也喜欢拉扯,绳子是一个很好的选择,可以和狗狗一起玩耍。</p>
</div>
</div>
<script type="text/javascript">
// 可以在此处添加 JavaScript 代码,实现更多功能,比如添加购买链接等等。
</script>
</body>
</html>
```
这个网页使用了 flexbox 布局,将狗狗玩具以卡片的形式展示出来。每个玩具都有一张图片,一个标题和一个简短的描述。您可以根据需要自行修改和添加内容,比如添加购买链接等等。