web前端期末大作业：美食文化网页设计与实现——美食餐厅三级(HTML+CSS+JavaScript)

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

文章目录📂

一、网站题目👨‍🎓
二、网站描述✍️
三、网站介绍📚
四、网站效果🌐
五、代码实现 🪓
- HTML结构代码🧱
- CSS样式代码💒
八、更多干货🎁

一、网站题目👨‍🎓

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

二、网站描述✍️

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

三、网站介绍📚

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

📓网站程序方面：计划采用最新的网页编程语言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 href="css/style.css" rel="stylesheet" type="text/css" />
head>

<body>
<div class="top">
<div class="topcontent">
<div class="logo">
<img src="images/logo.png" />
div>
<div class="tel">
<img src="images/tel.png" />
<span>400-888-888span> 
div>
div>
div>
<div id="nav">
<ul>
<li><a href="index.html">网站首页a>li>
<li><a href="guanyu.html">关于品牌a>li>
<li><a href="tuijian.html">美食推荐a>li>
<li><a href="dongtai.html">最新动态a>li>
<li><a href="lianxi.html">联系我们a>li>
<li><a href="denglu.html">会员登录a>li>
<li><a href="zhuce.html">会员注册a>li>
<li><a href="liuyan.html">在线留言a>li>
ul>
div>
<div class="banner">
<div class="box" id="box">
    <div class="inner">
        
        <ul>
            <li><a href="#"><img  src="images/banner1.jpg" alt="">a>li>
            <li><a href="#"><img  src="images/banner2.jpg" alt="">a>li>
            <li><a href="#"><img src="images/banner3.jpg" alt="">a>li>
        ul>
 
        <ol class="bar">
 
        ol>
        
        <div id="arr">
                    <span id="left">
                        <
                    span>
            <span id="right">
                        >
                    span>
        div>
 
    div>
div>
div>
<script type="text/javascript" src="js/banner.js">script>
<div class="ibox1">
<div class="ibox1-left">
<a href="guanyu.html"><img src="images/img1.jpg"  style="height:150px; width: 420px;"/>a>
<video src="./images/ed2710af68fe2b6c09a75b155a89cb75.mp4" controls  width="420px" height="150px">audio>
div>
<div class="ibox1-right">
<h1>关于品牌h1>
<p>食尚美食餐饮管理有限公司的创始人从2004年起航第一家店，2007年以"鸭血粉丝、锅贴等"为特色经营的连锁品牌，2010年拥有8家直营店，2013年进行品牌升级，2015年第一家升级店开业；现总部位...p>
<div class="more"><a href="guanyu.html">了解更多a>div>
div>
div>
<div class="ibox2">
<div class="ibox2content">
<div class="title">
<h1>品牌优势h1>
<p>BRAND ADVANTAGEp>
div>
<div class="ibox2-ner">
<div class="bx">
<div class="xuh"><img src="images/1.png" />div>
<p>独特而神秘的资源独享p>
<p>专业团队精心历练之p>
<p>全新经营理念p>
<div class="ysimg">
<img src="images/img2.jpg" />
div>
div>
<div class="bx">
<div class="xuh"><img src="images/2.png" />div>
<p>实行区域保护政策p>
<p>以保障合作伙伴的p>
<p>业务发展空间p>
<div class="ysimg">
<img src="images/img3.jpg" />
div>
div>
<div class="bx">
<div class="xuh"><img src="images/3.png" />div>
<p>不定期推出新的产品p>
<p>和营销策划方案p>
<p>以供使用p>
<div class="ysimg">
<img src="images/img4.jpg" />
div>
div>
<div class="bx">
<div class="xuh"><img src="images/4.png" />div>
<p>完善的售后服务，p>
<p>不定期门店质检，p>
<p>规范经营管理p>
<div class="ysimg">
<img src="images/img5.jpg" />
div>
div>

