HTML5期末大作业：餐饮美食网页设计——美食网(7页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品


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


作品介绍

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

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

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

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


文章目录

一、作品展示

1.首页

HTML5期末大作业：餐饮美食网页设计——美食网(7页) HTML+CSS+JavaScript_html

2.美食购买

HTML5期末大作业：餐饮美食网页设计——美食网(7页) HTML+CSS+JavaScript_html5_02

3.个人中心

HTML5期末大作业：餐饮美食网页设计——美食网(7页) HTML+CSS+JavaScript_网页设计_03

4.下单支付

HTML5期末大作业：餐饮美食网页设计——美食网(7页) HTML+CSS+JavaScript_html5_04

5. 登录/注册

HTML5期末大作业：餐饮美食网页设计——美食网(7页) HTML+CSS+JavaScript_网页设计_05

HTML5期末大作业：餐饮美食网页设计——美食网(7页) HTML+CSS+JavaScript_html5_06

6.今日推荐

HTML5期末大作业：餐饮美食网页设计——美食网(7页) HTML+CSS+JavaScript_javascript_07

二、文件目录

HTML5期末大作业：餐饮美食网页设计——美食网(7页) HTML+CSS+JavaScript_css_08

三、代码实现

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="cake.css" />
  <link rel="stylesheet" type="text/css" href="index.css" />
</head>

<body>
  <div class="header">
    <a href="cake.html" class="logo">
      <img src="image/logo.JPG" alt="图片缺失" />
    </a>
    <ul class="header-right">
      <li><a href="reg.html" class="login">登录</a></li>
      <li><a href="reg.html" class="register">注册</a></li>
    </ul>
  </div>
  <div class="nav-wrap">
    <ul class="nav">
      <li><a href="#strategy" class="active">今日推荐</a></li>
      <li><a href="#mp" class="active">热卖</a></li>
      <li><a href="#np" class="active">吐司系列</a></li>
      <li><a href="#tp" class="active">甜点系列</a></li>
      <li><a href="#news" class="active">生日蛋糕</a></li>
      <li><a href="yummy.html" class="active">俏美味</a></li>
      <li><a href="cheap.html" class="active">狠优惠</a></li>
      <li><a href="us.html" class="active">关于我们</a></li>
    </ul>
  </div>

  <br />
  <br />
  <div class="group"><span>TODAY'S&nbsp;RECOMMENDATION</span>&nbsp;今日推荐</div>
  <hr>
  <div class="group-h">DESSERT&nbsp;TO&nbsp;CURE&nbsp;EVERYTHING</div>
  <div id="strategy">
    <div class="strategy-left">
      <a href="pay.html"><img src="image/hzdg.JPG" title="点击购买" /></a>
      <h4>复古手绘盒子蛋糕</h4>
    </div>
    <div class="strategy-right">
      <ul>
        <li class="strategy-item">
          <div class="strategy-item-left">
            <img src="image/nlp.PNG" style="height: 80px;">
          </div>
          <div class="strategy-item-right">
            <br /><br>
            <h3><span>[已买]</span>倪***丽</h3>
            <br />
            <span>草莓乳酪味一打开，草莓乳酪香气扑鼻而来，草莓冻干敲好恰啊，本李敏浩老婆觉得很可！</span>
          </div>
        </li>
        <li class="strategy-item">
          <div class="strategy-item-left">
            <img src="image/cdd.PNG" style="height: 80px;">
          </div>
          <div class="strategy-item-right">
            <br /><br>
            <h3><span>[已买]</span>可*****叨</h3>
            <br />
            <span>蛋糕味道很好，本朱一龙的老婆也真的觉得很可！</span>
          </div>
        </li>
        <li class="strategy-item">
          <div class="strategy-item-left">
            <img src="image/txq.PNG" style="height: 80px;">
          </div>
          <div class="strategy-item-right">
            <br /><br>
            <h3><span>[已买]</span>冷***唐</h3>
            <br />
            <span>即使我很冷酷，我还是要说一句很好吃！</span>
          </div>
        </li>
        <li class="strategy-item">
          <div class="strategy-item-left">
            <img src="image/lxy.PNG" style="height: 80px;">

          </div>
          <div class="strategy-item-right">
            <br /><br>
            <h3><span>[已买]</span>资*****亚</h3>
            <br />
            <span>资深少女很喜欢！</span>
          </div>
        </li>
        <li class="strategy-item">
          <div class="strategy-item-left">
            <img src="image/xtz.PNG" style="height: 80px;">
          </div>
          <div class="strategy-item-right">
            <br /><br>
            <h3><span>[已买]</span>薛***柱</h3>
            <br />
            <span>铁柱的最爱！</span>
          </div>
        </li>
        <li class="strategy-item">
          <div class="strategy-item-left">
            <img src="image/nh.PNG" style="height: 80px;">
          </div>
          <div class="strategy-item-right">
            <br /><br>
            <h3><span>[已买]</span>薛***猪</h3>
            <br />
            <span>铁猪很喜欢！</span>
          </div>
        </li>
        <li class="strategy-item">
          <div class="strategy-item-left">
            <img src="image/cq.PNG" style="height: 80px;">
          </div>
          <div class="strategy-item-right">
            <br /><br>
            <h3><span>[已买]</span>倪****爱</h3>
            <br />
            <span>OMG！买它！买它！</span>
          </div>
        </li>
        <li class="strategy-item">
          <div class="strategy-item-left">
            <img src="image/ld.PNG" style="height: 80px;">
          </div>
          <div class="strategy-item-right">
            <br /><br>
            <h3><span>[已买]</span>人***得</h3>
            <br />
            <span>人间突然值得了！</span>
          </div>
        </li>

      </ul>
    </div>

    <br />
    <br />
    <div class="group"><span>热卖</span>&nbsp;老板推荐</div>
    <hr>
    <div class="group-h">DESSERT&nbsp;TO&nbsp;CURE&nbsp;EVERYTHING</div>
    <div id="mp">
      <ul class="zyt">
        <li>
          <div class="zyt-img">
            <img src="image/bbj.JPG">
          </div>
          <div><span class="zyt-title">草莓抱抱卷</span><a href="pay.html"><span class="tuan">点击购买</span></a>
        </li>
        <li>
          <div class="zyt-img">
            <img src="image/llqc.JPG">
          </div>
          <div><span class="zyt-title">榴莲千层</span><a href="pay.html"><span class="tuan">点击购买</span></a>
        </li>
        <li>
          <div class="zyt-img">
            <img src="image/zzdg.JPG">
          </div>
          <div><span class="zyt-title">爆浆巧克力脏脏蛋糕</span><a href="pay.html"><span class="tuan">点击购买</span></a>
        </li>
      </ul>
    </div>
    <br />
    <br />
    <div class="group"><span>TOAST&nbsp;SERIES</span>&nbsp;吐司系列</div>
    <hr>
    <div class="group-h">DESSERT&nbsp;TO&nbsp;CURE&nbsp;EVERYTHING</div>
    <div id="np">
      <ul class="jplx">
        <li>
          <div class="jplx-img">
            <img src="image/fmtsp.JPG">
          </div>
          <span class="jplx-title">蜂蜜吐司片</span><a href="pay.html"><span class="xiang">点击购买</span></a>
        </li>
        <li>
          <div class="jplx-img">
            <img src="image/yd.JPG">
          </div>
          <span class="jplx-title">云朵太阳蛋烤吐司</span><a href="pay.html"><span class="xiang">点击购买</span></a>
        </li>
        <li>
          <div class="jplx-img">
            <img src="image/rsts.JPG">
          </div>
          <span class="jplx-title">肉松吐司卷</span><a href="pay.html"><span class="xiang">点击购买</span></a>
        </li>
        <li>
          <div class="jplx-img">
            <img src="image/bjzs.JPG">
          </div>
          <span class="jplx-title">芝士火腿吐司</span><a href="pay.html"><span class="xiang">点击购买</span></a>
        </li>
        <li>
          <div class="jplx-img">
            <img src="image/yj.JPG">

            <span class="jplx-title">奶香熔岩乳酪吐司</span><a href="pay.html"><span class="xiang">点击购买</span></a>
        </li>
        <li>
          <div class="jplx-img">
            <img src="image/sxtst.JPG">

            <span class="jplx-title"> 蒜香吐司条</span><a href="pay.html"><span class="xiang">点击购买</span></a>
        </li>
        <li>
          <div class="jplx-img">
            <img src="image/zzht.JPG">

            <span class="jplx-title">爆浆芝士吐司</span><a href="pay.html"><span class="xiang">点击购买</span></a>
        </li>
        <li>
          <div class="jplx-img">
            <img src="image/snbd.JPG">

            <span class="jplx-title">酸奶布丁烤吐司</span><a href="pay.html"><span class="xiang">点击购买</span></a>
        </li>
      </ul>
    </div>
    <br />
    <br />
    <div class="group"><span>DESSERT&nbsp;SERIES</span>&nbsp;甜点系列</div>
    <hr>
    <div class="group-h">DESSERT&nbsp;TO&nbsp;CURE&nbsp;EVERYTHING</div>
    <div id="tp">
      <ul class="activity">
        <li>
          <img src="image/mjj.JPG" alt="" />
          <a href="pay.html">
            <div class="activity-desc">
              <h4>毛巾卷蛋糕</h4>
              <p>淡奶油 糯米面</p>
            </div>
          </a>
        </li>
        <li>
          <img src="image/xmn.JPG" alt="" />
          <a href="pay.html">
            <div class="activity-desc">
              <h4>雪媚娘</h4>
              <p>原味 糯米面 淡奶油</p>
            </div>
          </a>
        </li>
        <li>
          <img src="image/dt.JPG" alt="" />
          <a href="pay.html">
            <div class="activity-desc">
              <h4>芝士蛋挞</h4>
              <p>芝士 鸡蛋 白糖</p>
            </div>
          </a>
        </li>
        <li>
          <img src="image/pf.JPG" alt="" />
          <a href="pay.html">
            <div class="activity-desc">
              <h4>冰淇淋泡芙</h4>
              <p>香草味 鸡蛋 面粉</p>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <br><br>
    <div class="dynamic">
      <br />
      <br />
      <div class="group"><span>BIRTHDAY&nbsp;CAKE</span>&nbsp;<b class="only">生日蛋糕</b></div>
      <hr>
      <div class="group-h">DESSERT&nbsp;TO&nbsp;CURE&nbsp;EVERYTHING</div>
      <div id="news">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
          <ul class="news-img">
            <li>
              <img src="image/01.JPG" alt="" />
              <a href="pay.html">
                <div class="news-desc">
                  <br />
                  <p>&nbsp;复古手绘生日蛋糕&nbsp;&nbsp;￥52.1</p>
                </div>
              </a>
            </li>
            <li>
              <img src="image/02 .JPG" alt="" />
              <a href="pay.html">
                <div class="news-desc">
                  <br />
                  <p>&nbsp;芝麻街生日蛋糕&nbsp;&nbsp;￥52.1</p>
                </div>
              </a>
            </li>
            <li>
              <img src="image/04 .JPG" alt="" />
              <a href="pay.html">
                <div class="news-desc">
                  <br />
                  <p>&nbsp;断层蛋糕&nbsp;&nbsp;￥52.1</p>
                </div>
              </a>
            </li>
            <li>
              <img src="image/05.JPG" alt="" />
              <a href="pay.html">
                <div class="news-desc">
                  <br />
                  <p>&nbsp;手绘彩旗生日蛋糕&nbsp;&nbsp;￥52.1</p>
                </div>
              </a>
            </li>
            <li>
              <img src="image/03.JPG" alt="" />
              <a href="pay.html">
                <div class="news-desc">
                  <br />
                  <p>&nbsp;ins风组合蛋糕&nbsp;&nbsp;￥52.1</p>
                </div>
              </a>
            </li>
            <li>
              <img src="image/06.JPG" alt="" />
              <a href="pay.html">
                <div class="news-desc">
                  <br />
                  <p>&nbsp;复古童趣生日蛋糕&nbsp;&nbsp;￥52.1</p>
                </div>
              </a>
            </li>

          </ul>
        </div>
        <br />
        <br />
        <br />
        <div class="final">
          <br>
          <p>WARM&nbsp;WISH&nbsp;ON&nbsp;YOUR&nbsp;BIRTHDAY</p>
          <P>MAY&nbsp;GALDNESS&nbsp;FILL&nbsp;YOUR&nbsp;EVERY&nbsp;HOUR</P>
        </div>
      </div>
    </div>

    <div class="footer">
      <div>
        Copyright &copy;2017-2020 &nbsp;128四大金刚 &nbsp;版权所有&nbsp; 苏ICP备&nbsp;5201314号
      </div>
      <img src="image/code.JPG">
    </div>
  </div>
  <!--回顶部-->
  <div class="back-top"><img src="image/top.JPG"></div>
  <script src="js/jquery.min.js"></script>
  <script src="js/index.js"></script>
</body>

</html>