HTML5期末大作业：美食网页主题网站设计与实现——HTML+CSS+JavaScript月饼美食食品企业网站html模板9页面

最新推荐文章于 2023-12-16 11:21:20 发布

IT黑马程序员

最新推荐文章于 2023-12-16 11:21:20 发布

阅读量149

点赞数

分类专栏：学生网页设计作业文章标签： html css js web 前端

本文链接：https://blog.csdn.net/qq_38513433/article/details/127580080

版权

学生网页设计作业专栏收录该内容

2018 篇文章 134 订阅

订阅专栏

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

一、网站题目👨‍🎓

🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。

二、网站描述✍️

🍧美食主题网站主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。

三、网站介绍📚

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言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 rel="stylesheet" type="text/css" href="style/css.css">
<script src="js/jquery-1.8.3.min.js"></script>
<!--Luara js文件-->
<script src="js/jquery.luara.0.0.1.min.js"></script>
</head>
<body>
<div class="top">
  <div class="topcon clear">
    <div class="tl left clear">您好，欢迎来到圣军食品有限公司!</div>
    <div class="tr right clear">400-6666666</div>
  </div>
</div>
<!-- top end -->
<div class="nav">
  <div class="navcon clear">
    <div class="logo left clear"><img src="images/logo.png" alt="圣军食品有限公司" /></div>
    <div class="menu right clear">
      <ul>
        <li class="cur"><a href="index.html">首页</a></li>
        <li><a href="about.html">关于我们</a></li>
        <li><a href="cpzs.html">产品展示</a></li>
        <li><a href="news.html">新闻资讯</a></li>
        <li><a href="zsjm.html">招商加盟</a></li>
        <li><a href="rczp.html">人才招聘</a></li>
        <li><a href="lxwm.html">联系我们</a></li>
      </ul>
    </div>
  </div>
</div>
<!--nav end -->
<div class="banner">
  <!--Luara图片切换骨架begin-->
  <div class="example2">
    <ul>
      <li><img src="images/banner.jpg" alt="1"/></li>
      <li><img src="images/banner.jpg" alt="2"/></li>
      <li><img src="images/banner.jpg" alt="3"/></li>
      <li><img src="images/banner.jpg" alt="4"/></li>
    </ul>
    <div class="dh">
      <ol class="clear">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </div>
  </div>
  <!--Luara图片切换骨架end-->
  <script>
        $(function(){
            <!--调用Luara示例-->
            $(".example2").luara({width:"1920",height:"565",interval:4500,selected:"seleted",deriction:"left"});

        });
    </script>
