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