HTML学生网页设计作业~餐饮美食汉堡企业网站6页面带轮播(HTML+CSS+JavaScript)

最新推荐文章于 2023-12-31 17:44:35 发布
最新推荐文章于 2023-12-31 17:44:35 发布
阅读量1.3w 收藏 75
点赞数 13
分类专栏： 学生网页设置作业源码HTML Html+Css+JavaScript HTML期末大作业 文章标签： HTML网页设计期末课程大作业 HTML期末大作业 餐饮美食HTML模板源码 javascript大作业 饮食HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ruan365392777/article/details/118152438
版权

HTML学生网页设计作业~餐饮美食汉堡企业网站6页面带轮播(HTML+CSS+JavaScript)

关于HTML期末网页制作，大作业A+水平 ~餐饮美食汉堡企业网页作业HTML+CSS+JavaScript实现，共有网站首页 关于麦德氏 活动抢鲜 美食天地 诚聘英才 联系我们 等6个页面!

原始HTML+CSS+JS页面设计，可以学习学习，大学网页设计作业，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

此次课程设计的题目是网页规划与设计(html+css+js+image+video+audio)确定每个页面将使用的页面布局技术（如结合使用CSS及表格、DIV、框架等技术），完成各页面的布局设计。

作品演示

1.网站首页

在这里插入图片描述

2.关于麦德氏

在这里插入图片描述

3.活动抢鲜

在这里插入图片描述

4.美食天地

在这里插入图片描述

5.诚聘英才

在这里插入图片描述

6. 联系我们

在这里插入图片描述

文件目录

在这里插入图片描述

代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>麦德士</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/lb.js"></script>
    <link href="css/css.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="con">
        <div class="nav">
            <ul>
                <li id="c7"><a href="index.html">网站首页</a></li>
                <li id="c2"><a href="jieshao.html">关于麦德士 </a></li>
                <li id="c3"><a href="huodong.html">活动抢鲜</a></li>
                <li id="c4"><a href="meishi.html">美食天地</a></li>
                <li id="c5"><a href="zhaopin.html">诚聘英才</a></li>
                <li id="c6"><a href="lxwm.html">联系我们</a></li>
                <div class="r_nav">
                    <div class="r_nava"><a href="index.html"><img src="images/pic-home.gif" /></a></div>
                    <div class="r_nava"><a href="#"><img src="images/pic-mail.gif" /></a></div>
                    <div class="r_nava"><a href="#"><img src="images/pic-sitemap.gif" /></a></div>
                </div>
            </ul>
        </div>
        <div class="clear"></div>
        <div class="con_in">
            <div class="top">
                <div class="logo"><a href="#"><img src="images/logo.png" /></a></div>
                <div class="search">
                    <input class="s_input" />
                    <a class="fl p5" href="#"><img src="images/button-search.gif" /></a> </div>
            </div>
            <div class=" clear"></div>
            <div class="list_dm">
                <div id="focus">
                    <ul>
                        <li><a href="#"><img src="images/d1.jpg" /></a></li>
                        <li><a href="#"><img src="images/d2.jpg" /></a></li>
                        <li><a href="#"><img src="images/d3.jpg"  /></a></li>
                        <li><a href="#"><img src="images/d4.jpg" /></a></li>
                    </ul>
                </div>
            </div>
            <div class=" clear"></div>
            <div class="main">
                <div class="left">
                    <div class="index_right">
                        <div class="index_top">
                            <h2>欢迎光临<span style=" color:#434343; padding:15px;">佳木斯麦德士餐饮有限公司~~!</span> </h2>
                            <div class="pt20">
                                <p><span>庆麦德士七台河餐厅盛装开业！ 庆宝清餐厅盛装开业！</span></p>
                                <p><span> </span></p>
                            </div>
                        </div>
                        <div class="index_l">
                            <div style=" width:360px; height:80px; background:url(images/tbj2.png) left no-repeat;">
                                <h2>新品推荐</h2>
                            </div>
                            <div class=" center p5"> <a href="#"><img alt="" src="images/xp.jpg" width="340" height="360" /></a> </div>
                            <!--end of jj_cloumn-->

                        </div>
                        <div class="index_r">
                            <div style=" width:360px; height:80px; background:url(images/tbj2.png) left no-repeat;">
                                <h2>美食尽享 </h2>
                            </div>
                            <div class=" center p5"> <a href="#"><img alt="" src="images/ms.jpg" width="340" height="360" /></a> </div>
                        </div>
                    </div>
                    <div class=" center p5"> <a href="#"><img alt="" src="images/yh.png" width="730" height="80" /></a> </div>
                </div>
                <div class="right">
                    <div class=" clear"></div>
                    <div class="sidebar">
                        <h3>网站导航</h3>
                        <ul class="side_list">
                            <li id="c7"><a href="index.html">网站首页</a></li>
                            <li id="c2"><a href="jieshao.html">关于麦德士 </a></li>
                            <li id="c3"><a href="huodong.html">活动抢鲜</a></li>
                            <li id="c4"><a href="meishi.html">美食天地</a></li>
                            <li id="c5"><a href="zhaopin.html">诚聘英才</a></li>
                            <li id="c6"><a href="lxwm.html">联系我们</a></li>
                        </ul>
                        <div class=" center p5"> <a href="#"><img alt="" src="images/dd.jpg" width="220" height="200" /></a> </div>
                        <div class=" center p5"> <a href="#"><img alt="" src="images/123.jpg" width="220" height="200" /></a> </div>
                    </div>
                    <!--end of sidebar-->

                    <div class=" clear"></div>
                </div>
                <div class=" clear"></div>
                <div class="foot">
                    <p>Copyright © 佳木斯麦德士餐饮有限公司 版權所有 </p>
                    <p> All Rights Reserved </p>
                </div>
                <div class=" clear"></div>
            </div>
        </div>
    </div>