div>
div>
div>
<div class="ibox3">
<div class="ibox3-left">
<div class="title2">
<h1>品牌简介h1>
<p>BRAND PROFILEp>
div>
<p>食尚美食餐饮连锁机构致力于湘菜系的研发整合与特色项目的经营推广。立足于自主品牌，公司采用连锁化经营，科学化管理，标准化生产，凭借独特的产品优势，优质规范的服务为消费者提供了更具传统民俗的特色美食。p>
<p>只要尝过的人，都是赞不绝口；这是我们的生活，更是南京人的生活；600多年来，我们传承这正宗的南京味道，坚持这一份匠心。p>
div>
<div class="ibox3-right">
<img src="images/img6.jpg" />
div>
div>
<div class="ibox2">
<div class="ibox2content">
<div class="title">
<h1>最新动态h1>
<p>NEWS INFORMATIONp>
div>
<div class="ibox4">
<div class="newbx">
<a href="dongtai01.html"><img src="images/img7.jpg" />a>
<div class="wenz">
<h1><a href="dongtai01.html">选择餐饮创业的四大理由a>h1>
<p>在就业形势越来越严峻的今天，创业成为了越来越多人的选择。这不，毕业季已经过去几个月了，想必很多刚踏入社会的大学生也会选择踏上创业的道路。不过，现在的创业模式多种多样，到底哪一个比较好呢?p>
div>
div>
<div class="newbx">
<a href="dongtai02.html"><img src="images/img8.jpg" />a>
<div class="wenz">
<h1><a href="dongtai02.html">新店长餐饮管理工作a>h1>
<p>店长、店经理是一家餐厅最综合的管理者，也是对本餐厅负责的最高指挥官。作为一名全面管理者来说，必须做好对餐厅各方面的严格控制。新上任或者新提任的您，在管理上是不是常常会有力从不心的感觉，想样样都抓好......p>
div>
div>
<div class="newbx">
<a href="dongtai03.html"><img src="images/img9.jpg" />a>
<div class="wenz">
<h1><a href="dongtai03.html">餐饮服务说话手册a>h1>
<p>在餐饮来讲，服务品质是大多数消费者很看重的一点。而服务员的服务舒适程度，很大一部分体现在说话的技巧上面。而说话的技巧应该怎么炼成呢?餐饮店的类型虽然有很多种，但是多对客人"甜言蜜语"却是在哪一种餐饮店都适用。p>
div>
div>
<div class="newbx">
<a href="dongtai04.html"><img src="images/img10.jpg" />a>
<div class="wenz">
<h1><a href="dongtai04.html">餐饮越来越不好？a>h1>
<p>很多创业者和餐饮老板都在诉苦：餐厅越来越难做了。如今的餐饮市场前景一片大好，不少品牌发展如火如荼，餐饮行业自身门槛就低，例如麻辣烫，加盟费趋于廉价，不需要有大厨的技艺，更不需要有丰富的管理经验......p>
div>
div>

div>
div>
div>
<div class="foot">
<p>Copyright©食尚美食网.ALL rights reservedp>
<p>地址：中国美食杰食尚美食店     邮箱地址：8888@qq.comp>
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

CSS样式代码💒

body {
	margin: 0 auto;
	font-size: 14px;
	font-family: "微软雅黑",arial;
	line-height: 22px;
}

div,p,input,ul,li,h1,h2,h3 {
	height: auto;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

li {
	list-style: none;
}

img {
	border: 0;
	margin: 0;
	padding: 0;
}

a {
	color: #333;
	text-decoration: none;
}

a:hover {
	color: #c60707;
	text-decoration: none;
	overflow: hidden;
}
.top{
	height:110px;
	}
.topcontent{
	width:1200px;
	margin:0 auto;
	padding-top:25px;
	}
.logo{
	width:309px;
	height:74px;
	float:left;
	}
.tel{
	width:300px;
	height:74px;
	float:right;
	line-height:74px;
	color:#c71b1b;
	font-size:28px;
	}
.tel span{
	float:left;
	}
.tel img{
	float:left;
	margin-right:10px;
	margin-top:20px;
	}
#nav{
	height:50px;
	line-height:50px;
	background:#111111;
	}


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

八、更多干货🎁

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

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

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

相关阅读:
服装连锁店铺管理软件大盘点！秦丝、日进斗金、商陆花谁更强？
笙默考试管理系统-MyExamTest----codemirror（34）
微软推出的Microsoft Fabric 到底是什么？
java项目-第162期ssm电影售票系统_ssm毕业设计_计算机毕业设计
 零零信安-D&D数据泄露报警日报【第30期】
【MySQL】-【约束】
PMP刷题小结
 C++异常
 大学生抗击疫情感动人物最美逆行者网页设计作业 html抗疫专题网页设计最美逆行者网页模板致敬疫情感动人物网页设计制作
 Vue 组件和插件：探索细节与差异
原文地址：https://blog.csdn.net/QQ_____365392777/article/details/126194744