当前位置： 首页 > news >正文

HTML期末作业 计算机毕业设计 html css javascript食品餐饮行业网站(10页)

news 来源：原创 2024/5/12 7:35:48

📂文章目录

  • 👨‍🎓网页题目
  • ✍️网页描述
  • 🌐网站效果
  • 🪓 代码实现
    • 🧱HTML结构代码
  • 🎁更多干货

👨‍🎓网页题目

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

✍️网页描述

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

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

🌐网站效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

🪓 代码实现

🧱HTML结构代码


<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XXX_首页</title>
<link rel="stylesheet" type="text/css" href="css/slf.css"/>

<script type="text/javascript" src="js/banner.index.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/slf.js"></script>
<script src="js/swiper.jquery.js"></script>
</head>

<body>
<div class="gray">
  <div id="headr">
    <ul id="nav">
      <li><a href="index.html">关于我们</a></li>
      <li><a href="about.html">门店分布</a></li>
      <li><a href="news.html">品牌活动</a></li>
      <li><a href="#" class="logo"><img src="picture/logo.gif" width="120" height="75" alt=""/></a></li>
      <li><a href="products.html">网络商城</a></li>
      <li><a href="contact.html">产品中心</a></li>
      <li><a href="zhaopin.html">xx我们</a></li>
      <div class="clear"></div>
    </ul>
  </div>
</div>
<div class="banner">
  <div id="full-screen-slider">
    <ul id="slides">
      <li style="background:url(images/ban01.jpg) no-repeat center top"><a href=""></a></li>
      <li style="background:url(images/ban02.jpg) no-repeat center top"><a href=""></a></li>
      <li style="background:url(images/ban03.jpg) no-repeat center top"><a href=""></a></li>
      <div class="clear"></div>
    </ul>
  </div>
</div>
<div class="main about">
  <div class="about_con l">
    <h2>公司简介</h2>
    <p> 2006年6月，“XXX”品牌正式开始企业化运作，总部落户于湖北省武汉市。是一家专门从事鸭类、鹅类、鸭副产品及素食类休闲熟卤制品深加工的品牌企业，截止到2015年，XXX在职员工已超3000人，下属20多家子公司...</p>
    <a href="#" class="view">View more</a> </div>
  <div class="about_rig r">
    <div class="video"><img src="picture/video.gif" width="736" height="410" alt=""/></div>
  </div>
</div>
<div class="clear"></div>
<div class="main">
  <div class="inTit1" style="background:url(images/intit1.png) no-repeat center center"></div>
  <div class="kv">
    <ul class="kv_pic">
      <li><img src="picture/1.jpg" alt="" /></li>
      <li><img src="picture/2.jpg" alt="" /></li>
      <li><img src="picture/3.jpg" alt="" /></li>
      <li><img src="picture/2.jpg" alt="" /></li>
    </ul>
    <div class="kv_word">
      <ul>
        <li>
          <div class="tit">
            <h2>缘起</h2>
            <div class="bg">a</div>
            <span class="en">SINCE THE EDGE</span></div>
          <div class="clear"></div>
          <div class="f1">1997-2006</div>
          <div class="wordCon">
            <p> 1997年<hr>- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p>
            <p> 2004年<hr>-根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p>
            <p> 2006年<hr>-通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p>
            <p> 1997年<hr>- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p>
            <p> 2004年<hr>-根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p>
            <p> 2006年<hr>-通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p>
            <p> 1997年<hr>- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p>
            <p> 2004年<hr>-根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p>
            <p> 2006年<hr>-通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p>
          </div>
        </li>
        <li>
          <div class="tit">
            <h2>缘起</h2>
            <div class="bg">a</div>
            <span class="en">SINCE THE EDGE</span></div>
          <div class="clear"></div>
          <div class="f1">1997-2006</div>
          <div class="wordCon">
            <p> 1997年<hr>- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p>
            <p> 2004年<hr>-根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p>
            <p> 2006年<hr>-通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p>
            <p> 1997年<hr>- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p>
            <p> 2004年<hr>-根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p>
            <p> 2006年<hr>-通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p>
            <p> 1997年<hr>- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p>
            <p> 2004年<hr>-根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p>
            <p> 2006年<hr>-通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p>
          </div>
        </li>
        <li>
          <div class="tit">
            <h2>缘起</h2>
            <div class="bg">a</div>
            <span class="en">SINCE THE EDGE</span></div>
          <div class="clear"></div>
          <div class="f1">1997-2006</div>
          <div class="wordCon">
            <p> 1997年<hr>- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p>
            <p> 2004年<hr>-根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p>
            <p> 2006年<hr>-通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p>
            <p> 1997年<hr>- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p>
            <p> 2004年<hr>-根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p>
            <p> 2006年<hr>-通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p>
            <p> 1997年<hr>- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p>
            <p> 2004年<hr>-根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p>
            <p> 2006年<hr>-通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p>
          </div>
        </li>
        <li>
          <div class="tit">
            <h2>缘起</h2>
            <div class="bg">a</div>
            <span class="en">SINCE THE EDGE</span></div>
          <div class="clear"></div>
          <div class="f1">1997-2006</div>
          <div class="wordCon">
            <p> 1997年<hr>- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p>
            <p> 2004年<hr>-根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p>
            <p> 2006年<hr>-通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p>
            <p> 1997年<hr>- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p>
            <p> 2004年<hr>-根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p>
            <p> 2006年<hr>-通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p>
            <p> 1997年<hr>- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p>
            <p> 2004年<hr>-根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p>
            <p> 2006年<hr>-通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p>
          </div>
        </li>
      </ul>
    </div>
    <div class="control">
      <div class="prev"><img src="picture/icons_move_left.jpg" alt="" /></div>
      <div class="next"><img src="picture/icons_move_right.jpg" alt="" /></div>
    </div>
    <div class="kv_dot">
      <ul>
        <li class="action"></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</div>