</body>

</html>

做好的网页效果,如何通过发链接给别人看?

1.1解决部署上线~> 部署上线工具(永久免费使用)

1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
插件集成了超级多好用的插件，免费下载安装，简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取

2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)

1.1部署流程

在这里插入图片描述

1.2 哇~ 部署成功

哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~

在这里插入图片描述

前端 零基础入门到高级(视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
在这里插入图片描述

源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

❉3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !

在这里插入图片描述

更多HTML期末学生作业文章

1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全)

2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全)

3.HTML期末学生大作业（9套）html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计)

4.HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)

5.HTML期末大作业~基于HTML+CSS+JavaScript的旅游网站设计与实现

6.HTML网页设计期末课程大作业~仿腾讯游戏官网设计与实现(HTML+CSS+JavaScript)

7.HTML期末大作业~仿小米商城网页设计模板(HTML+CSS+JavaScript)

8.HTML期末大作业~餐饮文化学生网页设计作业(HTML+CSS+JavaScript)

更多表白源码

❤100款表白源码演示地址

@码出未来-web网页设计
关注
  • 13
    点赞
  • 踩
  • 75
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
HTML商品详情页（简单页面）
weixin_51695739的博客
06-18 2万+
纯HTML代码 使用方法：将页面和六张商品图片保存在同一文件夹,图片命名1.2.3.4.5.6就可以显示啦 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{width: 180px;height: 150px;} #div0{width: 720px;he
最全的商城网页模板html
04-19
有登录，注册，个人中心，收藏夹，购物车，订单详情，待付款，售后，商品详情等等大大小小三十几个页面
淘宝详情页模板
02-05
淘宝详情页模板，是psd文件，可以自己加些字体运用为详情魔板，最好是电器类的 比较适用
6. 一个简单可用的“汉堡包”应用
weixin_33881140的博客
12-05 69
首先看目标： 我们要做一个类似上图的应用，通过左侧的“汉堡包”导航可以切换右边的内容（只是图片而已），同时更新顶部的标题，以及当切换到Food内容时出现返回按钮，而顶部右边的搜索是没有作用的。 1. 界面布局 　　首先可以看到，应用主要分为两部分，分别是标题栏和内容栏，所以我们用 Grid 作为主体，Row 将他们分开： <Grid.RowDefinitions> ...
web前端期末大作业 ~我的家乡-绿城之都html+css+javascript旅游网页设计实例
热门推荐
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-05 1万+
web前端期末大作业 ~ 我的家乡-绿城之都html+css+javascript旅游网页设计实例 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：绿色简单旅游景点介绍网站，全套模板，包括首页、
这个 CSS 库竟能帮你做汉堡？
努力做最接地气的编程干货分享，感谢关注
04-25 423
美味的 CSS 动画汉堡，要不要尝尝？ 大家好，我是鱼皮，今天教大家做汉堡包。 当然不是真的汉堡包，毕竟我们这儿不是美食频道，而是指 HambergurMenu，汉堡包式菜单，由于菜单图标的三条横线酷似一个汉堡包，故得其名。 为了让网页更生动，当点击汉堡包菜单图标时，可以给它添加一个小动画。这不，有个国外的大神，专门开发了一个汉堡包菜单 CSS 动画库，库的名称就叫 Hamburgers！ 进入 Hamburgers 库的官网，可以看到各式各样美味的 CSS 动画汉堡。点击菜单图标，即可查看效果，比如.
汉堡式折叠html,HTML+Sass实现HambergurMenu(汉堡包式菜单)
weixin_31981135的博客
05-31 431
前几天看了国外一个大佬用HTML+CSS实现HamburgerMenu的视频，然后最近在看Sass，所以用Sass来实现一下。最终效果图如下：HTML+Sass实现HambergurMenu(汉堡包式菜单)-1.gif (1.65 MB, 下载次数: 0)2020-7-3 15:50 上传在VS Code中的文件结构(编译scss文件用的是easy sass)：HTML+Sass实现Hamberg...
html静态网站基于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例 企业网站制作
最新发布
html精品源码
12-31 505
网页作品编辑作品下载后可使用任意HTML编辑软件（如：`DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页） 网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
HTML5 和 CSS3 的新特性--品优购首页制作
薛定谔的猫
10-27 731
方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法。1. logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度。2. h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可。版心里面包含 1 号盒子，mod_service 是服务模块，mod 是模块的意思。
Web前端开发技术课程大作业: 关于美食的HTML网页设计——HTML+CSS+JavaScript在线美食订餐网站html模板源码30个页面:
HTML网页设计
07-30 1万+
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🧡 【作者主页——🔥获取更多优质源码】 🧡 【...
纯 CSS 中的简单响应式汉堡菜单
allway2的博客
03-02 3738
欢迎阅读有关如何创建简单的响应式纯 CSS 汉堡菜单的教程。是的，互联网上有很多其他的汉堡菜单，但其中一些仍然需要使用 Javascript。所以这里是一个纯 CSS 驱动的菜单，而不是一行 Javascript。继续阅读以了解如何构建一个！ ⓘ 我在本教程开始时包含了一个包含所有源代码的 zip 文件，因此您不必复制粘贴所有内容……或者如果您只是想直接进入。 下载和演示 首先，这是承诺的示例代码的下载链接。 示例代码下载 单击此处下载源代码，我已在 MIT 许可下发布它，因此请随意在..
详情页模板
12-21
有需要的自行下载，这个模板可以运用到很多产品以及淘宝天猫等详情页
Web期末大考核作业-简单网页设计
12-24
这是一个视频网站，大部分内容为HTML+css3，只涉及少部分js,部分css中冗余较多，可以删除，希望对你有帮助
基于HTML(品优购)电商项目项目的设计与实现（html前端源码+毕业设计）
02-20
通用电商模板提供下载，都是html静态页面，设计好的前端页面 1 绪论 1 1.1 项目开发背景 1 1.2 论文的研究目的和意义 2 1.2.1 开发的研究目的 2 1.2.2 开发的研究意义 3 2 项目介绍 4 2.1 web前端开发 4 2.1.1 web前端开发简介 4 2.1.2 项目介绍 4 2.1.3 项目特点 5 2.2开发工具简介 5 2.2.1HTML简介 6 2.2.2JavaScript简介 6 2.2.3 CSS简介 7 2.2.4Hbuilder简介 7 3 系统的需求分析与设计 7 3 项目开始 8 3.1可行性分析 8 3.2 页面分析 9 3.2.1 公共样式分析 9 3.2.2 首页分析 9 3.3 字体引入 11 3.4 页面制作 14 3.4.1 首页 14 3.4.2 列表页 18 3.4.3 商品详情页 20 3.4.4 购物车页面 22 结论 24 参 考 文 献 25 致 谢 26
仿品优购商城web页面.rar
10-21
仿品优购商城的web页面。自学前端时写的一些静态页面。还有部分动态页面。 有需要可以看看，自学不易，谢谢大家
DW学生美食网页设计作业——餐饮美食汉堡企业网站6页面带轮播(HTML+CSS+JavaScript)
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
汉堡餐饮加盟企业网站html静态模板_仿html代码静态
12-04
八叔引擎之家原创汉堡餐饮加盟企业网站html静态模板
汉堡餐饮加盟企业网站模板
12-28
汉堡餐饮加盟企业网站模板
原生HTML+CSS+ JS服装商城前台
06-27
(2) 在页面小于630px时会显示汉堡包菜单。监听按下时显示菜单。 5. 登入注册 (1) 在按下登入（注册）按钮时会通过正则判断输入的格式是否正确，不正确则会提示对应错误。 6. 提示框 (1) 自定义提示框函数 (2) 在body...
汉堡导航栏 具体代码 html css js
06-06
好的，以下是一个简单的汉堡导航栏的 HTML、CSS 和 JavaScript 代码示例： HTML 代码： ```html <div class="line"></div> <div class="line"></div> <div class="line"></div> <li><a href="#">Home...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@码出未来-web网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值