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

📂文章目录

👨‍🎓网页题目
✍️网页描述
🌐网站效果
🪓 代码实现
- 🧱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 morea> 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">adiv>
            <span class="en">SINCE THE EDGEspan>div>
          <div class="clear">div>
          <div class="f1">1997-2006div>
          <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">adiv>
            <span class="en">SINCE THE EDGEspan>div>
          <div class="clear">div>
          <div class="f1">1997-2006div>
          <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">adiv>
            <span class="en">SINCE THE EDGEspan>div>
          <div class="clear">div>
          <div class="f1">1997-2006div>
          <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">adiv>
            <span class="en">SINCE THE EDGEspan>div>
          <div class="clear">div>
          <div class="f1">1997-2006div>
          <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">contactspan> <span class="f3">for mespan>div>
    <div class="tel"> online Service
      <div class="telNum">XXXdiv>
      <div class="box">div>
      <span style="text-transform:normal;">传真：XXXspan> <span style="text-transform: none;">邮箱：XXXspan>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:;">1a>li>
          <li><a href="javascript:;">2a>li>
          <li><a href="javascript:;">3a>li>
          <li><a href="javascript:;">4a>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 RESERVEDp>
     div>
div>
body>
html>




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262

🎁更多干货

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

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

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

相关阅读:
手把手教你CSP系列之script-src
顾客点餐系统(1)-------整体项目目标+用户数据表的操作
 通关GO语言14 内存分配：new 还是 make？什么情况下该用谁？
linux技巧：vim分屏显示文件
 nginx的所有知识点以及使用
 Python重试库 Tenacity 推荐
 JAVA毕业设计Internet快递柜管理系统计算机源码+lw文档+系统+调试部署+数据库
 【Release】Photoshop ICO file format plug-in 3.0
Java毕业设计基于SpringBoot vue 图片分享平台
 SpringBoot测试实践
原文地址：https://blog.csdn.net/p305114466/article/details/126655337

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