<div class="gray2"></div>
<div class="main">
  <div class="inTit2" style="background-image: url(images/intit2.png);"></div>
  <ul class="HotNew">
    <dl>
      <dt><a href="#"><img src="picture/new1.jpg" width="340" height="250" alt=""/></a></dt>
      <dd>
        <h2>XXX在xx：向我们引以为豪的伙伴致敬。</h2>
        <p>我们努力工作，就是希望能与朋友们分享美味醇厚的咖啡。并努力让世界变得更美好一点。这就是1971我们开设第一家XXX咖啡店时的理念，如今我们依然秉承这样的理念。
          了解我们的故事</p>
        <a href="#">了解更多</a> </dd>
    </dl>
    <dl>
      <dt><a href="#"><img src="picture/new1.jpg" width="340" height="250" alt=""/></a></dt>
      <dd>
        <h2>XXX在xx：向我们引以为豪的伙伴致敬。</h2>
        <p>我们努力工作，就是希望能与朋友们分享美味醇厚的咖啡。并努力让世界变得更美好一点。这就是1971我们开设第一家XXX咖啡店时的理念，如今我们依然秉承这样的理念。
          了解我们的故事,家XXX咖啡店时的理念，如今我们依然秉承这样的理念。 </p>
        <a href="#">了解更多</a> </dd>
    </dl>
    <dl>
      <dt><a href="#"><img src="picture/new1.jpg" width="340" height="250" alt=""/></a></dt>
      <dd>
        <h2>XXX在xx：向我们引以为豪的伙伴致敬。</h2>
        <p>我们努力工作，就是希望能与朋友们分享美味醇厚的咖啡。并努力让世界变得更美好一点。这就是1971我们开设第一家XXX咖啡店时的理念，如今我们依然秉承这样的理念。
          了解我们的故事</p>
        <a href="#">了解更多</a> </dd>
    </dl>
    <div class="clear"></div>
  </ul>
</div>
<div  class="ishopCon">
  <div class="ishop">
    <div class="tit"></div>
    <div class="shopUl"><a target="_blank" href="#">天猫旗舰店</a><a target="_blank" href="#">锁鲜专卖店</a><a target="_blank" href="#">京东商城</a><a target="_blank" href="#">一号店商城</a><a target="_blank" href="#">拍拍商城</a></div>
  </div>
