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>
<html>

<head>
    <meta charset="utf-8">
    <title>首页title>
    <link href="css/base.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/idangerous.swiper.css">
head>

<body>
    <div id="header">
        <div class="header-con">
            <a class="logo"><img src="img/logo.png" alt="logo">a>
            <div class="nav">
                <a href="javascript:void(0);">私宴介绍a><a href="javascript:void(0);">解决方案a><a href="javascript:void(0);">服务项目a><a href="javascript:void(0);">关于我们a>
                <b>私人宴请b>
                <i>咨询热线：023-62791234i>
            div>
        div>
    div>
    <div class="clear">div>
    <div id="banner">
        <div class="banner">
            <div class="banner-bg">
                <div class="banner-con">
                    <h1>如需私宴定制请联系h1>
                    <div class="line">div>
                    <ul>
                        <li>
                            <a href="tel:023-62799534">
                                <div class="banner-img tel">div>
                            a>
                            <p>电话：023-62799534p>
                        li>
                        <li class="m-l-r-36">
                            <div class="banner-img erwei">div>
                            <p>微信扫一扫咨询p>
                        li>
                        <li>
                            <a href="mailto:jubao@vip.sina.com">
                                <div class="banner-img email">div>
                            a>
                            <p>点击发送邮件p>
                        li>
                    ul>
                div>
            div>
        div>
    div>
    <div id="two">
        <div class="two-con">
            <h1>私宴介绍h1>
            <div class="line">div>
            <ul class="about">
                <li>
                    <div class="about-img imgone">div>
                    <span class="bgo">历史久远  贵族尊享span>
                    <p>现在很多人想跳出普通的饭局，来一次超然的吃喝体验，烹制独属自己的美食。其实，美食定制历史久远。太史蛇羹、历家菜、谭家菜、陆文夫在《美食家》中提到的苏州堂子菜，都是世家贵族玩得最高级的私人定制，出现在历史的长河里。p>
                li>
                <li class="m-l-r-80">
                    <div class="about-img imgtwo">div>
                    <span class="bgo">量身打造  私人定制span>
                    <p>这是一个崇尚个性的“私”时代，人人都想脱颖而出。每个人都想让自己的生活独一无二。不在意有多奢华，但必须恰当、舒心，我们无法做到真正物质上的私人定制，选择“私人定制”，只是一种新的生活方式。p>
                li>
                <li>
                    <div class="about-img imgthree">div>
                    <span class="bgo">简单有内涵  永远的私人领域span>
                    <p>选择一种新的生活方式，是对自己最大的放松，现在，人们不再希望与他人攀比，而是希望与别人不同，不同的体现不仅是私密还是特殊和唯一看似简单的用餐，要吃得最有品位、最有文化、最有内涵及最具传统，永远是私人领域。p>
 
                <div class="tab-con tab-con6">
                    <div class="swiper-container swiper-container6">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="cs-con">
                                    <img src="img/hd/hd_1.jpg" width="250">
                                    <div class="cs-z">
                                        <h2>自娱活动h2>
                                        <h3>宴请亲朋好友h3>
                                        <p>生日约上朋友小聚，结婚接受亲朋好友的祝福，我们让您的宴会更加丰富多彩刻骨铭心。p>
                                    div>
                                div>
                            div>
                            <div class="swiper-slide">
                                <div class="cs-con">
                                    <img src="img/hd/hd_2.jpg" width="250">
                                    <div class="cs-z">
                                        <h2>第三方活动h2>
                                        <h3>宴请商业伙伴回馈客户h3>
                                        <p>一个宴请有可能改变很多东西，安排客户一同享用一次愉快的用餐对建立起长久的人际关系有很大的帮助。p>
                                    div>
                                div>
                            div>
                            <div class="swiper-slide">
                                <div class="cs-con">
                                    <img src="img/hd/hd_3.jpg" width="250">
                                    <div class="cs-z">
                                        <h2>定制活动h2>
                                        <h3>专属于您的私人宴请h3>
                                        <p>专业的定制服务团队为您量身打造专属于您的私人宴会，让你远离那些纷杂的餐厅，专心享受只属于你的欢乐时光，岂不是人生最大乐事？p>
                                    div>
                                div>
                            div>
                        div>
                    div>
                    <a class="arrow-left" href="javascript:void(0);"><a>
                    <a class="arrow-right" href="javascript:void(0);">>a>
                div>
            div>
        div>
    div>
    <div id="five">
        <div class="five-con">
            <div class="about-con">
                <img src="img/about.jpg" width="618">
                <div class="about-z">
                    <h1>关于我们h1>
                    <div class="line">div>
                    <p>我们为您提供私宴定制服务。我们专注于高品质的食材以及精湛的烹饪技艺顶级大厨将为您量身定制各类国际化的高端专属私宴，为您各种规模的商务宴请、客户回馈、私人特别纪念派对等提供精致以及美味的食物。<br><br>我们将以在私宴定制方面丰富的经验以及完善的服务，在所有的细节处为您和您的贵宾创造与传统晚宴迥然不同的高尚风格、优雅品位、独特享受。
                    p>
                div>
            div>
        div>
    div>
    <div id="six">
        <div class="six-con">
            <h1>如需私宴定制请联系h1>
            <div class="line">div>
            <ul>
                <li>
                    <a href="tel:023-62799534">
                        <div class="banner-img tel">div>
                    a>
                    <p>电话：023-62799534p>
                li>
                <li class="m-l-r-36">
                    <div class="banner-img erwei">div>
                    <p>微信扫一扫咨询p>
                li>
                <li>
                    <a href="mailto:jubao@vip.sina.com">
                        <div class="banner-img email">div>
                    a>
                    <p>点击发送邮件p>
                li>
            ul>
        div>
    div>
    <div id="footer">私人宴请定制 版权所有 201603041008div>
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

