美食html网页代码模板
<!DOCTYPE html>
<html>
<head>
<title>美食网页</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>美食网页</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">菜谱</a></li>
<li><a href="#">食材</a></li>
<li><a href="#">餐厅</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>热门菜谱</h2>
<div class="recipe">
<img src="recipe1.jpg" alt="菜谱1">
<h3>红烧肉</h3>
<p>红烧肉是一道传统的中国菜肴，以猪肉为主要材料，配以酱油、糖、料酒、姜、葱等调料烹制而成。</p>
</div>
<div class="recipe">
<img src="recipe2.jpg" alt="菜谱2">
<h3>麻婆豆腐</h3>
<p>麻婆豆腐是四川省传统的川菜之一，以豆腐为主要材料，配以豆瓣酱、辣椒粉、花椒等调料烹制而成。</p>
</div>
<div class="recipe">
<img src="recipe3.jpg" alt="菜谱3">
<h3>宫保鸡丁</h3>
<p>宫保鸡丁是一道传统的中国菜肴，以鸡肉为主要材料，配以花生、辣椒、葱、姜等调料烹制而成。</p>
</div>
</section>
<section>
<h2>推荐食材</h2>
<div class="ingredient">
<img src="ingredient1.jpg" alt="食材1">
<h3>鲍鱼</h3>
<p>鲍鱼是一种珍贵的海产品，肉质鲜美，营养丰富，被誉为“海中瑰宝”。</p>
</div>
<div class="ingredient">
<img src="ingredient2.jpg" alt="食材2">
<h3>牛肉</h3>
<p>牛肉是一种常见的肉类食品，富含蛋白质、铁、锌等营养成分，有助于增强体力和免疫力。</p>
</div>
<div class="ingredient">
<img src="ingredient3.jpg" alt="食材3">
<h3>蘑菇</h3>
<p>蘑菇是一种常见的食用菌类，富含蛋白质、维生素、矿物质等营养成分，有助于增强免疫力和抗氧化能力。</p>
</div>
</section>
<section>
<h2>推荐餐厅</h2>
<div class="restaurant">
<img src="restaurant1.jpg" alt="餐厅1">
<h3>鼎泰丰</h3>
<p>鼎泰丰是一家以小笼包为主打菜品的餐厅，口味地道，服务周到，深受消费者喜爱。</p>
</div>
<div class="restaurant">
<img src="restaurant2.jpg" alt="餐厅2">
<h3>海底捞</h3>
<p>海底捞是一家以火锅为主打菜品的餐厅，环境舒适，服务热情，食材新鲜，深受消费者喜爱。</p>
</div>
<div class="restaurant">
<img src="restaurant3.jpg" alt="餐厅3">
<h3>南京大牌档</h3>
<p>南京大牌档是一家以江苏菜为主打菜品的餐厅，菜品精致，口味独特，深受消费者喜爱。</p>
</div>
</section>
</main>
<footer>
<p>版权所有 © 2021 美食网页</p>
</footer>
</body>
</html>
这是一个基本的美食网页的HTML代码模板，包括网页标题、字符集、视口、样式表链接、头部、主体、部分、脚注等。其中，头部包括网页标题和导航栏，主体包括三个部分：热门菜谱、推荐食材和推荐餐厅，每个部分都包括一个标题和三个项目，每个项目包括一个图片、一个标题和一段描述。脚注包括版权信息。这个模板可以根据实际需要进行修改和扩展，例如添加更多的部分、项目和页面元素。
