计算机毕业设计基于HTML+CSS+JavaScript 大气的甜品奶茶美食餐饮文化网页设计与实现23页面

👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

🎀 精彩专栏推荐👇🏻👇🏻👇🏻

文章目录📂

一、网站题目👨‍🎓二、网站描述✍️三、网站介绍📚四、网站效果🌐五、代码实现 🪓HTML结构代码🧱CSS样式代码💒八、更多干货🎁

一、网站题目👨‍🎓

🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。

二、网站描述✍️

🍧美食主题网站主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。

三、网站介绍📚

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。

其中：

（1）📜html文件包含：其中index.html是首页、其他html为二级页面；

（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；

（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、网站效果🌐

五、代码实现 🪓

HTML结构代码🧱

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>欧麦喜官网</title><link href="css/rest.css" rel="stylesheet" type="text/css" /><link href="css/style.css" rel="stylesheet" type="text/css" /><link href="css/animate.min.css" rel="stylesheet" type="text/css"><script src="js/jquery-1.8.3.min.js" type="text/javascript"></script><link href="css/video-js.css" rel="stylesheet" type="text/css"></head><body><div class="main1 animated bounceInDown" data-wow-delay="4.4s"><div class="index_top"><div class="w1200"><div class="nav animated bounceInRight " style="animation-delay:1s;-webkit-animation-delay:1s;"><div class="nav_logo fl"><img src="images/logo.png"></div><div class="nav_ul fr"><ul><li><a href="#">企业•实力 </a><dl><dd><a href="#">企业•实力1</a></dd><dd><a href="#">企业•实力2</a></dd><dd><a href="#">企业•实力3</a></dd></dl></li><li><a href="#">极简•形象</a><dl><dd><a href="#">极简•形象1</a></dd><dd><a href="#">极简•形象2</a></dd><dd><a href="#">极简•形象3</a></dd></dl></li><li><a href="#">喜作•产品</a><dl><dd><a href="#">喜作•产品1</a></dd><dd><a href="#">喜作•产品2</a></dd><dd><a href="#">喜作•产品3</a></dd></dl></li><li class="cur"><a href="#">欧麦喜</a></li><li><a href="#">合作•惊喜</a><dl><dd><a href="#">合作•惊喜1</a></dd><dd><a href="#">合作•惊喜2</a></dd><dd><a href="#">合作•惊喜3</a></dd></dl></li><li><a href="#">火爆•动态</a><dl><dd><a href="#">火爆•动态1</a></dd><dd><a href="#">火爆•动态2</a></dd><dd><a href="#">火爆•动态3</a></dd></dl></li><li><a href="#">联系•我们</a><dl><dd><a href="#">联系•我们1</a></dd><dd><a href="#">联系•我们2</a></dd><dd><a href="#">联系•我们3</a></dd></dl></li></ul></div></div></div></div><div id="ibanner" class="ibanner"><div class="bd"><ul><li><img src="temp/banner1.jpg" /></li><li><img src="temp/banner2.jpg" /></li><li><img src="temp/banner3.jpg" /></li><li><img src="temp/banner4.jpg" /></li></ul></div></div></div><div class="main5 wow fadeInUpRight"><div class="w1200"><div class="maincom main5-0 wow bounceInLeft" data-wow-delay="0.5s"></div><div class="maincom main5-1 wow bounceInLeft" data-wow-delay="1s"></div><div class="maincom main5-2 wow bounceInLeft" data-wow-delay="1.5s"></div></div></div><div class="main3 wow fadeInUpRight"><div class="w1200"><div class="maincom main3-0 wow bounceInLeft" data-wow-delay="0.5s"></div><div class="maincom main3-1 wow bounceInRight" data-wow-delay="1s"></div></div></div><div class="main4 wow fadeInUpLeft"><div class="w1200"><div class="maincom main4-0 wow bounce" data-wow-delay="0.5s"></div><div class="maincom main4-1 wow bounce" data-wow-delay="1s"><div><a class="news_ul_pic fl" href="#" target="_blank"><img src="temp/new1.jpg"></a><div class="indexnews fr"><div class="indexnews_c1"><a class="fl" href="#">企业简介</a></div><p class="indexnews_c2">品纳餐饮管理有限公司是一家集企业咨询、餐饮连锁经营、网络科技创新为一体的综合型企业，总部位于广州市白云区，经过多年的沉淀和悉心钻研，公司已在集团化、多元化的新型企业道路上迈出了坚实的一步，成为集研发、制造、销售、运输、培训为一体的专业餐饮管理服务机构，打造了以500公里为业务半径、整个大陆业务拓展和终端运营服务的无缝覆盖体系，目前在南京、上海、武汉、成都均已设有分公司。</p><a class="indexnews_a" href="#">更多详情</a></div><div class="clear"></div></div><div class="clear"></div></div></div></div></div><div class="main2 wow fadeInUpLeft"><div class="w1200"><div class="maincom main2-0 wow bounceInLeft" data-wow-delay="0.3s"><video id="my-video" class="video-js" controls preload="auto" width="730" height="410"poster="temp/video.png" data-setup="{}"><source src="/jq22-sp.mp4" type="video/mp4"><p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="/html5-video-support/" target="_blank">supports HTML5 video</a> </p></video><script src="js/video.min.js"></script> <script src="js/zh-CN.js"></script><script type="text/javascript">var myPlayer = videojs('my-video');videojs("my-video").ready(function(){var myPlayer = this;myPlayer.play();});</script> </div><div class="maincom main2-1 wow bounceIn indexpro" data-wow-delay="0.6s"><a href=""><img src="temp/index_pro1.jpg" alt=""><p class="p1">欧麦喜荣获“受欢迎茶饮”，广受全国……</p><p class="p2">手作大麦茶热销全国，轻创企业的创新标杆，作为全国受欢迎的茶饮，欧麦喜受众遍及大江南北，全国掀起麦茶新潮流……</p></a></div><div class="maincom main2-2 wow bounceIn indexpro" data-wow-delay="0.9s"><a href=""><img src="temp/index_pro1.jpg" alt=""><p class="p1">欧麦喜调茶师的专业炫酷工艺圈粉数千……</p><p class="p2">调茶工艺的美学根据调酒师演变，从最初的只是简单控流、控量到现在的将调试过程完成艺术仅仅几个月时间，每一杯给一个步骤每一个工序都为优质典雅代言……</p></a></div></div><div class="clear"></div></div><div class="footer"><ul><li><p><span>姓   名</span><input type="text" name="name" id="name" class="liuyan"></p><p><span>手机号</span><input type="text" name="tel" id="tel" class="liuyan"></p><p><span>留   言</span><textarea name="introduce" id="contact" class="liuyan"></textarea></p><p><button class="fbtn1" name="button" onclick="FromSubmit()">提交</button><button class="fbtn2" name="submit" onclick="ClickReset()">重置</button></p></li><li><img src="images/fewm.png"></li><li><img src="images/fh1.png"> <p><span>华南</span>广州市天河区科学大道科汇金谷一街1号1-4楼</p><p><span>华北</span>北京市丰台区新宫中福丽宫品牌基地2号楼365室</p><p><span>华东</span>上海市闵行区顾戴路3009号祥鹿大厦2楼</p><em><img src="images/ftel.png">4006-150-513</em></li></ul><div class="clear"></div></div><div class="flink"><p>版权所有:品纳餐饮管理有限公司<a href="http://www./" target="_blank">粤ICP备00008888号-88</a><a href="#" target="_blank">网站地图</a></p><p><span>友情链接：</span><a target="_blank" href="#">饮品合作</a> <a target="_blank" href="#">火锅合作</a> <a target="_blank" href="/">冰淇淋加盟</a> <a target="_blank" href="/">贡茶加盟</a> <a target="_blank" href="/">烘焙合作</a> </p><div class="clear"></div></div><div class="fixicon"><a href="" ><img src="images/fixicon1.png" alt=""></a><a href="" ><img src="images/fixicon2.png" alt=""></a><a href="" ><img src="images/fixicon3.png" alt=""></a><a href="" ><img src="images/fixicon4.png" alt=""></a><a href="" ><img src="images/fixicon5.png" alt=""></a></div><script src="js/wow.js"></script><script src="js/jquery.SuperSlide.2.1.2.js"></script><script>if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){new WOW().init();};$(function (){jQuery(".ibanner").slide({mainCell:".bd ul",autoPlay:true,delayTime:1000,effect:"leftLoop"});});</script></body></html>

