写一个山东美食食材介绍的网页的代码
时间: 2024-03-10 09:48:29 浏览: 24
以下是一个简单的山东美食食材介绍网页的HTML和CSS代码:
HTML代码:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>山东美食食材介绍</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>山东美食食材介绍</h1>
</header>
<nav>
<ul>
<li><a href="#jidan">嫩煎蛋</a></li>
<li><a href="#huangguan">黄瓜</a></li>
<li><a href="#shanyao">山药</a></li>
</ul>
</nav>
<main>
<section id="jidan">
<h2>嫩煎蛋</h2>
<p>嫩煎蛋是山东菜中的一道经典菜肴,以鸡蛋为主要食材,煎制而成。嫩煎蛋的制作方法是先将鸡蛋打散,加入少量盐、酱油、味精等调味料,搅拌均匀后倒入平底锅中,用小火煎制至两面金黄即可。</p>
</section>
<section id="huangguan">
<h2>黄瓜</h2>
<p>黄瓜是山东菜中常用的蔬菜食材之一,有清热解暑、利尿消肿、降低血压的功效。在山东菜中,黄瓜多用于凉拌、炒菜等菜肴中,口感清爽爽脆,是热夏季节的美食佳品。</p>
</section>
<section id="shanyao">
<h2>山药</h2>
<p>山药是山东地区生长的一种药食兼用的植物,具有滋阴补肾、益气养血、健脾开胃的功效。在山东菜中,山药多用于烧汤、炖肉等菜肴中,口感软糯甜美,是营养丰富的美食食材。</p>
</section>
</main>
<footer>
<p>版权所有 © 2021 山东美食协会</p>
</footer>
</body>
</html>
```
CSS代码:
```css
/* 全局样式 */
body {
margin: 0;
padding: 0;
font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
}
/* 页眉样式 */
header {
background-color: #F44336;
color: #FFF;
text-align: center;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
/* 导航样式 */
nav {
background-color: #4CAF50;
color: #FFF;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-around;
}
nav a {
color: #FFF;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
nav a:hover {
color: #000;
background-color: #FFF;
}
/* 主内容样式 */
main {
padding: 20px;
}
section {
margin: 30px 0;
}
section h2 {
font-size: 24px;
color: #F44336;
margin-bottom: 10px;
}
section p {
font-size: 16px;
line-height: 1.5;
}
/* 页脚样式 */
footer {
background-color: #333;
color: #FFF;
text-align: center;
padding: 10px;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.26);
}
```