用js写一个凉菜类介绍网页
时间: 2023-10-03 10:11:30 浏览: 49
好的,以下是一个简单的凉菜类介绍网页的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>凉菜介绍</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
margin-top: 50px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 50px;
}
.card {
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
margin: 20px;
width: 300px;
padding: 20px;
border-radius: 5px;
transition: transform 0.3s ease-in-out;
}
.card:hover {
transform: scale(1.05);
}
.card img {
max-width: 100%;
border-radius: 5px;
}
.card h2 {
font-size: 20px;
margin-top: 10px;
margin-bottom: 5px;
}
.card p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
}
.card a {
color: #ff6600;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease-in-out;
}
.card a:hover {
color: #cc5500;
}
</style>
</head>
<body>
<h1>凉菜介绍</h1>
<div class="container">
<div class="card">
<img src="https://i.imgur.com/Nx6mZck.jpg" alt="拌黄瓜">
<h2>拌黄瓜</h2>
<p>清爽可口的拌黄瓜是夏季常见的凉菜之一。将黄瓜切成薄片,加入调料拌匀即可。</p>
<a href="#">了解更多</a>
</div>
<div class="card">
<img src="https://i.imgur.com/7l7Kza5.jpg" alt="凉拌海带">
<h2>凉拌海带</h2>
<p>富含蛋白质和多种营养物质的海带,是一道健康的凉菜。将海带切成丝,加入调料拌匀即可。</p>
<a href="#">了解更多</a>
</div>
<div class="card">
<img src="https://i.imgur.com/BEkDz93.jpg" alt="凉拌豆腐">
<h2>凉拌豆腐</h2>
<p>富含蛋白质和钙质的豆腐,是一道营养丰富的凉菜。将豆腐切成块状,加入调料拌匀即可。</p>
<a href="#">了解更多</a>
</div>
</div>
</body>
</html>
```
这个网页使用了 HTML、CSS 和 JavaScript。其中,HTML 用于定义页面结构,CSS 用于美化页面样式,JavaScript 用于实现交互效果。在这个示例中,我们使用了 flexbox 布局来实现卡片式的凉菜介绍,同时添加了 hover 效果和链接,以增强用户体验。
相关推荐
![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)