用html和css写一个关于清真食堂的菜单的网页
时间: 2023-09-30 16:03:41 浏览: 37
以下是一个简单的关于清真食堂的菜单的网页示例,使用HTML和CSS编写:
```html
<!DOCTYPE html>
<html>
<head>
<title>清真食堂菜单</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
font-size: 36px;
line-height: 1.2;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.menu-item {
display: flex;
margin-bottom: 20px;
}
.menu-item img {
width: 150px;
height: 150px;
margin-right: 20px;
}
.menu-item h2 {
margin: 0;
font-size: 24px;
line-height: 1.2;
}
.menu-item p {
margin: 0;
font-size: 18px;
line-height: 1.5;
}
</style>
</head>
<body>
<header>
<h1>清真食堂菜单</h1>
</header>
<div class="container">
<div class="menu-item">
<img src="https://via.placeholder.com/150x150" alt="菜品1">
<div>
<h2>菜品1</h2>
<p>这里是菜品1的描述。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod odio sed ullamcorper lobortis.</p>
</div>
</div>
<div class="menu-item">
<img src="https://via.placeholder.com/150x150" alt="菜品2">
<div>
<h2>菜品2</h2>
<p>这里是菜品2的描述。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod odio sed ullamcorper lobortis.</p>
</div>
</div>
<div class="menu-item">
<img src="https://via.placeholder.com/150x150" alt="菜品3">
<div>
<h2>菜品3</h2>
<p>这里是菜品3的描述。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod odio sed ullamcorper lobortis.</p>
</div>
</div>
</div>
</body>
</html>
```
你可以将上述代码保存为一个名为“menu.html”的文件,并将所有的 `https://via.placeholder.com/150x150` 替换为你自己的菜品图片链接。然后在浏览器中打开文件,你就可以看到一个简单的清真食堂菜单网页。