</div>
<div class="footer">
  <div class="main2">
    <div class="icontact"><span class="f2">contact</span> <span class="f3">for me</span></div>
    <div class="tel"> online Service
      <div class="telNum">XXX</div>
      <div class="box"></div>
      <span style="text-transform:normal;">传真：XXX</span> <span style="text-transform: none;">邮箱：XXX</span></div>
    <dl>
      <dt><a href="#">关于我们</a></dt>
      <dd><a href="#">企业简介</a></dd>
      <dd><a href="#">企业文化</a></dd>
      <dd><a href="#">企业历程</a></dd>
    </dl>
    <dl>
      <dt><a href="#">品牌活动</a></dt>
      <dd><a href="#">品牌活动推广</a></dd>
      <dd><a href="#">品牌资讯</a></dd>
    </dl>
    <dl>
      <dt><a href="#">关于我们</a></dt>
      <dd><a href="#">企业简介</a></dd>
      <dd><a href="#">企业文化</a></dd>
      <dd><a href="#">企业历程</a></dd>
    </dl>
    <dl>
      <dt><a href="#">品牌活动</a></dt>
      <dd><a href="#">品牌活动推广</a></dd>
      <dd><a href="#">品牌资讯</a></dd>
    </dl>
    
    <div class="bgEwm">
      <div class="topBg" style="background-image: url(images/topbg.png);"></div>
      
       
      
      <div id="box">
        <div class="prev"></div>
        <div class="next"></div>
        <ul class="bigUl">
          <li style="z-index:1"><a href="#"><img src="picture/ewm1.jpg" alt="图1" /></a></li>
          <li><a href="#"><img src="picture/ewm1.jpg" alt="图2" /></a></li>
          <li><a href="#"><img src="picture/ewm2.jpg" alt="图3" /></a></li>
          <li><a href="#"><img src="picture/ewm1.jpg" alt="图4" /></a></li>
        </ul>
        <ul class="numberUl">
          <li class="night"><a href="javascript:;">1</a></li>
          <li><a href="javascript:;">2</a></li>
          <li><a href="javascript:;">3</a></li>
          <li><a href="javascript:;">4</a></li>
        </ul>
        <div>
          <ul class="textUl">
            <li style="display:block;"><a href="#">XXX公众号</a></li>
            <li><a href="#">XXX手机二维码</a></li>
            <li><a href="#">XXX微商城</a></li>
            <li><a href="#">XXX微信号</a></li>
          </ul>
        </div>
      </div>
       
    </div>
  </div>
</div>
<div class="copyRight">
  <div class="copyRightCon">
    <p>COPYRIGHT © 2020  ALL RIGHTS RESERVED</p>
     </div>
</div>
</body>
</html>

🎁更多干货

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

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

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥

相关文章：

  • 搭建和mybatis-plus官网一样主题的网站（cos+宝塔+vercel）
  • 股权重组是指什么
  • 剑指offer(C++)-JZ11：旋转数组的最小数字(算法-搜索算法)
  • 废水除氟技术,高盐废水除氟有什么好的方法？
  • 中国合成绝缘外套行业现状动态与盈利前景预测报告2022-2028年
  • RPG Maker MV笔记-软件介绍
  • SystemdSysvinit
  • SCA Nacos 服务注册和配置中心（一）
  • 市场发展前景预测：预计2022年我国种子市场规模将达1395亿元
  • 一周深扒事务再也不怕面试官了问事务了全面解析
  • 程序员是如何思考的？
  • 51. new 操作符的实现原理？
  • ArcGIS模拟风场（流场）
  • 【Pytorch】torch. bmm()
  • 并发编程模型
  • (ckeditor+ckfinder用法)Jquery,js获取ckeditor值
  • 【React系列】如何构建React应用程序
  • 【干货分享】SpringCloud微服务架构分布式组件如何共享session对象
  • C++入门教程（10）：for 语句
  • docker-consul
  • ES10 特性的完整指南
  • iOS 颜色设置看我就够了
  • JavaScript 无符号位移运算符 三个大于号 的使用方法
  • Js基础知识（四） - js运行原理与机制
  • k8s 面向应用开发者的基础命令
  • Python连接Oracle
  • Python学习笔记 字符串拼接
  • Spring核心 Bean的高级装配
  • 读懂package.json -- 依赖管理
  • 近期前端发展计划
  • 可能是历史上最全的CC0版权可以免费商用的图片网站
  • 聊聊springcloud的EurekaClientAutoConfiguration
  • ionic入门之数据绑定显示-1
  • 哈罗单车融资几十亿元，蚂蚁金服与春华资本加持 ...
  • 容器镜像
  • 我们雇佣了一只大猴子...
  • ​LeetCode解法汇总2696. 删除子串后的字符串最小长度
  • #NOIP 2014# day.1 生活大爆炸版 石头剪刀布
  • #stm32驱动外设模块总结w5500模块
  • （06）金属布线——为半导体注入生命的连接
  • （1）(1.13) SiK无线电高级配置（六）
  • （ｃ语言）strcpy函数用法
  • （DFS + 剪枝）【洛谷P1731】 [NOI1999] 生日蛋糕
  • （二）JAVA使用POI操作excel
  • （二十四）Flask之flask-session组件
  • (转)创业的注意事项
  • (转)重识new
  • .equal()和==的区别 怎样判断字符串为空问题： Illegal invoke-super to void nio.file.AccessDeniedException
  • .NET/C# 项目如何优雅地设置条件编译符号？
  • .NET设计模式（11）：组合模式（Composite Pattern）
  • .NET项目中存在多个web.config文件时的加载顺序
  • .Net小白的大学四年，内含面经
  • .net最好用的JSON类Newtonsoft.Json获取多级数据SelectToken
  • /etc/X11/xorg.conf 文件被误改后进不了图形化界面
  • @font-face 用字体画图标