HTML5期末大作业:餐饮美食网站设计——绿色的餐饮美食网站(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码

HTML5期末大作业:餐饮美食网站设计——绿色的餐饮美食网站(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

获取更多源码

PC电脑端关注我们

作者主页-更多源码

HTML期末大作业文章专栏

作品介绍

1.网页作品简介 :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。

2.网页作品编辑:作品下载后可使用任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页)。

3.网页作品技术:Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了logo(源文件),基本期末作业所需的知识点全覆盖。

@TOC

一、作品展示

二、文件目录

三、代码实现

<!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” xml:lang=“en”> <head> <meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8” /> <title>筷之舞|筷之舞创意面吧|面食|面条|美食|餐饮|君唯餐饮管理有限公司|官方网站</title> <meta name=“keywords” content=“筷之舞,筷之舞创意面吧,筷之舞加盟,加盟连锁,招商代理,餐饮美食,面食合作” /> <meta name=“description” content=“面食为餐饮业的投资首选,其高回报、低风险的投资优势无可置疑。筷之舞创意面吧,为广大创业者创造了一个全面立体的餐饮创业服务平台,带领众多加盟者获得了人生的自主创业成功。” /> <link rel=“stylesheet” href=“style/style.css” /> <!–[if IE 6]> <script type=”text/javascript” src=”js/iepng.js”></script> <script type=”text/javascript”> EvPNG.fix(body,div,ul,li,ol,dl,dt,dd,img,input,span,p,h1,h2,h3,h4,a,strong,textarea); </script> <![endif]–> <script type=“text/javascript” src=“js/banner.js” ></script> </head> <body> <div id=“header”> <div class=“header_in”> <h1><a href=“#”>筷之舞</a></h1> <ul class=“nav”> <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> <li><a href=“#”>联系我们</a></li> </ul> <dl class=“tel”> <dt>咨询热线:</dt> <dd><img src=“images/tel.png” width=“182” height=“22” alt=“0335-7528866” /></dd> </dl> </div> </div> <div style=“width:1200px;position:relative;height:0;overflow:hidden;margin:auto;”></div> <div id=“shutter” class=“shutter” > <ul> <li><a href=“#”><img src=“images/banner4.jpg” alt=“” /></a></li> <li><a href=“#”><img src=“images/banner1.jpg” alt=“” /></a></li> <li><a href=“#”><img src=“images/banner2.jpg” alt=“” /></a></li> </ul> </div> <div id=“item”> <dl class=“item_01”> <dt><img src=“images/c1.jpg” width=“278” height=“228” alt=“七彩摔拌面 参考价格” /></dt> <dd class=“item”>七彩摔拌面<a class=“fcl” href=“#”>参考价格</a></dd> <dd class=“item_sub”>筷之舞-品牌项目</dd> </dl> <dl class=“item_02”> <dt>果蔬营养<br />高汤面系列</dt> <dd><img src=“images/c2.jpg” width=“180” height=“180” alt=“芙蓉鲜虾汤面” /></dd> </dl> <dl class=“item_02” style=“position: absolute;left:660px;”> <dt>粗粮<br />养生面系列</dt> <dd><img src=“images/c3.jpg” width=“180” height=“180” alt=“浓香排骨汤面” /></dd> </dl> <dl class=“item_02” style=“position: absolute;left:1020px;”> <dt>精致<br />凉拌菜系列</dt> </dl> <dl class=“item_02” style=“position: absolute;left:300px;top:200px;”> <dd><img src=“images/c4.jpg” width=“180” height=“180” alt=“芙蓉鲜虾汤面” /></dd> </dl> <dl class=“item_02” style=“position: absolute;left:480px;top:200px;”> <dt>七彩<br />精巧摔拌面</dt> <dd><img src=“images/c5.jpg” width=“180” height=“180” alt=“芙蓉鲜虾汤面” /></dd> </dl> <dl class=“item_02” style=“position: absolute;left:840px;top:200px;”> <dt>过桥<br />锅烧面</dt> <dd><img src=“images/c6.jpg” width=“180” height=“180” alt=“芙蓉鲜虾汤面” /></dd> </dl> </div> <div id=“show”> <div class=“left_s”> <h3><a href=“#”>产品展示</a></h3> <ul> <li><a href=“#”><img src=“images/left_s.jpg” alt=“” /></a></li> <li><a href=“#”><img src=“images/left_s.jpg” alt=“” /></a></li> <li><a href=“#”><img src=“images/left_s.jpg” alt=“” /></a></li> <li><a href=“#”><img src=“images/left_s.jpg” alt=“” /></a></li> <li><a href=“#”><img src=“images/left_s.jpg” alt=“” /></a></li> </ul> </div> <div class=“right_s”> <h3><a href=“#”>店铺展示</a></h3> <ul> <li><a href=“#”><img src=“images/right_s.jpg” alt=“” /></a></li> <li><a href=“#”><img src=“images/right_s.jpg” alt=“” /></a></li> <li><a href=“#”><img src=“images/right_s.jpg” alt=“” /></a></li> <li><a href=“#”><img src=“images/right_s.jpg” alt=“” /></a></li> <li><a href=“#”><img src=“images/right_s.jpg” alt=“” /></a></li> <li><a href=“#”><img src=“images/right_s.jpg” alt=“” /></a></li> </ul> </div> </div> <div id=“squeezebox”> <div class=“one”> <h3><a href=“#”>加盟动态</a></h3> <div class=“one_in”> <p class=“one_txt”> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> </p> <p class=“one_txt”> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> </p> <p class=“one_txt”> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> </p> <p class=“one_txt”> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> <a href=“#”>热烈祝贺黄先生成功签约 [06-03]</a> </p> </div> </div> <div class=“two”> <h3><a href=“#”>品牌故事</a></h3> <p class=“two_img”><a href=“#”><img src=“images/ppgs_1.jpg” alt=“” /></a></p> <p class=“two_txt”>相传,乾隆皇帝一次微服南游,旅途劳累, 途经一家面馆,便进店充饥。不料想,这民 间小店的美食却让他如此意外,尤其是这七 彩面条,看上去色彩斑斓,吃起来爽滑筋道 。他叫来老板问其中奥秘,老板看他穿着打 扮有所涵养,于是便给乾隆讲起这彩面的由 来。原来,这家的面馆可以在一根面条上面 做出不同种的颜色,就像有音符在面上舞动 。这种彩面是通过提取新鲜水果蔬菜里面的 维生素以及膳食纤维和白面混合加工而成。 用筷子挑起彩色的面条搭配着秘制酱料吃到 嘴里回味无穷。夹起面条的感觉就像少女翩 翩起舞一样!乾隆皇帝听后拍手叫好,当即 挥笔赐字“筷之舞”!<br /> 中国13亿人口,八亿的面食市场。面条作为 民间大众食谱,深受中国人的喜爱,从北方 到南方几乎似乎无人不爱吃面条。君唯集团 总部几经周折,从御膳房第24代传人手上 求得配方,瞄准中国面食市场, 在传统面条 的基础之上经过改良……<a href=“#”>查看详情</a> </p> </div> <div class=“three”><h3><a href=“#”>集团新闻</a></h3><p><a href=“#”><img src=“images/jtxw_1.jpg” alt=“” /></a></p></div> </div> <div id=“footer”> <div class=“sub_nav”> <a href=“#”>官方首页</a> | <a href=“#”>行业新闻</a> | <a href=“#”>产品优势</a> | <a href=“#”>项目优势</a> | <a href=“#”>联系我们</a> </div> <div class=“footer_in”> <div class=“footer_c”> <p class=“footer_logo”><img src=“images/tel_1.jpg” width=“370” height=“102” alt=“” /></p> <p>地址:河北省秦皇岛海港区泛亚大厦9层</p> <p>君唯餐饮集团致力于<a href=“#”>餐饮加盟</a> | <a href=“#”>小吃加盟</a> | <a href=“#”>餐饮店加盟</a> | <a href=“#”>餐饮连锁加盟</a></p> <p><a href=“#”>筷之舞创意面吧加盟</a> | <a href=“#”>面食加盟</a> | <a href=“#”>君唯餐饮加盟</a> </p> </div> </div> </div> </body> </html> <script type=“text/javascript” src=“js/jquery-1.11.1.min.js” ></script> <script type=“text/javascript” src=“js/kzw100.js” ></script> <script type=“text/javascript”> <!– var shutterH = new Hongru.shutter.init(shutterH,{ id:shutter }); var isIE=!!window.ActiveXObject; var isIE6=isIE&&!window.XMLHttpRequest; if (isIE){ if (isIE6!=“ie6”){ changecss(); window.onresize = function(){ changecss(); } } } if (!isIE){ changecss(); window.onresize = function(){ changecss(); } } function changecss(){ var kuandu = document.documentElement.clientWidth; var shutterW=$(“#shutter”).width(); var left=(kuandushutterW)/2; $(“#shutter”).css(“left”,left); } // –> </script>

四、获取更多源码

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

相关问题可以相互学习,可关注↓公Z号 获取更多源码 !

五、学习资料

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

六、更多源码

HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他* 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片