用js写一个菜谱分类网页
时间: 2023-09-30 15:02:03 浏览: 41
好的,以下是一个简单的菜谱分类网页的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜谱分类</title>
<style>
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;
}
.category {
width: 200px;
height: 200px;
margin: 20px;
background-color: #f2f2f2;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 2px 2px 5px #888888;
}
.category:hover {
background-color: #e6e6e6;
}
.category img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>菜谱分类</h1>
<div class="container">
<div class="category" onclick="showRecipes('breakfast')">
<img src="https://picsum.photos/id/1004/300/200" alt="早餐">
<h3>早餐</h3>
</div>
<div class="category" onclick="showRecipes('lunch')">
<img src="https://picsum.photos/id/1015/300/200" alt="午餐">
<h3>午餐</h3>
</div>
<div class="category" onclick="showRecipes('dinner')">
<img src="https://picsum.photos/id/1025/300/200" alt="晚餐">
<h3>晚餐</h3>
</div>
<div class="category" onclick="showRecipes('dessert')">
<img src="https://picsum.photos/id/1062/300/200" alt="甜品">
<h3>甜品</h3>
</div>
</div>
<script>
function showRecipes(category) {
// 在此处编写展示指定分类菜谱的代码
console.log('展示' + category + '菜谱');
}
</script>
</body>
</html>
```
这个网页使用了 HTML 和 CSS 来创建一个包含四个分类的容器,并在每个分类中显示一个图片和标题。当用户点击某个分类时,会触发 `showRecipes` 函数来展示该分类的菜谱。请根据自己的需要修改图片和标题,并在 `showRecipes` 函数中编写展示菜谱的代码。