-
基于HTML美食餐饮文化项目的设计与实现 HTML学生网页设计作业 计算机毕业设计 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结构代码🧱
<html> doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>关于我们-健康食品餐饮美食类网站(带手机端)title> <link rel="stylesheet" type="text/css" href="style/common.css" /> <link rel="stylesheet" type="text/css" href="style/style.css" /> <link rel="stylesheet" type="text/css" href="style/subpage.css" /> <script type="text/javascript" src="js/js/jquery1.11.1.min.js">script> <script type="text/javascript" src="js/js/jquery.superslide.2.1.1.js">script> <script type="text/javascript" src="js/js/form.js">script> <script type="text/javascript" src="js/js/common.js">script> <style>style> head> <body> <div class="header theme_color"> <div class="main"> <div class="logo"><a href="index.htm" title="健康食品餐饮美食类网站(带手机端)"><img src="images/logo.png" alt="健康食品餐饮美食类网站(带手机端)" />a>div> <div class="tel"> 热线电话<span> 13988999988span>div> div> div> <div class="clear">div> <div class="g_nav"> <div class="g_nav01"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="ihome"><a class="now" href="index.htm" title="首页">首页<br /> <div>div> a>td> <td><a href="index-1.html" title="关于我们">关于我们<br /> <div >div> a> <div class="nav_tan"> <a href="index-2.htm">发展历史a> div> td> <td><a href="index-3.htm" title="产品中心">产品中心<br /> <div >div> a> <div class="nav_tan"> <a href="index-4.htm">川 菜a> <a href="index-5.htm">粤 菜a> <a href="index-6.htm">卤 菜a> <a href="index-7.htm">淮扬菜a> <a href="index-8.htm">闽 菜a> div> td> <td><a href="index-9.htm" title="新闻资讯">新闻资讯<br /> <div >div> a> <div style="display:none"> div> td> <td><a href="index-10.htm" title="成功案例">成功案例<br /> <div >div> a> <div class="nav_tan"> <a href="index-4.htm">川 菜a> <a href="index-11.htm">徽 菜a> <a href="index-12.htm">湘 菜a> <a href="index-13.htm">浙 菜a> div> td> <td><a href="index-14.htm" title="行业资讯">行业资讯<br /> <div >div> a> <div style="display:none"> div> td> <td><a href="index-15.htm" title="资质荣誉">资质荣誉<br /> <div >div> a> <div style="display:none"> div> td> <td><a href="index-16.htm" title="在线留言">在线留言<br /> <div >div> a> <div style="display:none"> div> td> <td><a href="index-17.htm" title="联系我们">联系我们<br /> <div >div> a> <div style="display:none"> div> td> div> tr> table> div> div> <div class="clear">div> <div id="slideBox" class="slideBox"> <div class="bd"> <ul> <li><a href_="" style=" background:url(images/1-1FP4152S30-L.jpg) no-repeat top center;">a>li> <li><a href_="" style=" background:url(images/1-1FP41524180-L.jpg) no-repeat top center;">a>li> <li><a href_="" style=" background:url(images/1-1FP41523420-L.jpg) no-repeat top center;">a>li> ul> div> <a class="prev" href="javascript:void(0)">a> <a class="next" href="javascript:void(0)">a> div> <script type="text/javascript"> $(function() { jQuery(".slideBox").slide({ mainCell: ".bd ul", autoPlay: true }); //banner }); script> <div class="clear">div> <div class="notice"> <div class="main"> <div class="noticefl"><b>网站公告b><span>欢迎光临本公司网站！span>div> <div class="search01"> <form name="formsearch" action="http://demx233.dede58.com/plus/search.php"> <input type="hidden" name="kwtype" value="0" /> <input name="q" type="text" class="seatxt" placeholder="搜索关键词" value='' /> <input name="submit" type="submit" class="seabtn" value="" /> form> div> <script> $(function() { $('.jslct dl dd').click(function() { $(this).closest('form').attr('action', $(this).attr('val')); }); }) script> div> div> <div class="clear">div> <div class="product sub_pro"> <div class="product01"> <div class="product07">关于我们div> <div class="sidenav"> <ul> <li> <a href="index-2.htm" title="发展历史" class="sidenava"> <p>发展历史p> a> li> ul> div> <div class="l_contact"> <div class="lcon_tel">13988999988div> <p class="lmap">广东省广州市番禺经济开发区58号p> <p class="ltel">13988999988p> <p class="lfix">020-66889888p> <p class="lemail">570000p> div> div> <div class="product02"> <div class="content_com_title"> <h2>关于我们h2> <div class="bread"> 当前位置：<a href="index.htm">主页a> > <a href="index-1.html">关于我们a> div> div> <div class="content"> <div class="view"> <h1 class="view-title">关于我们h1> <div class="bshare-custom view-share"><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis">a><a title="分享到QQ空间" class="bshare-qzone">a><a title="分享到新浪微博" class="bshare-sinaminiblog">a><a title="分享到人人网" class="bshare-renren">a><a title="分享到腾讯微博" class="bshare-qqmb">a><a title="分享到网易微博" class="bshare-neteasemb">a>div> <script type="text/javascript" charset="utf-8" src="buttonlite.js">script> <script type="text/javascript" charset="utf-8" src="bsharec0.js">script> 对于美食，我们有着坚定的信念——我们普及健康食材，引导品质生活 方式：食物的美妙味感固然值得玩味，但只有吃的健康，才算吃的美好。帮助人们吃的安全、健康、美好，是美天的社会责 任；我们传承美食文化，传递美食正能量：美食是一种文化，需要传承，渴望创新。向经典致敬，向大师取经；让传统新 生，为创意开道，是美天的传播使命；我们凝聚达人力量，成就美食梦想：每一个达人都有美食梦想，每一个有梦想的人都 可能成为明星。为爱美食的人圆梦，是美天的前行动力；我们搭建互动平台，创造美食社交新生活：选择美食，就是选择用 开放分享的态度拥抱生活。成为美食家们的分享沙龙，创造美食社交新生活，是美天的价值和骄傲。而所有这一切，都是为 了——“让吃更美好！” <p> 美天以用户为荣，我们相信热爱美食的每个人都有值得分享的东西，任 何一种美食技能都可以被学习；每一个创意都是创造者的骄傲，每一个有创意的人都可能成为明星。美天拥有数千万条菜谱 收藏记录，上千万条来自大众的菜谱点评，仅单品菜谱都可以超过1171万浏览量和超过1万的评论 参与。超过400万美食家，与你共襄美食盛举！p> <p> 自2004年成立以来，美食天下一直专注于家庭烹饪与饮食健康，并将为大众提 供更优质的内容与服务!p> div> <div class="page"> <a href="index.htm" title="返回首页" class="back theme_color">返回首页a> div> div> div> <div class="clear">div> div> <div class="clear">div> <div class="main"> <div class="footl"> <div class="footcode_t"> <font>Scan into the<br> mobile version font><span>扫一扫进入手机版span>div> <div class="codeimg"><img src="images/erweima.png" width="138" height="138" />div> div> <div class="footshare"> <div class="footcode_t"> <font>Share font><span>分享到：span>div> <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more">a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博">a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">a><a href="#" class="bds_tqf" data-cmd="tqf" title="分享到腾讯朋友">a> <a href="#" class="bds_kaixin001" data-cmd="kaixin001" title="分享到开心网">a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网">a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网">a><a href="#" class="bds_isohu" data-cmd="isohu" title="分享到我的搜狐">a>div> <script> window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "32" }, "share": {} }; with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)]; script> div> div> div> div> <div class="side_nav"> <ul> <li class="sub_QR side_nav_3"> <a href="javascript:;"> <span style="display: none;"><img src="images/erweima.png" width="138" height="138" />span> a> li> <li class="back_top"> <a href="#" style="width: 60px; left: 0px;"> <span>返回顶部span> a> li> ul> <div class="c">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
CSS样式代码💒
.slideBox { width: 100%; height: 400px; overflow: hidden; position: relative; } .slideBox .hd { height: 15px; overflow: hidden; position: absolute; right: 5px; bottom: 5px; z-index: 1; } .slideBox .hd ul { overflow: hidden; zoom: 1; float: left; } .slideBox .hd ul li { float: left; margin-right: 2px; width: 15px; height: 15px; line-height: 14px; text-align: center; background: #fff; cursor: pointer; } .slideBox .hd ul li.on { background: #f00; color: #fff; } .slideBox .bd { position: relative; height: 100%; z-index: 0; } .slideBox .bd li { zoom: 1; vertical-align: middle; } .slideBox .bd li a { display: block; height: 400px; } .slideBox .bd img { width: 450px; height: 400px; display: block; }- 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
八、更多干货🎁
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，
请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！2.
💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
-
相关阅读:
Mysql数据库指定某数据库或某表赋予增删改查操作权限各类划分权限的方法总结实战
如何重置 docker中的mariadb的root
二进制编码及浮点数表示
诚意满满，阿里后端开发6年大咖离职带出内网专属“高并发系统设计”学习笔记，跳槽大厂敲门金砖
JavaScript 22 JavaScript 数字
抵押品管理服务市场现状及未来发展趋势分析
Lambda表达式
如何使用IP归属地查询API来追踪网络活动
权限管理系统-0.4.0
MySQL DTAETIME、TIMESTAMP、DATE、TIME、YEAR（日期和时间类型）
- 原文地址：https://blog.csdn.net/bigwhiteshark/article/details/126066488