【Javascript网页设计】在线食谱分享页面案例
代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美食分享 - 在线食谱</title>
</head>
<body>
<!-- 1️⃣ 导航栏 -->
<header>
<h1>🍽 美食分享 - 在线食谱</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#recipes">食谱</a></li>
<li><a href="#details">推荐菜</a></li>
<li><a href="#comments">评论</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</header>
<!-- 2️⃣ 今日推荐 -->
<section id="home">
<h2>🌟 今日推荐菜</h2>
<article>
<h3>红烧牛肉面</h3>
<p>这道红烧牛肉面色香味俱全，适合寒冷的天气，为您提供温暖的享受！</p>
</article>
</section>
<!-- 3️⃣ 食谱列表 -->
<section id="recipes">
<h2>📜 精选食谱</h2>
<article>
<h3><a href="#">宫保鸡丁</a></h3>
<p>川菜经典，酸甜辣爽，一口接一口停不下来！</p>
</article>
<article>
<h3><a href="#">麻辣小龙虾</a></h3>
<p>夜宵必备，香辣过瘾，让你回味无穷！</p>
</article>
<article>
<h3><a href="#">广式叉烧</a></h3>