web前端作业--响应式美食菜谱网页设计（HTML+CSS+JavaScript+）实现

最新推荐文章于 2024-02-20 11:42:57 发布
VIP文章 最新推荐文章于 2024-02-20 11:42:57 发布
阅读量5.1k 收藏 64
点赞数 34
分类专栏： web前端作业实战 文章标签： javascript css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42246659/article/details/124759372
版权

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的美食菜谱网页设计制作，非常适合初学者学习使用。

网页实现截图：文末获取源码

网站首页：
在这里插入图片描述
菜谱：
在这里插入图片描述
美食达人：
在这里插入图片描述

手机版效果：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

主要源码结构：

在这里插入图片描述

主要源码展示：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5响应式美食网站模板</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery-1.10.2.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <div class="container">
        <nav class="navbar navbar-expand-md bg-smare  navbar-dark mt-0">
            <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- logo -->
            <a href="#" class="navbar-brand">
                <img src="https://localhost:9000/preview/element/00/01/26/30/E-1263083-6FC2F3D2.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/320" alt="" width="30"
                    class="align-top" style="border-radius: 50%;"> 美食霸王餐
            </a>
            <div class="collapse navbar-collapse" id="navbar">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"><a href="index.html" class="nav-link">首页</a></li>
                    <li class="nav-item"><a href="menu.html" class="nav-link">菜谱</a></li>
                    <li class="nav-item"><a href="foodie.html" class="nav-link">美食达人</a></li>
                </ul>
                <form action="#" class="form-inline">
                    <input type="search" class="form-control mr-sm-2" placeholder="Search">
                    <!-- <button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button> -->
                </form>
            </div>
        </nav>
    </div>
    <!-- 页面内容 -->
    <div class="data-content">
      <div class="part-1">
          <div class="left">
              <div class="hot">
                  <h1 class="title">今日热搜</h1>
                  <div class="hotlist">
                      <span class="active">可乐鸡翅</span>
                      <span class="active">红烧排骨</span>
                      <span class="active">糖醋排骨</span>
                      <span>清蒸鲈鱼</span>
                      <span>空气炸锅</span>
                      <span>油焖大虾</span>
                      <span>麻辣小龙虾</span>
                      <span>蒜蓉小龙虾</span>
                  </div>
              </div>
              <div class="sancan">
                <h1 class="title">
                    今日三餐
                    <ul class="sancan_tab">
                        <li class="current">早餐</li>
                        <li>午餐</li>
                        <li>下午茶</li>
                        <li>晚餐</li>
                        <li>夜宵</li>
                    </ul>
                </h1>
                <div class="sancan_w">
                    <!-- 早餐 -->
                    <div class="sancan-swiper-slide">
                        <div class="sancan_item">
                            <div class="imgw" style="background:url(https://localhost:9000/r/98/64/10016098/s10016098_152224196314585.jpg?imageMogr2/gravity/Center/crop/330x330) center no-repeat;background-size:cover;"></div>
                            <strong class="title2">抹茶红豆欧包</strong>
                            <p class="des">营养丰富，早餐最爱</p>
                        </div>
                        <div href="#" class="sancan_item">
                            <div class="imgw" style="background:url(https://localhost:9000/r/51/205/2301301/s2301301_152224208115825.jpg?imageMogr2/gravity/Center/crop/330x330) center no-repeat;background-size:cover;"></div>
                            <strong class="title2">酸奶甜饼</strong>
                            <p class="des">美味营养，吃完元气满满</p>
                        </div>
                        <div href="#" class="sancan_item">
                            <div class="imgw" style="background:url(https://localhost:9000/r/219/162/6603219/s6603219_152229186249055.jpg?imageMogr2/gravity/Center/crop/330x330) center no-repeat;background-size:cover;"></div>
                            <strong class="title2">快手三明治</strong>
                            <p class="des">简单快手，分分钟搞定</p>
                        </div>
                    </div>
                    <!-- 午餐 -->
                    <div class="sancan-swiper-slide">
                        <div class="sancan_item">
                            <div class="imgw" style="background:url(https://localhost:9000/r/208/102/1025708/s1025708_149663916013140.jpg?imageMogr2/gravity/Center/crop/330x330) center no-repeat;background-size:cover;"></div>
                            <strong class="title2">玉米山药炖排骨</strong>
                            <p class="des">色香味俱佳，惊艳味蕾</p>
                        </div>
                        <div href="#" class="sancan_item">
                            <div class="imgw" style="background:url(https://localhost:9000/r/97/227/6681847/s6681847_149663111460194.jpg?imageMogr2/gravity/Center/crop/330x330) center no-repeat;background-size:cover;"></div>
                            <strong class="title2">高考必吃的鲜蒸冬瓜</strong>
                            <p class="des">鲜美入味，好吃到爆</p>
                        </div>
                        <div href="#" class="sancan_item">
                            <div class="imgw" style="background:url(https://localhost:9000/r/208/102/1025708/s1025708_149663051570128.jpg?imageMogr2/gravity/Center/crop/330x330) center no-repeat;background-size:cover;"></div>
                            <strong class="title2">肉末豆腐</strong>
                            <p class="des">营养美味，一吃停不下来</p>
                        </div>
                    </div>
                    <!-- 下午茶 -->
                    <div class="sancan-swiper-slide">
                        <div class