CSS样式代码💒


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

a {
    text-decoration: none;
    cursor: pointer;
    color: #555;
}

* {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

* html {
    background-image: url(about:blank);
    background-attachment: fixed;
}

body {
    font-family: "Microsoft YaHei", "Lucida Sans Unicode", "Myriad Pro", "Hiragino Sans GB", "Heiti SC", Verdana, simsun;
    background: #fff;
    color: #555;
    font-size: 14px;
    overflow-x: hidden;
}

.line {
    width: 58px;
    height: 2px;
    background: #444;
    margin: 0 auto;
}

.m-l-r-36 {
    margin: 0 36px 0;
}

.m-l-r-80 {
    margin: 0 80px 0;
}

#header {
    width: 100%;
    height: 74px;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #fff;
    border-bottom: 1px solid #ccc;
    z-index: 99999
}

.header-con {
    width: 1220px;
    height: 75px;
    margin: 0 auto;
    padding-top: 10px;
}

.logo {
    width: 23px;
    height: 26px;
    display: block;
    margin: 0 auto;
}

.nav {
    width: 100%;
    font-size: 14px;
    position: relative;
    height: 35px;
    line-height: 40px;
}

.nav a {
    padding: 0 15px;
}

.nav b {
    width: 100%;
    font-size: 22px;
    font-weight: 100;
    position: absolute;
    bottom: 0px;
    display: block;
    text-align: center;
    z-index: -1;
}

.nav i {
    float: right;
    font-style: normal;
}

#banner {
    width: 100%;
    height: 600px;
    background: url(../img/banner1.jpg) no-repeat center center;
    margin: 0 auto;
    margin-top: 74px;
}


}


    text-align: left;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #333;
}

.about-z .line {
    width: 58px;
    height: 2px;
    background: #444;
    display: inline-block;
    text-align: left;
}

.about-z p {
    margin-top: 20px;
    line-height: 30px;
    font-size: 15px;
}

#six {
    width: 100%;
    height: 350px;
}

.six-con {
    width: 1220px;
    margin: 0 auto;
    height: 350px;
}

.six-con h1 {
    text-align: center;
    font-size: 24px;
    margin-top: 50px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #333;
}

.six-con ul {
    width: 522px;
    height: 150px;
    margin: 0 auto;
    margin-top: 25px;
}

.six-con ul li {
    width: 148px;
    height: 195px;
    float: left;
}

.six-con ul li .banner-img {
    width: 148px;
    height: 148px;
    border: 1px solid #bbb;
    border-radius: 2px;
}

.six-con ul li p {
    line-height: 35px;
    text-align: center;
}

.six-con ul li .banner-img.tel {
    background: url(../img/tel.png) no-repeat 0px 0px;
}

.six-con ul li .banner-img.erwei {
    background: url(../img/erwei.png) no-repeat 0px 0px;
}

.six-con ul li .banner-img.email {
    background: url(../img/mail.png) no-repeat 0px 0px;
}

#footer {
    width: 100%;
    text-align: center;
    border-top: 1px solid #ddd;
    line-height: 45px;
    height: 45px;
}

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

八、更多干货🎁

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

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

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

相关阅读:
ROS SMACH个人学习记录
 抖音API接口大全
 你所不知道的实用类
 手机软件开发价格的大概范围是什么?
createNodeIterator使用+元素替换
 Python 编程基础 | 第五章-类 | 5.8、运算符重载
 [MDM9607]高通9607 QCMAP设置LAN IP之后无法获取到IP地址问题分析及解决方案
 CMakelists.txt 编写语法说明
 基于SSH的酒店管理系统
 FineReport 基础报表样式
原文地址：https://blog.csdn.net/m0_73081085/article/details/127781396