首页分享 web前端期末大作业：美食文化网页设计与实现——美食餐厅三级(HTML+CSS+JavaScript) (2)

web前端期末大作业：美食文化网页设计与实现——美食餐厅三级(HTML+CSS+JavaScript) (2)

来源：花匠小妙招时间：2024-11-10 04:14

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

精彩专栏推荐

【作者主页——获取更多优质源码】
【web前端期末大作业——毕设项目精品实战案例(1000套)】

文章目录一、网站题目‍二、网站描述✍️三、网站介绍四、网站效果五、代码实现 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 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> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="top"> <div class="topcontent"> <div class="logo"> <img src="images/logo.png" /> </div> <div class="tel"> <img src="images/tel.png" /> <span>400-888-888</span> </div> </div> </div> <div id="nav"> <ul> <li><a href="index.html">网站首页</a></li> <li><a href="guanyu.html">关于品牌</a></li> <li><a href="tuijian.html">美食推荐</a></li> <li><a href="dongtai.html">最新动态</a></li> <li><a href="lianxi.html">联系我们</a></li> <li><a href="denglu.html">会员登录</a></li> <li><a href="zhuce.html">会员注册</a></li> <li><a href="liuyan.html">在线留言</a></li> </ul> </div> <div class="banner"> <div class="box" id="box"> <div class="inner">  <ul> <li><a href="#"><img src="images/banner1.jpg" alt=""></a></li> <li><a href="#"><img src="images/banner2.jpg" alt=""></a></li> <li><a href="#"><img src="images/banner3.jpg" alt=""></a></li> </ul> <ol class="bar"> </ol>  <div id="arr"> <span id="left"> < </span> <span id="right"> > </span> </div> </div> </div> </div> <script type="text/javascript" src="js/banner.js"></script> <div class="ibox1"> <div class="ibox1-left"> <a href="guanyu.html"><img src="images/img1.jpg" style="height:150px; width: 420px;"/></a> <video src="./images/ed2710af68fe2b6c09a75b155a89cb75.mp4" controls width="420px" height="150px"></audio> </div> <div class="ibox1-right"> <h1>关于品牌</h1> <p>食尚美食餐饮管理有限公司的创始人从2004年起航第一家店，2007年以"鸭血粉丝、锅贴等"为特色经营的连锁品牌，2010年拥有8家直营店，2013年进行品牌升级，2015年第一家升级店开业；现总部位...</p> <div class="more"><a href="guanyu.html">了解更多</a></div> </div> </div> <div class="ibox2"> <div class="ibox2content"> <div class="title"> <h1>品牌优势</h1> <p>BRAND ADVANTAGE</p> </div> <div class="ibox2-ner"> <div class="bx"> <div class="xuh"><img src="images/1.png" /></div> <p>独特而神秘的资源独享</p> <p>专业团队精心历练之</p> <p>全新经营理念</p> <div class="ysimg"> <img src="images/img2.jpg" /> </div> </div> <div class="bx"> <div class="xuh"><img src="images/2.png" /></div> <p>实行区域保护政策</p> <p>以保障合作伙伴的</p> <p>业务发展空间</p> <div class="ysimg"> <img src="images/img3.jpg" /> </div> </div> <div class="bx"> <div class="xuh"><img src="images/3.png" /></div> <p>不定期推出新的产品</p> <p>和营销策划方案</p> <p>以供使用</p> <div class="ysimg"> <img src="images/img4.jpg" /> </div> </div> <div class="bx"> <div class="xuh"><img src="images/4.png" /></div> <p>完善的售后服务，</p> <p>不定期门店质检，</p> <p>规范经营管理</p> <div class="ysimg"> <img src="images/img5.jpg" /> </div> </div> </div> </div> </div> <div class="ibox3"> <div class="ibox3-left"> <div class="title2"> <h1>品牌简介</h1> <p>BRAND PROFILE</p> </div> <p>食尚美食餐饮连锁机构致力于湘菜系的研发整合与特色项目的经营推广。立足于自主品牌，公司采用连锁化经营，科学化管理，标准化生产，凭借独特的产品优势，优质规范的服务为消费者提供了更具传统民俗的特色美食。</p> <p>只要尝过的人，都是赞不绝口；这是我们的生活，更是南京人的生活；600多年来，我们传承这正宗的南京味道，坚持这一份匠心。</p> </div> <div class="ibox3-right"> <img src="images/img6.jpg" /> </div> </div> <div class="ibox2"> <div class="ibox2content"> <div class="title"> <h1>最新动态</h1> <p>NEWS INFORMATION</p> </div> <div class="ibox4"> <div class="newbx"> <a href="dongtai01.html"><img src="images/img7.jpg" /></a> <div class="wenz"> <h1><a href="dongtai01.html">选择餐饮创业的四大理由</a></h1> <p>在就业形势越来越严峻的今天，创业成为了越来越多人的选择。这不，毕业季已经过去几个月了，想必很多刚踏入社会的大学生也会选择踏上创业的道路。不过，现在的创业模式多种多样，到底哪一个比较好呢?</p> </div> </div> <div class="newbx"> <a href="dongtai02.html"><img src="images/img8.jpg" /></a> <div class="wenz"> <h1><a href="dongtai02.html">新店长餐饮管理工作</a></h1> <p>店长、店经理是一家餐厅最综合的管理者，也是对本餐厅负责的最高指挥官。作为一名全面管理者来说，必须做好对餐厅各方面的严格控制。新上任或者新提任的您，在管理上是不是常常会有力从不心的感觉，想样样都抓好......</p> </div> </div> <div class="newbx"> <a href="dongtai03.html"><img src="images/img9.jpg" /></a> <div class="wenz"> <h1><a href="dongtai03.html">餐饮服务说话手册</a></h1> <p>在餐饮来讲，服务品质是大多数消费者很看重的一点。而服务员的服务舒适程度，很大一部分体现在说话的技巧上面。而说话的技巧应该怎么炼成呢?餐饮店的类型虽然有很多种，但是多对客人"甜言蜜语"却是在哪一种餐饮店都适用。</p> </div> </div> <div class="newbx"> <a href="dongtai04.html"><img src="images/img10.jpg" /></a> <div class="wenz"> <h1><a href="dongtai04.html">餐饮越来越不好？</a></h1> <p>很多创业者和餐饮老板都在诉苦：餐厅越来越难做了。如今的餐饮市场前景一片大好，不少品牌发展如火如荼，餐饮行业自身门槛就低，例如麻辣烫，加盟费趋于廉价，不需要有大厨的技艺，更不需要有丰富的管理经验......</p> </div> </div> </div> </div> </div> <div class="foot"> <p>Copyright©食尚美食网.ALL rights reserved</p> <p>地址：中国美食杰食尚美食店     邮箱地址：8888@qq.com</p> </div> </body> </html>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179

CSS样式代码

body {margin: 0 auto;font-size: 14px;font-family: "微软雅黑",arial;line-height: 22px; } div,p,input,ul,li,h1,h2,h3 {height: auto;margin: 0;padding: 0;vertical-align: middle; } li {list-style: none; } img {border: 0;margin: 0;padding: 0; } a {color: #333;text-decoration: none; } a:hover {color: #c60707;text-decoration: none;overflow: hidden; } .top{height:110px;} .topcontent{width:1200px;margin:0 auto;padding-top:25px;} .logo{width:309px;height:74px;float:left;} .tel{width:300px;height:74px;float:right;line-height:74px;color:#c71b1b;font-size:28px;} .tel span{float:left;} .tel img{float:left;margin-right:10px;margin-top:20px;} #nav{height:50px;line-height:50px;background:#111111;}

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970