</div>
<!-- banner end -->
<div class="content">
  <div class="conbox mt30 clear">
    <div class="bktit clear">
      <div class="qyxc_tit left clear"><img src="images/qyxc_tit.png" alt="企业宣传" /></div>
      <div class="xwzx_tit left clear"><img src="images/zxzx_tit.png" alt="最新资讯" /></div>
      <div class="lxwm_tit right clear"><img src="images/lxwm_tit.png" alt="联系我们" /></div>
    </div>
    <div class="bkbox clear">
      <div class="qyxc left clear">
       <div class="example">
        <ul>
            <li><img src="images/xc_img.jpg" alt="1"/></li>
            <li><img src="images/xc_img.jpg" alt="2"/></li>
            <li><img src="images/xc_img.jpg" alt="3"/></li>
            <li><img src="images/xc_img.jpg" alt="4"/></li>
        </ul>
        <div class="tpdh">
        <ol class="clear">
            <li>4</li>
            <li>3</li>
            <li>2</li>
            <li>1</li>
        </ol>
        </div>
    </div>
    <!--Luara图片切换骨架end-->
    <script>
    $(function(){
        <!--调用Luara示例-->
        $(".example").luara({width:"325",height:"230",interval:4000,selected:"seleted"});

    });
    </script>

      </div>
      <div class="xwzx left clear">
        <div class="xw_top clear">
          <div class="xw_img left clear"><img src="images/zx_img.jpg" alt=""></div>
          <div class="xw_text right clear">
            <h3><a href="#">改走親民路線鮑魚禮盒隻賣200元</a></h3>
            <p>“咋個那麼快就要過中秋了哦？冰箱頭還剩幾個粽子沒吃種禮盒裡...</p>
          </div>
        </div>
        <!-- xw_top end -->
        <ul>
          <li><span class="rq">[2015-09-06]</span><a href="subnew.html">四川月饼知名品牌－出十大金天伦月...</a></li>
          <li><span class="rq">[2015-09-06]</span><a href="subnew.html">四川月饼知名品牌－出十大金天伦月...</a></li>
          <li><span class="rq">[2015-09-06]</span><a href="subnew.html">四川月饼知名品牌－出十大金天伦月...</a></li>
          <li><span class="rq">[2015-09-06]</span><a href="subnew.html">四川月饼知名品牌－出十大金天伦月...</a></li>
          <li><span class="rq">[2015-09-06]</span><a href="subnew.html">四川月饼知名品牌－出十大金天伦月...</a></li>
          <li><span class="rq">[2015-09-06]</span><a href="subnew.html">四川月饼知名品牌－出十大金天伦月...</a></li>
        </ul>
      </div>
      <div class="lxwm right clear"> <img src="images/lx_img.jpg" alt="联系我们" />
        <p>地址：洛阳市洛龙区开元大道219号宝龙城市...<br />
          联系人：朱海华<br />
          电话：0371-7691000<br />
          手机：15617811151<br />
          邮箱：384397414@qq.com</p>
      </div>
    </div>
  </div>
  <!-- conbox end -->
  <div class="gywm mt20">
    <h2><span class="more"><a href="about.html">更多 &gt;&gt;</a></span><img src="images/gywm_tit.png" alt="关于我们" /></h2>
    <div class="wmbox clear">
      <div class="wm_img left clear"><img src="images/gywm.jpg" alt="关于我们" /></div>
      <div class="wm_text right clear">
        <p>商丘张弓老朱家食品有限公司创建于1992年，是一家专业生产月饼、蜜三刀、密角、绿豆糕、糕点、等食品的品牌企业。公司拥有精干、专业、创新的员工团队，用自信、高效、诚信、创新的经营理念为客户提供全面的优质服务！</p>
        <p>老朱家人凭着艰苦创业，不屈不挠的精神，经过不断的努力和发展，公司拥有标准化厂房、规模宏大的办公大楼以及配备齐全的送货车队。月饼生产流水线及全自动生产设备。以优良的产品品质和务实进去的经营作风，在客户和同行界得到广泛认同和好评。原商丘市人大副主任朱永勤曾亲临本厂品尝后给予高度赞扬，并亲自题词：送孝心，献爱心，老朱家月饼最称心。原全国人大代表张弓酒厂董事长，县人大主任吕信贻品尝后也给予高度赞扬。原张弓酒厂供应部部长，现任张弓北村支部书记张强亲临本厂视察题词：香甜松酥，溢满中原！老朱家深知“变革与创新是始终紧系自身发展的”，所以，一直致力于企业的改良和创新工作，小到每一种原料选购，大到企业品牌战略的实施，凭借企业自身的综合实力，不断进行新的探索和挑...<a href="#"><span style="color:#e52516;">【查看详情】</span></a></p>
      </div>
    </div>
  </div>
  <!-- gywm end -->
  <div class="cpzs mt20">
    <h2><span class="more"><a href="cpzs.html">更多 &gt;&gt;</a></span><img src="images/cpzs_tit.png" alt="产品展示" /></h2>
    <div class="cpbox">
      <ul class="clear">
        <li><a href="subpro.html"><img src="images/cp.jpg">
          <p>圣君月饼·花好月圆</p>
          </a> </li>
        <li><a href="subpro.html"><img src="images/cp.jpg">
          <p>圣君月饼·花好月圆</p>
          </a> </li>
        <li><a href="subpro.html"><img src="images/cp.jpg">
          <p>圣君月饼·花好月圆</p>
          </a> </li>
        <li><a href="subpro.html"><img src="images/cp.jpg">
          <p>圣君月饼·花好月圆</p>
          </a> </li>
      </ul>
    </div>
  </div>
  <!-- cpzs end -->
