关于学校美食的网页代码静态网页
时间: 2024-02-15 07:02:04 浏览: 30
以下是一个简单的学校美食网页的静态网页代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>学校美食</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
font-size: 30px;
}
nav {
background-color: #f5f5f5;
overflow: hidden;
padding: 10px;
}
nav a {
float: left;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
nav a:hover {
background-color: #ddd;
color: #333;
}
section {
background-color: #fff;
padding: 20px;
margin: 20px;
}
h1 {
font-size: 24px;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
}
img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
font-size: 14px;
}
</style>
</head>
<body>
<header>
<h1>学校美食</h1>
</header>
<nav>
<a href="#">热门推荐</a>
<a href="#">食堂菜品</a>
<a href="#">超市商品</a>
<a href="#">外卖点餐</a>
</nav>
<section>
<h1>热门推荐</h1>
<img src="food1.jpg" alt="美食图片">
<p>龙虾煲,口感鲜美,香气扑鼻,价格实惠。</p>
<img src="food2.jpg" alt="美食图片">
<p>麻辣烫,辣味十足,清热解暑,适合夏天食用。</p>
</section>
<section>
<h1>食堂菜品</h1>
<img src="food3.jpg" alt="美食图片">
<p>红烧肉,肉质鲜嫩,滋味浓郁,是食堂的招牌菜。</p>
<img src="food4.jpg" alt="美食图片">
<p>蒸鱼,鱼肉鲜嫩,口感细腻,营养丰富。</p>
</section>
<section>
<h1>超市商品</h1>
<img src="food5.jpg" alt="美食图片">
<p>进口水果,种类丰富,新鲜可口,价格实惠。</p>
<img src="food6.jpg" alt="美食图片">
<p>饮料零食,品种多样,口感美味,适合下午茶点心。</p>
</section>
<section>
<h1>外卖点餐</h1>
<img src="food7.jpg" alt="美食图片">
<p>麦当劳,汉堡薯条套餐,价格实惠,口感好。</p>
<img src="food8.jpg" alt="美食图片">
<p>肯德基,炸鸡炸鸡,你选哪个?</p>
</section>
<footer>
<p>© 2021 学校美食</p>
</footer>
</body>
</html>
```
请注意,这只是一个简单的静态网页示例,实际网页需要根据需要进行修改和完善。