-
用DIV+CSS技术设计的美食主题网站（web前端网页制作课作业）美食餐饮网站设计与实现(HTML+CSS+JavaScript)
👨🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。
🎀 精彩专栏推荐👇🏻👇🏻👇🏻
🧡 【作者主页——🔥获取更多优质源码】
🧡 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
一、网站题目👨🎓
🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。
二、网站描述✍️
🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。
三、网站介绍📚
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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 lang="zh-cn"> <head> <meta charset="UTF-8"> <title>模板title> <meta name="keyword" content=""> <meta name="description" content=""> <meta name="author" content=""> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.min.1.11.3.js">script> <script src="js/SuperSlide.2.1.1.js">script> <script src="js/js.js">script> <link type="text/css" rel="stylesheet" href="css/skitter.styles.css"> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> <script type="text/javascript" src="js/jquery-1.6.4.js">script> <script type="text/javascript" src="js/jquery.easing.1.3.js">script> <script type="text/javascript" src="js/jquery.skitter.min.js">script> <script type="text/javascript" src="js/jquery.haiwon.js">script> <script type="text/javascript" src="js/css.js">script> <script type="text/javascript" src="js/js.js">script> head> <body> <header class="index_header"> <div class="style"> <ul class="index_logo"> <li><a href="about.html">关于我们a>li> <li><a href="fendian.html">门店分布a>li> <li><a href="injon.html">招商加盟a>li> <div><a href=""><img src="images/index_03.png" alt="" title="首页">a>div> <li><a href="">在线商城a>li> <li><a href="zp.html">人才招聘a>li> <li><a href="contact.html">联系我们a>li> ul> div> header> <nav class="index_nav"> <div style="width:100%; overflow:hidden; height:633px; position:relative; z-index:0; "> <div style=" width:1920px; height:633px; position:relative; left:50%; "> <div style="position:relative;width:1920px;height:633px; z-index:1; left:-50%;"> <div class="banner box_skitter skitter-default" style="height:633px"> <ul style="display: none;"> <li><a target="_blank" href=""><img src="images/banner02.jpg">a>li> <li><a target="_blank" href=""><img src="images/banner02.jpg">a>li> <li><a target="_blank" href=""><img src="images/banner02.jpg">a>li> <li><a target="_blank" href=""><img src="images/banner02.jpg">a>li> ul> <span class="info_slide_dots" style="left: 926px;"> <span class="image_number" rel="0" id="image_n_1_0">span> <span class="image_number" rel="1" id="image_n_2_0">span> <span class="image_number" rel="2" id="image_n_3_0">span> <span class="image_number image_number_select" rel="3" id="image_n_4_0">span> span> div> div> div> div> nav> <style type="text/css"> .poster-main{ position: absolute; top:220px; margin-left: 100px; } .poster-main .poster-list .poster-item{ border-radius: 50%; overflow: hidden; position: absolute; left: 0; top: 0; } .poster-main .poster-list .poster-item a img{ border-radius: 50%; border:8px solid #fff; } .poster-main .poster-btn{ position: absolute; top: 0; cursor: pointer; } .poster-main .poster-prev-btn{ left: -220px; background: url("images/btn_l.png") no-repeat center center; } .poster-main .poster-next-btn{ right: -220px; background: url("images/btn_r.png") no-repeat center center; } style> <div class="index_style1"> <div class="style" style="position:relative"> <div class="poster-main" id="carousel" data-setting='{ "width":1000, "height":300, "posterWidth":300, "posterHeight":300, "scale":0.8, "speed":1000, "autoPlay":true, "delay":3000, "verticalAlign":"middle" }'> <div class="poster-btn poster-prev-btn">div> <ul class="poster-list"> <li class="poster-item"><a href="#"><img src="images/01.jpeg" alt="" width="100%" />a>li> <li class="poster-item"><a href="#"><img src="images/01.jpeg" alt="" width="100%" />a>li> <li class="poster-item"><a href="#"><img src="images/01.jpeg" alt="" width="100%" />a>li> <li class="poster-item"><a href="#"><img src="images/01.jpeg" alt="" width="100%" />a>li> <li class="poster-item"><a href="#"><img src="images/01.jpeg" alt="" width="100%" />a>li> ul> <div class="poster-btn poster-next-btn">div> div> <div class="instyle1_s"><a href="">在线购买a>div> div> <script src="js/Carousel.js">script> <script type="text/javascript"> $(function(){ Carousel.init($("#carousel")); $("#carousel").init(); }); script> div> <div class="index_style2"> <div class="style" style="position:relative"> <a href="" class="index_s2_a1"><img src="images/index1_07.png" alt="">a> <div class="index_s2_c"> 公司的组织形式。以营利为目的的社团法人。在资本主义社会获得高度发展。我国在建国后对私营公司进行了社会主义改造。国营工、商、建筑、运输等部门中实行独立经济核算的经营管理组织和某些城市中按行业划分的专业管理机构，也通称公司。近年来随着我国经济体制的改革，享有法人资格的各种公司纷纷设立，按章程从事自身的生产经营活动。 实行独立经济核算的经营管理组织和某些城市中按行业划分的专业管理机构，按章程从事自身的生产经营活动。 <a href="" class="index_s2_ca">查看更多>>a> div> div> div> <div class="index_style3"> <div class="style" style="position:relative"> <div class="index_style3_t"><img src="images/index1_11.png" alt="">div> <ul class="index_s3_c"> <li> <dl class="ins3_dl"> <dt><a href="injon_show.html"><img src="images/index1_15.png" alt="">a>dt> <dd class="ins3_dl_dd1">卤鱼有约dd> <dd class="ins3_dl_dd2">上市公司大手笔现金理财 漫步者理财金额超全年营收资产荒，资产慌，慌的不只是投资者，很多上市公司手头空有闲钱，却也没有特别好的投向。dd> <dd class="ins3_dl_dd3"><a href="">查看更多>>a>dd> dl> li> <li> <dl class="ins3_dl"> <dt><a href="injon_show.html"><img src="images/index1_17.png" alt="">a>dt> <dd class="ins3_dl_dd1">卤鱼有约dd> <dd class="ins3_dl_dd2">上市公司大手笔现金理财 漫步者理财金额超全年营收资产荒，资产慌，慌的不只是投资者，很多上市公司手头空有闲钱，却也没有特别好的投向。dd> <dd class="ins3_dl_dd3"><a href="">查看更多>>a>dd> dl> li> <li> <dl class="ins3_dl"> <dt><a href="injon_show.html"><img src="images/index1_20.png" alt="">a>dt> <dd class="ins3_dl_dd1">卤鱼有约dd> <dd class="ins3_dl_dd2">上市公司大手笔现金理财 漫步者理财金额超全年营收资产荒，资产慌，慌的不只是投资者，很多上市公司手头空有闲钱，却也没有特别好的投向。dd> <dd class="ins3_dl_dd3"><a href="">查看更多>>a>dd> dl> li> ul> div> div> <div class="index_style4"> <div class="style" style="position:relative"> <dl class="ins_dl1"> <dt><a href="fendian.html"><img src="images/index1_26.png" alt="">a>dt> <dd><a href="">湖北一店a>dd> dl> <dl class="ins_dl1"> <dt><a href="fendian.html"><img src="images/index1_26.png" alt="">a>dt> <dd><a href="">湖北二店a>dd> dl> <dl class="ins_dl1"> <dt><a href="fendian.html"><img src="images/index1_26.png" alt="">a>dt> <dd><a href="">湖北三店a>dd> dl> <dl class="ins_dl1"> <dt><a href="fendian.html"><img src="images/index1_26.png" alt="">a>dt> <dd><a href="">湖北三店a>dd> dl> div> div> <div class="index_style5"> <div class="style"> <dl class="inst5_left"> <dt><a href="">联系我们a>dt> <dd> 公司名称：XXXXXXXXXXXXX<br/> 联 系 人：XXXXXX<br/> 联系电话：XXXXX<br/> 联系 Q Q：XXXXX<br/> 公司网址：XXXXX<br/> 公司电话：XXXXX<br/> 公司邮箱：XXXXX<br/> 公司地址：XXXXXXXXXXXXXXXXXXXXX dd> dl> <div class="inst5_right"> <form action="" onsubmit="return check()"> <ul class="inst5_right_ul"> <li><span>姓名：span><input type="text" id="in_username" name="name">li> <li><span>电话：span><input type="text" id="in_tel">li> <li><span>邮箱：span><input type="text" id="in_email">li> <li style="height:100px"><span>留言：span><textarea name="" id="in_message"> textarea>li> ul> <div class="inst5_right_d"><input type="submit">div> form> div> div> div> <footer class="index_footer"> <div class="style index_fc"> <div class="index_fc1"> 友情链接 div> <div class="index_fc2"> <ul> <li><a href="">新华网湖北频道a>li> <li>|li> <li><a href="">长江网a>li> <li>|li> <li><a href="">福州房产网a>li> <li>|li> <li><a href="">武汉家装a>li> <li>|li> <li><a href="">房地产英才网a>li> <li>|li> <li><a href="">南昌圈圈网a>li> <li>|li> <li><a href="">长江网a>li> <li>|li> <li><a href="">福州房产网a>li> <li>|li> <li><a href="">武汉家装a>li> <li>|li> <li><a href="">福州房产网a>li> <li>|li> <li><a href="">武汉家装a>li> <li>|li> <li><a href="">房地产英才网a>li> <li>|li> <li><a href="">房地产英才网a>li> <div class="clear">div> ul> <div>XXXXXXXXXXXXX @copy;版权所有div> div> <div class="index_fc3"> <img src="images/index1_30.png" alt=""> <span>扫一扫关注span> div> div> footer> body> html> <script> function check() { var name = $("#in_username").val(); var tel = $("#in_tel").val(); var email = $("#in_email").val(); var message = $("#in_message").text(); if(name == "") { alert("姓名不能为空"); return false; } if(tel == "") { alert("电话不能为空"); return false; } if(email == "") { alert("Email值不能为空"); return false; } if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { alert("邮箱格式不正确,必须包含@和."); return false; } if(message == "") { alert("留言不能为空"); return false; } } script>- 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
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
CSS样式代码💒
@charset "utf-8"; .style{ width: 1200px; margin:0 auto; } /*index*/ .index_header{ height: 100px; background: #171717; } .index_logo{ height: 100px; } .index_logo li{ float: left; height: 100px; line-height: 100px; margin-left: 44px; } .index_logo div{ float: left; height: 100px; line-height: 100px; margin-left: 40px; } .index_logo li a{ color: #fff; padding: 10px 15px; font-size: 18px; border-radius: 8px; } .index_logo .inh_on{ background: #CC272E; } .index_style1{ width: 100%; height: 743px; background: url(../images/index_07.png) no-repeat center center; position: relative; } .index_style1 .instyle1_s{ position: absolute; text-align: center; top: 625px; left: 552px; }- 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
八、更多干货🎁
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，
请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！2.
💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
-
相关阅读:
文心一言 vs gpt-4 全面横向比较
设计模式- 建造者模式（Builder Pattern）结构|原理|优缺点|场景|示例
【Linux】Linux 之用户管理
基于 SpringBoot + MyBatis 的在线五子棋对战
学习笔记【1】：决策树
Nginx实战：故障处理_后端服务正常,nginx偶发502(Bad Gateway)
taobao.trade.get( 获取单笔交易的部分信息），淘宝oAuth2.0接口,淘宝店铺订单接口，淘宝R2接口代码对接分享
442-C++基础语法（111-120）
MySQL表的增查（进阶）
haproxy实验
- 原文地址：https://blog.csdn.net/m0_73081085/article/details/128011366