用js写一个热菜类介绍网页
时间: 2023-07-15 20:15:35 浏览: 45
好的,以下是一个示例:
```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: #333;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
font-size: 36px;
font-weight: bold;
}
.container {
display: flex;
flex-wrap: wrap;
margin: 20px;
}
.card {
width: 300px;
margin: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
overflow: hidden;
}
.card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card h2 {
margin: 10px;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.card p {
margin: 10px;
font-size: 16px;
line-height: 1.5;
text-align: justify;
}
</style>
</head>
<body>
<header>
<h1>热菜介绍</h1>
</header>
<div class="container">
<div class="card">
<img src="https://via.placeholder.com/300x200?text=Image+1">
<h2>红烧肉</h2>
<p>红烧肉是中国传统的一道名菜,以猪肉为主要材料,经过煮、炖、焖等多道工序制作而成。其特点是色泽红亮,肥而不腻,口感鲜香软糯。</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/300x200?text=Image+2">
<h2>宫保鸡丁</h2>
<p>宫保鸡丁是中国传统的一道名菜,以鸡肉为主要材料,搭配花生米、干辣椒、葱姜蒜等调料制作而成。其特点是口感鲜香、微辣可口。</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/300x200?text=Image+3">
<h2>麻婆豆腐</h2>
<p>麻婆豆腐是中国传统的一道名菜,以豆腐为主要材料,搭配肉末、豆瓣酱、花椒等调料制作而成。其特点是麻辣可口,豆腐软糯,香气四溢。</p>
</div>
</div>
</body>
</html>
```
这是一个简单的静态网页,使用了 HTML 和 CSS。其中,`header` 标签用于显示网页标题,`container` 类用于包含多个菜品介绍卡片,`card` 类用于表示每个菜品的介绍卡片。在 `card` 类中,使用了 `img` 标签显示菜品图片,`h2` 标签显示菜品名称,`p` 标签显示菜品介绍文本。你可以根据自己的需求修改和扩展这个示例。