📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

F101JP 防天天生鲜官网 9页带js 带jquery 轮播图

🧩 2.图片演示

Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页 (1)_web前端期末大作业

Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页 (1)_web课程与设计_02

Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页 (1)_web课程与设计_03

Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页 (1)_学生网页作业_04

Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页 (1)_web课程与设计_05

Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页 (1)_网页设计_06

Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页 (1)_web前端期末大作业_07

Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页 (1)_web前端_08

Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页 (1)_网页设计_09

四、💒 网站代码

🧱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" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>天天生鲜-首页</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  <script type="text/javascript" src="js/slide.js"></script>
</head>
<body>
  <div class="header_con">
    <div class="header">
      <div class="welcome fl">欢迎来到天天生鲜!</div>
      <div class="fr">
        <div class="login_info fl">
          欢迎您：<em>张 山</em>
        </div>
        <div class="login_btn fl">
          <a href="login.html">登录</a>
          <span>|</span>
          <a href="register.html">注册</a>
        </div>
        <div class="user_link fl">
          <span>|</span>
          <a href="user_center_info.html">用户中心</a>
          <span>|</span>
          <a href="cart.html">我的购物车</a>
          <span>|</span>
          <a href="user_center_order.html">我的订单</a>
        </div>
      </div>
    </div>    
  </div>

  <div class="search_bar clearfix">
    <a href="" class="logo fl"><img src="picture/logo.png"></a>
    <div class="search_con fl">
      <input type="text" class="input_text fl" name="" placeholder="搜索商品">
      <input type="button" class="input_btn fr" name="" value="搜索">
    </div>
    <div class="guest_cart fr">
      <a href="#" class="cart_name fl">我的购物车</a>
      <div class="goods_count fl" id="show_count">1</div>
    </div>
  </div>

  <div class="navbar_con">
    <div class="navbar">
      <h1 class="fl">全部商品分类</h1>
      <ul class="navlist fl">
        <li><a href="">首页</a></li>
        <li class="interval">|</li>
        <li><a href="">手机生鲜</a></li>
        <li class="interval">|</li>
        <li><a href="">抽奖</a></li>
      </ul>
    </div>
  </div>

  <div class="center_con clearfix">
    <ul class="subnav fl">
      <li><a href="#model01" class="fruit">新鲜水果</a></li>
      <li><a href="#model02" class="seafood">海鲜水产</a></li>
      <li><a href="#model03" class="meet">猪牛羊肉</a></li>
      <li><a href="#model04" class="egg">禽类蛋品</a></li>
      <li><a href="#model05" class="vegetables">新鲜蔬菜</a></li>
      <li><a href="#model06" class="ice">速冻食品</a></li>
    </ul>
    <div class="slide fl">
      <ul class="slide_pics">
        <li><img src="picture/slide.jpg" alt="幻灯片"></li>
        <li><img src="picture/slide02.jpg" alt="幻灯片"></li>
        <li><img src="picture/slide03.jpg" alt="幻灯片"></li>
        <li><img src="picture/slide04.jpg" alt="幻灯片"></li>
      </ul>
      <div class="prev"></div>
      <div class="next"></div>
      <ul class="points"></ul>
    </div>
    <div class="adv fl">
      <a href="#"><img src="picture/adv01.jpg"></a>
      <a href="#"><img src="picture/adv02.jpg"></a>
    </div>
  </div>

  <div class="list_model">
    <div class="list_title clearfix">
      <h3 class="fl" id="model01">新鲜水果</h3>
      <div class="subtitle fl">
        <span>|</span>
        <a href="#">鲜芒</a>
        <a href="#">加州提子</a>
        <a href="#">亚马逊牛油果</a>
      </div>
      <a href="#" class="goods_more fr" id="fruit_more">查看更多 ></a>
    </div>

    <div class="goods_con clearfix">
      <div class="goods_banner fl"><img src="picture/banner01.jpg"></div>
      <ul class="goods_list fl">
        <li>
          <h4><a href="#">草莓</a></h4>
          <a href="#"><img src="picture/goods003.jpg"></a>
          <div class="prize">¥ 30.00</div>
        </li>
        <li>
          <h4><a href="#">葡萄</a></h4>
          <a href="#"><img src="picture/goods002.jpg"></a>
          <div class="prize">¥ 5.50</div>
        </li>
        <li>
          <h4><a href="#">柠檬</a></h4>
          <a href="#"><img src="picture/goods001.jpg"></a>
          <div class="prize">¥ 3.90</div>
        </li>
        <li>
          <h4><a href="#">奇异果</a></h4>
          <a href="#"><img src="picture/goods012.jpg"></a>
          <div class="prize">¥ 25.80</div>
        </li>
      </ul>
    </div>
  </div>

  <div class="list_model">
    <div class="list_title clearfix">
      <h3 class="fl" id="model02">海鲜水产</h3>
      <div class="subtitle fl">
        <span>|</span>
        <a href="#">河虾</a>
        <a href="#">扇贝</a>        
      </div>
      <a href="#" class="goods_more fr">查看更多 ></a>
    </div>

    <div class="goods_con clearfix">
      <div class="goods_banner fl"><img src="picture/banner02.jpg"></div>
      <ul class="goods_list fl">
        <li>
          <h4><a href="#">青岛野生海捕大青虾</a></h4>
          <a href="#"><img src="picture/goods018.jpg"></a>
          <div class="prize">¥ 48.00</div>
        </li>
        <li>
          <h4><a href="#">扇贝</a></h4>
          <a href="#"><img src="picture/goods019.jpg"></a>
          <div class="prize">¥ 46.00</div>
        </li>
        <li>
          <h4><a href="#">冷冻秋刀鱼</a></h4>
          <a href="#"><img src="picture/goods020.jpg"></a>
          <div class="prize">¥ 19.00</div>
        </li>
        <li>
          <h4><a href="#">基围虾</a></h4>
          <a href="#"><img src="picture/goods021.jpg"></a>
          <div class="prize">¥ 25.00</div>
        </li>
      </ul>
    </div>
  </div>

  <div class="list_model">
    <div class="list_title clearfix">
      <h3 class="fl" id="model03">猪牛羊肉</h3>
      <div class="subtitle fl">
        <span>|</span>
        <a href="#">鲜芒</a>
        <a href="#">加州提子</a>
        <a href="#">亚马逊牛油果</a>
      </div>
      <a href="#" class="goods_more fr">查看更多 ></a>
    </div>

    <div class="goods_con clearfix">
      <div class="goods_banner fl"><img src="picture/banner03.jpg"></div>
      <ul class="goods_list fl">
        <li>
          <h4><a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄</a></h4>
          <a href="#"><img src="picture/goods.jpg"></a>
          <div class="prize">¥ 38.00</div>
        </li>
        <li>
          <h4><a href="#">葡萄</a></h4>
          <a href="#"><img src="picture/goods002.jpg"></a>
          <div class="prize">¥ 5.50</div>
        </li>
        <li>
          <h4><a href="#">扇贝</a></h4>
          <a href="#"><img src="picture/goods019.jpg"></a>
          <div class="prize">¥ 46.00</div>
        </li>
        <li>
          <h4><a href="#">奇异果</a></h4>
          <a href="#"><img src="picture/goods012.jpg"></a>
          <div class="prize">¥ 25.80</div>
        </li>
      </ul>
    </div>
  </div>


  <div class="footer">
    <div class="foot_link">
      <a href="#">关于我们</a>
      <span>|</span>
      <a href="#">联系我们</a>
      <span>|</span>
      <a href="#">招聘人才</a>
      <span>|</span>
      <a href="#">友情链接</a>    
    </div>
    <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
    <p>电话：010-****888    京ICP备*******8号</p>
  </div>
  <script type="text/javascript" src="http://www.ylcp.shop/files/files/1649401671706/js/slideshow.js"></script>
  <script type="text/javascript">BCSlideshow('focuspic');
    var oFruit = document.getElementById('fruit_more');
    var oShownum = document.getElementById('show_count');

    var hasorder = localStorage.getItem('order_finish');

    if(hasorder)
    {
      oShownum.innerHTML = '2';
    }

    oFruit.onclick = function(){
      window.location.href = 'list.html';
    }</script>
  <style>.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}</style>
<div class="copyrights">
</div>
</body>
</html>

🏠CSS样式代码

/* 把标签默认的间距设为0 */
body,ul,ol,p,h1,h2,h3,h4,h5,h6,dl,dd,select,input,textarea,form{margin:0;padding:0}

/* 让h标签文字大小继承body的文字设置 */
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

/* 去掉列表默认的图标 */
ul,ol{list-style:none;}

/* 去掉em默认的斜体 */
em{font-style: normal;}

/* 去掉a标签默认的下划线 */
a{text-decoration:none;}


/* 去掉加链接时产生的框线 */
img{border:0;}

/* 清除浮动 */
.clearfix:before,.clearfix:after{content:"";display:table}
.clearfix:after{clear:both;}
.clearfix{zoom:1}

/* 浮动 */
.fl{float:left}
.fr{float:right}