HTML5期末大作业:美食网站设计——我的餐厅食品网页(8页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品


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


1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多?
2.没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~
3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。


作品介绍

1.网页作品简介​ :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。一款红色简洁的餐饮食品公司网站模板,简约而不失大方,适用于餐饮行业、美食食品企业官网模板,共包含8个html页面模板。

2.网页作品编辑​​:此作品为学生期末大作业网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:​​DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++​​ 等任意HTML软件编辑修改网页)。

3.网页作品布局​:网页布局整体为响应式布局、LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术​:使用DIV+CSS制作网页, 背景图、音乐、视频、flash、鼠标经过及选中导航变色效果、下划线 、等。 表单提交、评论留言,并使用JavaScript制作了表单判断(提交时表单不能为空)。


文章目录

一、作品展示

1.首页

HTML5期末大作业:美食网站设计——我的餐厅食品网页(8页) HTML+CSS+JavaScript_美食网页设计源码HTML

2.关于

HTML5期末大作业:美食网站设计——我的餐厅食品网页(8页) HTML+CSS+JavaScript_html期末大作业_02

3.发展历程

HTML5期末大作业:美食网站设计——我的餐厅食品网页(8页) HTML+CSS+JavaScript_个人毕设网页HTML_03

4.产品展示

HTML5期末大作业:美食网站设计——我的餐厅食品网页(8页) HTML+CSS+JavaScript_html5_04

5. 招贤纳士

HTML5期末大作业:美食网站设计——我的餐厅食品网页(8页) HTML+CSS+JavaScript_html期末大作业_05

二、文件目录

HTML5期末大作业:美食网站设计——我的餐厅食品网页(8页) HTML+CSS+JavaScript_美食网页设计源码HTML_06