</div>
<!-- content end -->
<div class="footer mt20">
  <div class="footcon">
    <div class="f_link"><span style="color:#c58b44; font-size:18px;">友情链接：</span><a href="#">嘻嘻月饼</a> <a href="#">花好月圆月饼</a> <a href="#">老字号月饼</a> <a href="#">家里蹲月饼</a> <a href="#">真好月饼</a> <a href="#">嘻嘻月饼</a> <a href="#">花好月圆月饼</a> <a href="#">老字号月饼</a> <a href="#">家里蹲月饼</a> </div>
    <div class="f_text clear">
      <div class="ftl left clear">
        <div class="f_nav"><a href="index.html">首页</a> / <a href="about.html">关于我们</a> / <a href="cpzs.html">产品展示</a> / <a href="news.html">新闻资讯</a> / <a href="zsjm.html">招商加盟</a> / <a href="rczp.html">人才招聘</a> / <a href="lxwm.html">联系我们</a></div>
        <p>Copyright @ 2019 meiweishipin.com. 技术支持：和美科技有限公司<br />
          销售热线：400-6666666 联系人：白经理 地址：开封市新元区金普大道121号</p>
      </div>
      <div class="ftr right clear"><img src="images/ewm.jpg" alt="二维码" /></div>
    </div>
  </div>
</div>
<!-- footer end -->
</body>
</html>

CSS样式代码💒