最低0.47元/天 解锁文章
那个角落有个bug
关注
  • 34
    点赞
  • 踩
  • 64
    收藏
    觉得还不错? 一键收藏
  • 99
    评论
专栏目录
dreamweaver作业静态HTML网页设计 大学美食菜谱网页制作教程（web前端网页制作课作业）
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
用html语言编写美食栏目 源码,很简单的html美食网站（交作业）
weixin_33404412的博客
05-31 4576
【实例简介】只有四个页面的美食网站，每个页面均使用了javascript。【实例截图】【核心代码】0296c240-43b1-44f2-bd40-2fffcf8be4ce└── html├── caipu.html├── denglu.html├── fenlei.html├── images│ ├── 1.jpg│ ├── 200841339421620.jpg│ ├── 20084...
学生HTML个人网页作业作品——湘菜美食网页设计作品(12页) 美食网站设计与实现
weixin_BJ050106的博客
01-08 149
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
Web前端开发技术课程大作业: 关于美食的HTML网页设计——HTML+CSS+JavaScript在线美食订餐网站html模板源码30个页面:
热门推荐
HTML网页设计
07-30 1万+
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🧡 【作者主页——🔥获取更多优质源码】 🧡 【...
期末前端web大作业：餐饮美食网站设计与实现——HTML+CSS+JavaScript美食餐饮网站 3页面
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
网页设计——美食
09-04
美食相关网页，能够实现注册、登录、上传、查阅详情、搜索食谱等功能。需要有Tomcat、MySQL等工具，利用J2EE。
web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript...
qq_365392777
09-17 1562
web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HT...
（附源码）计算机毕业设计SSM基于Web美食网站设计
学姐计算机毕设程序
10-18 1346
（附源码）计算机毕业设计SSM基于Web美食网站设计项目运行环境配置：（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat。
[附源码]java毕业设计基于Web的美食网站的设计与实现
bishe507的博客
11-15 4361
项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：SSM + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。
web前端实训大作业：餐饮网站设计——美食城(7个页面) HTML+CSS+JavaScript
qq_365392777
09-16 1万+
web前端实训大作业：餐饮网站设计——美食城(5个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS...
html美食网站网页设计源码.zip
07-09
美食网站设计源码，页面美观，简单实用，直接用浏览器打开即可，直接用HTML写的，使用了js和css技术，希望能有帮助。
美食网站js+html+css
01-03
利用js+html，简单的美食网站设计，完整源代码+网站图片
HTML 美食网
07-25
一个简单的HTML美食网
web前端大作业-食谱APP展示响应式网页模板-界面适配移动设备-HTML源码.zip
最新发布
04-03
面对大学生朋友们的课程设计和毕业设计挑战，我们精心准备了一份Web前端大作业——一套高效的响应式网站HTML源码文件，它将是您实现学术成就的得力助手！ 这份源码文件不仅包含了丰富的功能和优雅的设计，更是一个...
食谱列表展示响应式网页模板-适配移动端设备-HTML网页源码.zip
04-02
它采用了前沿的HTML5和CSS3技术，实现了响应式设计，能够无缝适配各种设备的屏幕尺寸。此外，它还内置了丰富的JavaScript插件，助您轻松实现各种复杂的交互效果。这套源代码文件具有极高的可定制性，您可以根据您的...
FE-Cookbook：HTMLCSS和JavaScript，与Web相关。前端手册
02-03
富裕食谱在军队前端开发的时光中，从日常大牛的博客，动态中能零零散散看到很多好的技术文章，同时也看了很多前端书籍，包括《 JavaScript高级程序设计》，《语言精粹》，《 HTML5高级程序设计》，《你不知道JS》...
美食推荐-使用js+html开发的美食推荐+菜谱.zip
02-07
美食推荐 美食推荐_使用js+html开发的美食推荐+菜谱
【前端素材】bootstrap4实现优质餐饮博客网页Cookiteer（附源码）
m0_46013789的博客
02-20 432
优质餐饮博客网页是指一个专注于美食和餐饮文化内容的网站，旨在分享美食相关的文章、烹饪技巧、食谱、餐厅推荐等信息。这类网站通常具有吸引人的设计、丰富多彩的内容和用户友好的功能，以吸引并留住访问者。
html美食网站源码
m0_37916936的博客
05-07 1726
html美食网站源码
写一个关于美食的响应式网站html+css
06-10
好的，以下是一个简单的关于美食的响应式网站的HTML和CSS代码示例，仅供参考： HTML代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>美食网站</title> <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> </ul> </nav> </header> <main> <section class="banner"> <h2>今日推荐</h2> <p>这里是今日推荐的菜品介绍</p> <a href="#">查看详情</a> </section> <section class="categories"> <h2>菜品分类</h2> <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> </section> <section class="recipes"> <h2>最新菜谱</h2> <ul> <li> <a href="#"> <img src="images/recipe1.jpg" alt="菜品1"> <h3>菜品名称1</h3> <p>制作难度：初级</p> <p>制作时间：30分钟</p> </a> </li> <li> <a href="#"> <img src="images/recipe2.jpg" alt="菜品2"> <h3>菜品名称2</h3> <p>制作难度：中级</p> <p>制作时间：1小时</p> </a> </li> <li> <a href="#"> <img src="images/recipe3.jpg" alt="菜品3"> <h3>菜品名称3</h3> <p>制作难度：高级</p> <p>制作时间：2小时</p> </a> </li> </ul> </section> </main> <footer> <p>版权信息</p> </footer> </body> </html> ``` CSS代码： ```css /* 全局样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f5f5f5; color: #333; } /* 头部样式 */ header { background-color: #fff; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } h1 { font-size: 36px; font-weight: bold; } nav ul { list-style: none; display: flex; } nav li + li { margin-left: 20px; } nav a { color: #333; text-decoration: none; font-size: 18px; font-weight: bold; } /* 主体样式 */ main { max-width: 1200px; margin: 0 auto; padding: 20px; } .banner { background-image: url(images/banner.jpg); background-size: cover; background-position: center; height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; } .banner h2 { font-size: 48px; font-weight: bold; margin-bottom: 20px; } .banner p { font-size: 24px; margin-bottom: 40px; } .banner a { background-color: #ff6600; color: #fff; padding: 10px 20px; border-radius: 5px; font-size: 18px; } .categories { margin-top: 40px; } .categories h2 { font-size: 36px; font-weight: bold; margin-bottom: 20px; } .categories ul { list-style: none; display: flex; flex-wrap: wrap; } .categories li + li { margin-top: 20px; margin-left: 20px; } .categories a { background-color: #fff; color: #333; padding: 10px 20px; border: 1px solid #ccc; border-radius: 5px; font-size: 18px; } .recipes { margin-top: 40px; } .recipes h2 { font-size: 36px; font-weight: bold; margin-bottom: 20px; } .recipes ul { list-style: none; display: flex; flex-wrap: wrap; } .recipes li { width: calc(100% / 3 - 20px); margin-right: 20px; margin-bottom: 20px; } .recipes li:last-child { margin-right: 0; } .recipes a { display: block; background-color: #fff; color: #333; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); border-radius: 5px; font-size: 18px; } .recipes img { max-width: 100%; margin-bottom: 10px; } /* 通用响应式样式 */ @media screen and (max-width: 768px) { .banner { height: 200px; } .banner h2 { font-size: 36px; } .banner p { font-size: 18px; margin-bottom: 20px; } .banner a { font-size: 16px; padding: 5px 10px; } .categories h2 { font-size: 24px; } .categories li + li { margin-left: 10px; margin-top: 10px; } .categories a { font-size: 16px; padding: 5px 10px; } .recipes h2 { font-size: 24px; } .recipes li { width: calc(100% / 2 - 10px); margin-right: 10px; margin-bottom: 10px; } .recipes a { font-size: 16px; padding: 10px; } footer { font-size: 14px; text-align: center; padding: 10px; } } @media screen and (max-width: 480px) { .categories li { width: calc(100% / 2 - 10px); margin-right: 10px; margin-bottom: 10px; } .recipes li { width: 100%; margin-right: 0; margin-bottom: 10px; } .recipes a { font-size: 14px; padding: 5px; } footer { font-size: 12px; padding: 5px; } } ``` 以上代码只是一个简单的示例，实际开发中可能需要更多的CSS样式以及JavaScript交互效果。同时，也需要使用图片等资源来丰富网站内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 99
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值