CSS样式代码💒

@media (min-width:0px) and (max-width:1200px) ,(min-height: 0px) and (max-height: 800px) {.fixicon{width: 60px;height: 400px;position: fixed;right: 0px;bottom: 10px;}.fixicon a{float: left;margin-bottom: 10px;}.fixicon a img{width: 60px;}}@media (min-width:1200px) and (min-height: 800px) {.fixicon{width: 110px;height: 600px;position: fixed;right: 10px;bottom: 10px;}.fixicon a{float: left;margin-bottom: 10px;}}.nav{height: 200px;width:100%;z-index:8;transition:all 0.2s;}.nav_black li a{color: #2c2d30;}.nav_logo{margin: 53px 0 25px 0;}.nav_ul{margin: 77px 0 0 0;}.nav_ul ul li{float:left;height:70px;line-height:70px;position:relative;transition:all 0.2s;margin-left: 30px;}.nav_ul a{font-size: 21px;color: #ffffff;/* margin-left:30px; */transition:all 0.2s;padding: 5px 10px;}.nav_ul ul li.cur a{border: 1px solid #71b057;color: #71b057;}.nav_ul ul li:hover a{border: 1px solid #71b057;color: #71b057;}.nav_ul ul li:hover dl{display:block;}.nav_ul dl{position:absolute;top:70px;border-top:0px;display:none;}.nav_ul dl dd{height:40px;line-height:40px;width:148px;margin-bottom: 10px;}.nav_ul dl dd a{display:block;width:100%;height:40px;line-height:40px;margin:0px;padding:0px;overflow:hidden;text-indent:18px;background:url(../images/nav_bg1.png) 148px center no-repeat;transition:all 0.5s;}.nav_ul dl dd a:hover{background:#f6f6f6 url(../images/nav_bg1.png) 130px center no-repeat;text-indent: 10px;}.main1{width: 100%;overflow:hidden;position: relative;}.main2{background: #000 url(../images/bg2.jpg) no-repeat top center;width: 100%;height:1080px;overflow:hidden;}.main3{background:url(../images/bg3.jpg) no-repeat center center;width: 100%; height:1140px; overflow:hidden;}.main4{background:url(../images/bg4.jpg) no-repeat center center;width: 100%; height:1080px; overflow:hidden;}.main5{background:url(../images/bg5.jpg) no-repeat center center;width: 100%; height:972px; overflow:hidden;}.maincom{position: absolute;left: 50%; top:50%;}