@charset "utf-8";
/* CSS Document */
/* ========= 公共样式 ========= */
*{ margin:0; padding:0}
body{ font-family:"Microsoft yahei", sans-serif,Arial;font-size:12px;margin:0;padding:0;color:#555; background:url(../images/body_bg.jpg);}
div,h1,h2,h3,h4,h5,p,ul,ol,li,dl,dd,dt,img,form{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
form,tr,th,td,input,select{font-size:13px;}
input{font-family: arial;}/*text and password*/
table{border-collapse:collapse;}/*边线重叠*/
/*link*/
a{text-decoration:none;color:#555;}
a:hover{color:#e52516;}
.clear {zoom:1;}
.clear:after {content:'';display:block;clear:both;height:0px;}

/*解决超链接点击出现虚框问题*/
a{text-decoration:none;outline:none;}
a:active{star:expression(this.onFocus=this.blur());}
.left{display:inline;float:left}.right{display:inline;float:right}
.mt5{ margin-top:5px!important;}
.mt10{ margin-top:10px!important;}
.mt15{ margin-top:15px!important;}
.mt20{ margin-top:20px!important;}
.mt25{ margin-top:25px!important;}
.mt30{ margin-top:30px!important;}
.mt35{ margin-top:35px!important;}
.mt40{ margin-top:40px!important;}
.mt45{ margin-top:45px!important;}
.mt50{ margin-top:50px!important;}
.blank10{ height:10px; line-height:10px;}


/*---------------    首页样式 ----------------*/
.top{width:100%; height:35px; background:#331f07;}
.topcon{ width:1000px; height:35px; line-height:35px; margin:0 auto; overflow:hidden;}
.tl{ color:#b9b9b9;}
.tr{ background:url(../images/zxrx.png) left center no-repeat; padding-left:98px; font-size:20px; color:#e52516;}

.nav{ width:100%; height:100px; background:url(../images/nav.png) repeat-x;}
.navcon{ width:1000px; height:100px; margin:0 auto; overflow:hidden;}
.logo img{ margin-top:5px;}
.menu li{ float:left; font-size:16px; }
.menu li a{ display:block; padding:40px 30px 0 30px; color:#fedc83;}
.menu li a:hover,.menu .cur{ background:url(../images/nav_li.png) top center no-repeat;}
.menu li a:hover,.menu .cur a{ color:#fff;}


/*banner*/
.banner{ width:100%; height:565px;overflow:hidden;}
/*左滑*/
.luara-left{position:relative;padding:0;overflow: hidden;}
.luara-left ul{position: relative;padding: inherit;margin: 0;}
.luara-left ul li{float: left;padding: inherit;margin: inherit;list-style: none;}
.luara-left ul li img{width: inherit;height: inherit;}
.dh{position:relative;width:100%;height:60px;top:-60px; left:0; background:#000;filter:alpha(opacity=50);opacity:0.5; z-index:999}
.dh ol{ width:1000px; margin:0 auto; padding-top:25px;}
.dh ol li{float:right;width:38px;height:7px; margin:0 5px;background:#c8c8c6;}
.dh ol li.seleted{background:#cd0000;}


.content{ width:1000px; height:auto; margin:0 auto; overflow:hidden;}
.bktit{ background:url(../images/tit_bg.png) bottom center no-repeat; height:66px;}
.qyxc_tit,.qyxc{ width:325px; height:auto; overflow:hidden;}
.xwzx_tit,.xwzx{ width:340px; height:auto; overflow:hidden; margin:0 20px;}
.lxwm_tit,.lxwm{ width:285px; height:auto; overflow:hidden;}
.bkbox{ padding-top:15px;}
.tpdh{position:relative;width:100%; height:35px;top:-35px; left:0; background:#666;filter:alpha(opacity=50);opacity:0.5;}
.tpdh ol{ padding:10px 10px 0 0;}
.tpdh ol li{float:right;width:15px;height:15px; margin:0 5px;background:#000; color:#999; text-align:center;}
.tpdh ol li.seleted{background:#cd0000; color:#fff;}
/*渐隐式*/
.luara-{position:relative;padding:0;overflow: hidden;}
.luara- ul{padding: inherit;margin: 0;}
.luara- ul li{display: none;padding: inherit;margin: inherit;list-style: none;}
.luara- ul li:first-child{display:block;}
.luara- ul li img{width: inherit;height: inherit;}

.gywm h2,.cpzs h2{ background:url(../images/tit_bg.png) bottom center no-repeat; height:66px;}
.more{ font-size:12px; font-weight:normal; float:right; margin:35px 15px 0 0;}
.more a,.more a:hover{ color:#722416;}
.wmbox{ padding-top:20px;}
.wm_img{ width:283px;}
.wm_img img{ width:283px; height:231px;}
.wm_text{ width:700px; height:auto; line-height:29px;}
.wm_text p{ text-indent:2em;}
.xw_img{ width:109px;}
.xw_img img{ width:109px; height:75px;}
.xw_text{width:220px; height:auto; line-height:25px;}
.xw_text h3{ font-size:13px; overflow:hidden;}
.xw_text h3 a{color:#e52516;}
.xwzx ul{ padding-top:8px;}
.xwzx li{ height:25px; line-height:25px; overflow:hidden; background:url(../images/middot.png) 5px center no-repeat; text-indent:20px;}
.rq{ float:right; font-size:12px; color:#999; font-weight:normal;}
.lxwm p{ background:url(../images/lxbg.png) right bottom no-repeat; line-height:28px; padding-top:8px;}


.cpbox{ padding:25px 0; overflow:hidden;}
.cpbox li{ float:left; width:235px; margin:0 7px; display:inline;}
.cpbox li img{ width:225px; height:180px; border:5px solid #904d28;}
.cpbox li p{ text-align:center; line-height:25px; margin-top:5px; font-size:14px;}

.footer{ width:100%; height:auto; background:#331f07 url(../images/foot_bg.jpg) repeat-x;}
.footcon{ width:1000px; height:auto; margin:0 auto; overflow:hidden;}
.f_link{ height:65px; line-height:65px;}
.f_link a{ color:#fedc83; font-size:14px; margin:0 8px;}
.f_text{ padding:20px 0 30px 0; overflow:hidden;}
.f_nav{color:#fedc83;}
.f_nav a{ color:#fedc83; font-size:14px; margin:0 8px;}
.f_text p{ color:#dfdfdf; line-height:25px; font-size:14px; padding-top:20px;}



/*--------------- 内页样式 -----------*/
.main{ width:1000px; height:auto; margin:30px auto 0 auto;}
.mleft{ width:220px; height:auto; overflow:hidden;}
.mright{ width:760px; height:auto; overflow:hidden;}
.cpfl h2,.nylx h2{ background:url(../images/tit_bg.png) right bottom no-repeat; height:40px; line-height:40px; font-size:16px; color:#cd0000; text-indent:10px;}
.cpfl h2 span,.nylx h2 span{ font-size:14px; color:#722416; padding-left:5px;}
.cpfl li a{width:174px; margin:0 auto;height:34px;line-height:34px; padding-left:40px; display:block; font-size:14px;background:url(../images/page-menu-list.jpg) right top no-repeat;margin-top:10px;color:#EEDCC4;}
.cpfl li a:hover{background:url(../images/page-menu-list.jpg) left top no-repeat;color:#333;}
.lxbox{ padding:10px 5px; line-height:25px; overflow:hidden; font-size:13px; background:url(../images/lxbg.png) bottom right no-repeat;}

.rt{ background:#fff url(../images/about-line.png) top center repeat-x; padding-top:20px;}
.rb{background:url(../images/about-line.png) bottom center repeat-x; padding-bottom:10px;}
.mright h2{ background:url(../images/tit_bg.png) right bottom no-repeat; height:32px; line-height:32px; font-size:16px; text-indent:15px; color:#722416;}
.ny_nav{ font-size:12px; font-weight:normal; float:right; margin-right:15px;}
.ny_nav a{color:#722416;}
.jjbox{ padding:20px; line-height:25px; overflow:hidden;}
.jjbox h1{ font-size:16px; line-height:40px; text-align:center;}
.info{ display:block; line-height:30px; font-size:12px; text-align:center; border-bottom:1px solid #999; margin-bottom:10px;}


.pro_list,.new_list{ padding:20px; overflow:hidden;}
.pro_list li{ float:left; width:220px; margin:5px 10px; display:inline;}
.pro_list li img{ width:210px; height:168px; border:5px solid #904d28;}
.pro_list li p{ text-align:center; line-height:25px; margin-top:5px; font-size:14px;}

.new_list li{ clear:both; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #bc886b;}
.wzbt{ width:655px; float:right; line-height:25px;}
.wzbt h3{ font-size:14px;}
.wzbt p{ color:#999;}
.fgz{ background:url(../images/fgz.jpg) center center no-repeat; height:7px; margin:20px 0 10px 0;}

.pages{ padding:20px 0 10px 0; overflow:hidden; text-align:center;}
.pages a{ border:1px solid #ccc; padding:2px 10px; margin:0 3px; display:inline-block;}
.pages a:hover{border:1px solid #904d28; color:#904d28;}
.gys{border:1px solid #ccc; padding:2px 10px; display:inline-block;}
.red{border:1px solid #904d28; color:#904d28; padding:2px 10px; display:inline-block;}

八、更多干货🎁

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
在这里插入图片描述

IT黑马程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5期末大作业：美食网页主题网站设计与实现——HTML+CSS+JavaScript月饼美食食品企业网站html模板9页面

👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🧡 【作者主页——🔥获取更多优质源码】🧡 【
复制链接

扫一扫