b站视频演示效果：
【网页设计期末大作业源代码】使用HTML5+CSS3+JavaScript十分钟快速制作一个简约大气美食食谱静态网站|自制超简单的食疗类网页，响应式自适应新手友
效果图：
完整代码：
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美食网站 - 首页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h1>美食网站</h1>
<nav>
<ul>
<li><a href="index.html" class="active">首页</a></li>
<li><a href="recipes.html">菜谱</a></li>
<li><a href="home-cooking.html">家常菜</a></li>
<li><a href="ingredients.html">食材</a></li>
<li><a href="nutrition.html">食疗食补</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<!-- 轮播图 -->
<section class="index-slider">
<div class="index-slide active">
<img src="https://img0.baidu.com/it/u=3777766668,1372382812&fm=253&fmt=auto&app=138&f=JPEG"
alt="Slide 1">
</div>
<div class="index-slide">
<img src="https://img1.baidu.com/it/u=3099731644,1611420409&fm=253&fmt=auto&app=138&f=JPEG"
alt="Slide 2">
</div>
<div class="index-slide">
<img src="https://img0.baidu.com/it/u=1626701476,318600788&fm=253&fmt=auto&app=120&f=JPEG"
alt="Slide 3">
</div>
<!-- 添加切换按钮 -->
<button class="prev-slide-btn">上一个</button>
<button class="next-slide-btn">下一个</button>
</section>
<!-- 菜谱精华内容 -->
<section class="index-featured-recipes">
<h2>菜谱精华</h2>
<div class="index-recipe">
<div class="index-recipe-item">
<img src="https://img2.baidu.com/it/u=2666223468,2539485209&fm=253&fmt=auto&app=120&f=JPEG"
alt="Recipe 1">
<h3>红烧肉</h3>
<p>红烧肉是一道传统的中国菜，味道鲜美，深受大家喜爱。</p>
</div>
<div class="index-recipe-item">
<img src="https://img2.baidu.com/it/u=476168090,3619598937&fm=253&fmt=auto&app=138&f=JPEG"
alt="Recipe 2">
<h3>宫保鸡丁</h3>
<p>宫保鸡丁是一道经典的川菜，口味麻辣鲜香，是中国家常菜之一。</p>
</div>
<div class="index-recipe-item">
<img src="https://img2.baidu.com/it/u=476168090,3619598937&fm=253&fmt=auto&app=138&f=JPEG"
alt="Recipe 2">
<h3>宫保鸡丁</h3>
<p>宫保鸡丁是一道经典的川菜，口味麻辣鲜香，是中国家常菜之一。</p>
</div>
<!-- 添加更多菜谱 -->
</div>
</section>
<!-- 家常菜精华内容 -->
<section class="index-featured-home-cooking">
<h2>家常菜精华</h2>
<div class="index-home-cooking">
<div class="index-home-cooking-item">
<img src="https://img0.baidu.com/it/u=1654026505,1129579901&fm=253&fmt=auto&app=120&f=JPEG"
alt="Home Cooking 1">
<h3>麻婆豆腐</h3>
<p>麻婆豆腐是一道以豆腐为主要原料制作的川菜，口味鲜美，麻辣可口。</p>
</div>
<div class="index-home-cooking-item">
<img src="https://img2.baidu.com/it/u=179707225,3154220144&fm=253&fmt=auto&app=138&f=JPEG"
alt="Home Cooking 2">
<h3>回锅肉</h3>
<p>回锅肉是一道地道的川菜，肉质鲜嫩，口味麻辣香浓，是家常菜中的经典之作。</p>
</div>
<div class="index-home-cooking-item">
<img src="https://img2.baidu.com/it/u=179707225,3154220144&fm=253&fmt=auto&app=138&f=JPEG"
alt="Home Cooking 2">
<h3>回锅肉</h3>
<p>回锅肉是一道地道的川菜，肉质鲜嫩，口味麻辣香浓，是家常菜中的经典之作。</p>
</div>
<!-- 添加更多家常菜 -->
</div>
</section>
<!-- 食材精华内容 -->
<section class="index-featured-ingredients">
<h2>食材精华</h2>
<div class="index-ingredients">
<div class="index-ingredient-item">
<img src="https://img2.baidu.com/it/u=27313537,1026300742&fm=253&fmt=auto&app=138&f=JPEG"
alt="Ingredient 1">
<h3>鸡蛋</h3>
<p>鸡蛋是一种常见的食材，富含蛋白质、脂肪和各种维生素。</p>
</div>
<div class="index-ingredient-item">
<img src="https://img2.baidu.com/it/u=977063912,3842019400&fm=253&fmt=auto&app=120&f=JPEG"
alt="Ingredient 2">
<h3>青菜</h3>
<p>青菜是一种富含纤维素、维生素和矿物质的健康蔬菜。</p>
</div>
<div class="index-ingredient-item">
<img src="https://img2.baidu.com/it/u=977063912,3842019400&fm=253&fmt=auto&app=120&f=JPEG"
alt="Ingredient 2">
<h3>青菜</h3>
<p>青菜是一种富含纤维素、维生素和矿物质的健康蔬菜。</p>
</div>
<!-- 添加更多食材 -->
</div>
</section>
<!-- 食疗食补精华内容 -->
<section class="index-featured-nutrition">
<h2>食疗食补精华</h2>
<div class="index-nutrition">
<div class="index-nutrition-item">
<img src="https://img0.baidu.com/it/u=2208607164,504110663&fm=253&fmt=auto&app=120&f=JPEG"
alt="Nutrition 1">
<h3>枸杞炖鸡汤</h3>
<p>枸杞炖鸡汤是一道滋补养生的汤品，具有益气补血、滋阴润燥的功效。</p>
</div>
<div class="index-nutrition-item">
<img src="https://img0.baidu.com/it/u=3434037981,3210905954&fm=253&fmt=auto&app=120&f=JPEG"
alt="Nutrition 2">
<h3>山药粥</h3>
<p>山药粥是一种营养丰富的养生粥品，有助于健脾益肺、补气养血。</p>
</div>
<div class="index-nutrition-item">
<img src="https://img0.baidu.com/it/u=3434037981,3210905954&fm=253&fmt=auto&app=120&f=JPEG"
alt="Nutrition 2">
<h3>山药粥</h3>
<p>山药粥是一种营养丰富的养生粥品，有助于健脾益肺、补气养血。</p>
</div>
<!-- 添加更多食疗食补内容 -->
</div>
</section>
</div>
</main>
<footer>
<p>© 2024 美食网站</p>
</footer>
<button onclick="topFunction()" id="scrollToTopBtn" title="回到顶部" style="display: none;">Top</button>
<!-- JavaScript 文件引用 -->
<script src="slides.js"></script>
<script src="scrollToTopButton.js"></script>
</body>
</html>
home-cooking.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美食网站 - 家常菜</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h1>美食网站</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="recipes.html">菜谱</a></li>
<li><a href="home-cooking.html" class="active">家常菜</a></li>
<li><a href="ingredients.html">食材</a></li>
<li><a href="nutrition.html">食疗食补</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<section class="home-cooking">
<h2>热门家常菜</h2>
<div class="cooking-list">
<div class="cooking-item">
<img src="https://img2.baidu.com/it/u=179707225,3154220144&fm=253&fmt=auto&app=138&f=JPEG"
alt="Cooking 1">
<h3>回锅肉</h3>
<p>回锅肉是一道地道的川菜，肉质鲜嫩，口味麻辣香浓，是家常菜中的经典之作。</p>
</div>
<div class="cooking-item">
<img src="https://img2.baidu.com/it/u=2666223468,2539485209&fm=253&fmt=auto&app=120&f=JPEG"
alt="Cooking 2">
<h3>红烧肉</h3>
<p>红烧肉是一道鲜香美味的经典菜品，以肥而不腻、色泽红亮而著称。</p>
</div>
<!-- 添加更多家常菜 -->
</div>
<h2>家常菜做法经验分享</h2>
<div class="cooking-experience">
<div class="cooking-experience-item">
<h3>选料</h3>
<p>选择新鲜的食材是做好家常菜的第一步。</p>
<img src="https://img0.baidu.com/it/u=1781601109,2200893711&fm=253&fmt=auto&app=138&f=JPEG"
alt="选料">
</div>
<div class="cooking-experience-item">
<h3>火候</h3>
<p>掌握好火候，让菜肴更加美味。</p>
<img src="https://img1.baidu.com/it/u=1761792739,911068969&fm=253&fmt=auto&app=138&f=JPEG"
alt="火候">
</div>
<div class="cooking-experience-item">
<h3>调味</h3>
<p>合适的调味是家常菜成功的关键。</p>
<img src="https://img1.baidu.com/it/u=2823479011,3795708835&fm=253&fmt=auto&app=138&f=JPEG"
alt="调味">
</div>
</div>
<h2>家常菜咨询列表</h2>
<ul class="cooking-consultation">
<li>怎样做出口感嫩滑的红烧肉？</li>
<li>家常菜中如何让菜品更有食欲？</li>
<!-- 添加更多家常菜咨询 -->
</ul>
</section>
</div>
</main>
<footer>
<p>© 2024 美食网站</p>
</footer>
<button onclick="topFunction()" id="scrollToTopBtn" title="回到顶部" style="display: none;">Top</button>
<!-- JavaScript 文件引用 -->
<script src="scrollToTopButton.js"></script>
</body>
</html>
ingredients.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美食网站 - 食材</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h1>美食网站</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="recipes.html">菜谱</a></li>
<li><a href="home-cooking.html">家常菜</a></li>
<li><a href="ingredients.html" class="active">食材</a></li>
<li><a href="nutrition.html">食疗食补</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<section class="ingredients">
<h2>常用食材</h2>
<div class="ingredient-carousel">
<div class="ingredient-slide">
<img src="https://img2.baidu.com/it/u=27313537,1026300742&fm=253&fmt=auto&app=138&f=JPEG"
alt="Ingredient 1">
<h3>鸡蛋</h3>
<p>鸡蛋是一种常见的食材，富含蛋白质、脂肪和各种维生素。</p>
</div>
<div class="ingredient-slide">
<img src="https://img2.baidu.com/it/u=977063912,3842019400&fm=253&fmt=auto&app=120&f=JPEG"
alt="Ingredient 2">
<h3>青菜</h3>
<p>青菜是一种富含纤维素、维生素和矿物质的健康蔬菜。</p>
</div>
<div class="ingredient-slide">
<img src="https://img1.baidu.com/it/u=3970045354,425263969&fm=253&fmt=auto&app=138&f=JPG"
alt="Ingredient 3">
<h3>鱼</h3>
<p>鱼类是优质蛋白质的来源，富含多种有益健康的营养成分。</p>
</div>
<!-- 添加更多食材 -->
</div>
<div class="shopping-tips">
<h2>选购食材经验分享</h2>
<div class="tip-item">
<h3>如何选购新鲜蔬菜</h3>
<p>选择外观翠绿、叶片饱满且没有黄斑的蔬菜，触摸时应有弹性。</p>
</div>
<div class="tip-item">
<h3>鱼类的选购技巧</h3>
<p>新鲜的鱼应该有清晰透明的眼睛，不要有刺激性的气味。</p>
</div>
<!-- 添加更多经验分享 -->
</div>
</section>
</div>
</main>
<footer>
<p>© 2024 美食网站</p>
</footer>
<button onclick="topFunction()" id="scrollToTopBtn" title="回到顶部" style="display: none;">Top</button>
<!-- JavaScript 文件引用 -->
<script src="scrollToTopButton.js"></script>
</body>
</html>
nutrition.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美食网站 - 食疗食补</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h1>美食网站</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="recipes.html">菜谱</a></li>
<li><a href="home-cooking.html">家常菜</a></li>
<li><a href="ingredients.html">食材</a></li>
<li><a href="nutrition.html" class="active">食疗食补</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<section class="nutrition">
<div class="container">
<h2>食疗食补</h2>
<div class="nutrition-info">
<div class="nutrition-info-item">
<img src="https://img0.baidu.com/it/u=2208607164,504110663&fm=253&fmt=auto&app=120&f=JPEG" alt="Nutrition 1">
<h3>枸杞炖鸡汤</h3>
<p>枸杞炖鸡汤是一道滋补养生的汤品，具有益气补血、滋阴润燥的功效。</p>
</div>
<div class="nutrition-info-item">
<img src="https://img0.baidu.com/it/u=3434037981,3210905954&fm=253&fmt=auto&app=120&f=JPEG" alt="Nutrition 2">
<h3>山药粥</h3>
<p>山药粥是一种营养丰富的养生粥品，有助于健脾益肺、补气养血。</p>
</div>
</div>
<h3>经验分享</h3>
<div class="nutrition-experience">
<div class="experience-item">
<h4>补气养血</h4>
<p>多吃些红枣、当归、枸杞等食物，有助于补充气血，增强体质。</p>
</div>
<div class="experience-item">
<h4>调理肠胃</h4>
<p>适量食用莲子、山药、白扁豆等，有助于调理肠胃，改善消化不良问题。</p>
</div>
</div>
</div>
</section>
</div>
</main>
<footer>
<p>© 2024 美食网站</p>
</footer>
<button onclick="topFunction()" id="scrollToTopBtn" title="回到顶部" style="display: none;">Top</button>
<!-- JavaScript 文件引用 -->
<script src="scrollToTopButton.js"></script>
</body>
</html>
recipes.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美食网站 - 菜谱</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h1>美食网站</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="recipes.html" class="active">菜谱</a></li>
<li><a href="home-cooking.html">家常菜</a></li>
<li><a href="ingredients.html">食材</a></li>
<li><a href="nutrition.html">食疗食补</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<section class="hot-recipes">
<h2>热门菜谱</h2>
<div class="recipe-list">
<div class="recipe-item">
<img src="https://img2.baidu.com/it/u=2666223468,2539485209&fm=253&fmt=auto&app=120&f=JPEG"
alt="Recipe 1">
<h3>红烧肉</h3>
<ol>
<li>准备好主料和调料。</li>
<li>将肉切块，用清水洗净。</li>
<li>将肉放入沸水中焯水。</li>
<li>热锅凉油，放入糖炒化。</li>
<li>加入姜葱爆香，放入肉块翻炒。</li>
<li>加入料酒、酱油、冰糖、八角、桂皮。</li>
<li>加水没过肉块，用小火慢炖。</li>
<li>最后收汁，出锅装盘。</li>
</ol>
</div>
<div class="recipe-item">
<img src="https://img2.baidu.com/it/u=476168090,3619598937&fm=253&fmt=auto&app=138&f=JPEG"
alt="Recipe 2">
<h3>宫保鸡丁</h3>
<ol>
<li>准备好主料和调料。</li>
<li>鸡肉切丁，加入料酒、淀粉腌制。</li>
<li>辣椒、花生豆炒香备用。</li>
<li>热锅冷油，放入鸡丁炒熟。</li>
<li>加入葱、姜、蒜、干辣椒炒香。</li>
<li>加入调料翻炒均匀，加入花生豆。</li>
<li>最后出锅，装盘即可。</li>
</ol>
</div>
<!-- 添加更多热门菜谱 -->
</div>
</section>
<section class="cuisines">
<h2>八大菜系特色菜</h2>
<div class="cuisine-list">
<div class="cuisine-item">
<img src="https://img0.baidu.com/it/u=1654026505,1129579901&fm=253&fmt=auto&app=120&f=JPEG"
alt="川菜">
<h3>川菜 - 麻婆豆腐</h3>
<p>麻婆豆腐是川菜中的经典代表，以麻辣鲜香著称。</p>
<ol>
<li>将豆腐切成小块备用。</li>
<li>热锅加油，放入葱姜蒜炒香。</li>
<li>加入豆瓣酱、辣椒酱、郫县豆瓣酱炒出红油。</li>
<li>加入肉末、豆腐、鸡精、盐、糖翻炒均匀。</li>
<li>最后撒上葱花即可。</li>
</ol>
</div>
<div class="cuisine-item">
<img src="https://img0.baidu.com/it/u=2830237222,3223208656&fm=253&fmt=auto&app=120&f=JPEG"
alt="粤菜">
<h3>粤菜 - 白切鸡</h3>
<p>白切鸡是粤菜中的经典代表，以鲜美清淡著称。</p>
<ol>
<li>准备好鸡肉和调料。</li>
<li>将鸡肉放入滚水中焯水，捞出备用。</li>
<li>切成薄片，码入葱、姜、蒜。</li>
<li>加入盐、酱油、料酒拌匀，上锅蒸约10分钟。</li>
<li>出锅时淋上热油，撒上葱花即可。</li>
</ol>
</div>
<div class="cuisine-item">
<img src="https://img1.baidu.com/it/u=963868281,3597407912&fm=253&fmt=auto&app=120&f=JPEG"
alt="鲁菜">
<h3>鲁菜 - 红烧海参</h3>
<p>红烧海参是鲁菜中的经典代表，以味浓鲜香著称。</p>
<ol>
<li>将海参洗净切块，用清水浸泡。</li>
<li>热锅加油，放入葱姜蒜炒香。</li>
<li>加入海参翻炒均匀。</li>
<li>加入生抽、老抽、糖、盐、料酒、鸡精，加水没过海参，炖煮30分钟至汤汁浓稠。</li>
<li>最后撒上葱花即可。</li>
</ol>
</div>
<div class="cuisine-item">
<img src="https://img0.baidu.com/it/u=4001917950,4086129888&fm=253&fmt=auto&app=120&f=JPEG"
alt="苏菜">
<h3>苏菜 - 松鼠桂鱼</h3>
<p>松鼠桂鱼是苏菜中的经典代表，以酸甜适口著称。</p>
<ol>
<li>将鱼身切片，用盐、料酒、淀粉腌制一下。</li>
<li>放入油锅中煎至两面金黄，捞出沥油备用。</li>
<li>热锅加油，放入葱姜蒜爆香。</li>
<li>加入糖、醋、生抽、盐、水，煮开后放入鱼片，煮至汤汁浓稠。</li>
<li>最后撒上松子即可。</li>
</ol>
</div>
</div>
</section>
<section class="recipe-qa">
<h2>菜谱问答</h2>
<div class="qa-item">
<h3>减肥食谱有哪些？</h3>
<p>推荐一些低脂肪、高纤维的食物，比如蔬菜沙拉、燕麦片、鸡胸肉等。</p>
</div>
<div class="qa-item">
<h3>减肥吃什么蔬菜水果？</h3>
<p>可以多吃一些低热量的蔬菜和水果，如西兰花、黄瓜、苹果、橙子等。</p>
</div>
<!-- 可以添加更多的问答 -->
</section>
</div>
</main>
<footer>
<div class="container">
<p>© 2024 美食网站</p>
</div>
</footer>
<button onclick="topFunction()" id="scrollToTopBtn" title="回到顶部" style="display: none;">Top</button>
<!-- JavaScript 文件引用 -->
<script src="scrollToTopButton.js"></script>
</body>
</html>
scrollToTopButton.js
slides.js
styles.css
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
各位同学们：还有啥想看的功能或者特效不？欢迎在评论区留言哦！
本人承接网网站开发，如有需要，欢迎私信咨询！
如果您感觉文章对您有帮助~
那就打赏一下，请笔者喝杯咖啡吧~
给新手学习前端开发的建议：
-
了解基础知识：
- 学习HTML、CSS和JavaScript的基础知识。它们是前端开发的核心，构成了网页的基本结构和样式，以及交互功能。
- 掌握HTML的标签和语义化，了解CSS的选择器和布局技巧，熟悉JavaScript的基本语法和DOM操作。
-
实践项目：
- 不要仅仅停留在理论学习上，通过实践项目来巩固和应用所学知识。
- 可以从简单的静态页面开始，逐渐尝试添加交互效果和动态数据。
- 参与开源项目或自己动手创建一个个人网站，将所学知识应用到实际场景中。
-
学习工具和框架：
- 了解并学习前端开发中常用的工具和框架，如构建工具（Webpack、Gulp等）、版本控制工具（Git）、前端框架（React、Vue、Angular等）。
- 这些工具和框架能够提高开发效率，简化开发流程，是前端开发的重要组成部分。
-
关注前端趋势：
- 前端开发是一个快速发展的领域，新的技术和工具不断涌现。
- 关注前端社区、博客和会议，了解最新的技术趋势和发展方向，保持学习的热情和动力。
-
培养解决问题的能力：
- 前端开发常常会遇到各种问题和挑战，学会独立思考和解决问题是非常重要的。
- 遇到问题时，可以先尝试自己解决，通过查阅文档、搜索资料和社区讨论来找到答案。
- 如果实在无法解决，可以向同事或社区求助，但也要学会总结和分享自己的经验和教训。
-
不断学习和提升：
- 前端开发是一个不断学习和提升的过程，要保持对知识的渴望和追求。
- 可以通过阅读书籍、参加培训、参与开源项目等方式来不断提升自己的技能水平。
- 同时，也要关注自己的职业发展，了解行业的需求和趋势，规划自己的职业道路。
-
注重代码质量和可维护性：
- 编写高质量的代码是前端开发的基本要求之一。
- 学习并遵循代码规范，使用适当的命名和注释来提高代码的可读性。
- 注重代码的结构和逻辑，避免过度嵌套和复杂的逻辑。
- 考虑代码的可维护性，尽量编写可复用和可扩展的代码。
-
参与社区和交流：
- 加入前端开发的社区和论坛，与其他开发者进行交流和分享。
- 通过参与社区活动、回答问题、分享经验等方式，不仅可以提升自己的技能水平，还可以结识更多的同行和朋友。
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
加油吧！
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