三、代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="css/default.css" />
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js" ></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
</head>
<body>
<!--header-->
<div class="headerWrap">
<div class="header w1200 cleafix">
<!--logo-->
<div class="logo fl"><a href="#"><img src="img/logo.png" /></a></div>
<!--nav-->
<ul id="nav" class="nav clearfix">
<li class="nLi on">
<h3><a href="#">首页</a></h3>
</li>
<li class="nLi">
<h3><a href="about.html">关于饭心</a></h3>
<ul class="sub">
<li><a href="company_overview.html">企业概述</a></li>
<li><a href="development.html">发展历程</a></li>
<li><a href="#">理想愿景</a></li>
</ul>
</li>
<li class="nLi">
<h3><a href="show.html">产品展示</a></h3>
</li>
<li class="nLi ">
<h3><a href="accepted.html">招贤纳士</a></h3>
</li>
<li class="nLi">
<h3><a href="cooperation.html">商务合作</a></h3>
</li>
</ul>
<!--预约提货-->
<div class="heaR"><a href="#">预约提货</a></div>
</div>
</div>
<!--banner-->
<div class="slideBox">
<div class="hd">
<ul><li></li><li></li><li></li></ul>
</div>
<div class="bd">
<ul>
<li><a href="#"><img src="temp/banner.jpg" /></a></li>
<li><a href="#"><img src="temp/banner.jpg" /></a></li>
<li><a href="#"><img src="temp/banner.jpg" /></a></li>
</ul>
</div>
</div>
<!--页面主体部分-->
<!--关于饭心-->
<div class="mainBox">
<div class="main w1200">
<div class="mainTitle">
<h2>ABOUT US</h2>
<h3>关于饭心</h3>
<em></em>
</div>
<!--图片轮播-->
<div class="Picshuff">
<h2>北京缔造品质旗下品牌,健康食品的供应商</h2>
<p>我们要用健康味道,带您感受大自然的奇妙。饭心绿色供应链,将理想田的健康味道带到您的身边。为您寻找更多有益<br />健康的原生食材,饭心,只为给你更健康。</p>
<div class="picScroll-left">
<div class="hd">
<a class="next"></a>
<a class="prev"></a>
</div>
<div class="bd">
<ul class="picList cleafix">
<li>
<a href="#">
<i class="ico"></i>
<p>全套定制</p>
</a>
</li>
<li>
<a href="#">
<i class="ico1"></i>
<p>腰封定制</p>
</a>
</li>
<li>
<a href="#">
<i class="ico2"></i>
<p>礼品册</p>
</a>
</li>
</ul>
</div>
</div>
<h3 class="More"><a href="#">了解更多</a></h3>
</div>
</div>
</div>
<!--产品展示-->
<div class="mainBox mainBox1">
<div class="main w1200">
<div class="mainTitle">
<h2>PRODUCT DISPIAY</h2>
<h3>产品展示</h3>
<em></em>
</div>
<div class="show_bot show_bot1">
<ul class="cleafix">
<li>
<a href="#">
<i><img src="temp/pic1.jpg"></i>
<p>意大利DONNACHIC公司<em></em></p>
</a>
</li>
<li>
<a href="#">
<i><img src="temp/pic2.jpg"></i>
<p>千枣红酒品礼品包装定制<em></em></p>
</a>
</li>
<li>
<a href="#">
<i><img src="temp/pic3.jpg"></i>
<p>中鹤集团外婆面馆礼品定制<em></em></p>
</a>
</li>
<li>
<a href="#">
<i><img src="temp/pic4.jpg"></i>
<p>饭心慕溪黑糖健康食品<em></em></p>
</a>
</li>
</ul>
<h3 class="More"><a href="#">了解更多</a></h3>
</div>
</div>
</div>
<!--饭心服务-->
<div class="mainBox mainBox2">
<div class="main w1200">
<div class="mainTitle">
<h2>FUNXIN SERVICE</h2>
<h3>饭心服务</h3>
<em></em>
</div>
<div class="server_b">
<div class="hd">
<ul><li></li><li></li><li></li></ul>
</div>
<div class="bd">
<ul class="cleafix">
<li>
<div>
<a href="#">
<div class="serTxt">
<h2>安全食品</h2>
<em></em>
<p>倾力打造线上线下全渠道的销售模式</p>
<span></span>
</div>
<div class="serPic"><img src="temp/img1.jpg"></div>
</a>
</div>
<div>
<a href="#">
<div class="serTxt">
<h2>礼品定制</h2>
<em></em>
<p>专属企业私人礼品视觉定制</p>
<span></span>
</div>
<div class="serPic"><img src="temp/img2.jpg"></div>
</a>
</div>
</li>
<li>
<div>
<a href="#">
<div class="serTxt">
<h2>安全食品</h2>
<em></em>
<p>倾力打造线上线下全渠道的销售模式</p>
<span></span>
</div>
<div class="serPic"><img src="temp/img1.jpg"></div>
</a>
</div>
<div>
<a href="#">
<div class="serTxt">
<h2>礼品定制</h2>
<em></em>
<p>专属企业私人礼品视觉定制</p>
<span></span>
</div>
<div class="serPic"><img src="temp/img2.jpg"></div>
</a>
</div>
</li>
<li>
<div>
<a href="#">
<div class="serTxt">
<h2>安全食品</h2>
<em></em>
<p>倾力打造线上线下全渠道的销售模式</p>
<span></span>
</div>
<div class="serPic"><img src="temp/img1.jpg"></div>
</a>
</div>
<div>
<a href="#">
<div class="serTxt">
<h2>礼品定制</h2>
<em></em>
<p>专属企业私人礼品视觉定制</p>
<span></span>
</div>
<div class="serPic"><img src="temp/img2.jpg"></div>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--饭心客户-->
<div class="mainBox mainBox1">
<div class="main w1200">
<div class="mainTitle">
<h2>CUSTOMER</h2>
<h3>饭心客户</h3>
<em></em>
</div>
<div class="customer cleafix">
<ul>
<li><a href="#"><img src="temp/img3.jpg" /></a></li>
<li><a href="#"><img src="temp/img3.jpg" /></a></li>
<li><a href="#"><img src="temp/img3.jpg" /></a></li>
<li><a href="#"><img src="temp/img3.jpg" /></a></li>
<li><a href="#"><img src="temp/img3.jpg" /></a></li>
<li><a href="#"><img src="temp/img3.jpg" /></a></li>
<li><a href="#"><img src="temp/img3.jpg" /></a></li>
<li><a href="#"><img src="temp/img3.jpg" /></a></li>
<li><a href="#"><img src="temp/img3.jpg" /></a></li>
<li><a href="#"><img src="temp/img3.jpg" /></a></li>
</ul>
</div>
<h3 class="More"><a href="#">了解更多</a></h3>
</div>
</div>
<!--footer-->
<div class="footerWrap">
<div class="footer w1200 cleafix">
<ul>
<li>
<h2>CONTACT</h2>
<h3>联系饭心</h3>
<div class="fooM cleafix">
<i><img src="img/ico_btn1.png"></i>
<div class="divTxt fl">
<h4>ADDRESS</h4>
<em></em>
<p>北京市朝阳区北苑领地office大厦</p>
</div>
</div>
<div class="fooM cleafix">
<i><img src="img/ico_btn2.png"></i>
<div class="divTxt fl">
<h4>PHONE</h4>
<em></em>
<p>15801014527 / 13810977519 李爽</p>
</div>
</div>
</li>
<li>
<h2>&nbsp;</h2>
<h3>&nbsp;</h3>
<div class="fooM cleafix">
<i><img src="img/ico_btn3.png"></i>
<div class="divTxt fl">
<h4>E-MAIL</h4>
<em></em>
<p>Lishuang@fanxin100.com</p>
</div>
</div>
<div class="fooM cleafix">
<i><img src="img/ico_btn4.png"></i>
<div class="divTxt fl">
<h4>相关说明</h4>
<em></em>
<p><a href="#">隐私政策</a><a href="#">法律声明</a><a href="#">使用条款</a></p>
</div>
</div>
</li>
<li>
<h2>FOCUS ON</h2>
<h3>关注饭心</h3>
<span><img src="img/webchat.png" /></span>
<p>扫描关注饭心官网微信!</p>
</li>
</ul>
</div>
<div class="fooTxt">Copyright © 2016 饭心网 保留所有权利</div>
</div>
</body>
</html>

四、web前端(学习资料)


HTML5期末大作业:美食网站设计——我的餐厅食品网页(8页) HTML+CSS+JavaScript_html期末大作业_07


五、源码获取

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

❉ 2.​关注我​ ~ 每天带你学习 :各种前端插件、七夕表白网页制作、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、web期末大作业模板 、等! 「 前后开发者,一起探讨 前端,JAVA ,Node 知识,互相学习」!

❉3.以上内容技术相关问题可以相互学习,可在 ​V幸 公Z号 >>> web前端小日记​ ????????????????????????获取更多源码 ???????????????????????? !

HTML5期末大作业:美食网站设计——我的餐厅食品网页(8页) HTML+CSS+JavaScript_html期末大作业_08

六、更多源码

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

HTML5期末大作业:美食网站设计——我的餐厅食品网页(8页) HTML+CSS+JavaScript_html期末大作业_09

HTML5期末大作业:美食网站设计——我的餐厅食品网页(8页) HTML+CSS+JavaScript_美食网页设计源码HTML_10