👨🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。
🎀 精彩专栏推荐👇🏻👇🏻👇🏻
🧡 【作者主页——🔥获取更多优质源码】
🧡 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
文章目录📂
一、网站题目👨🎓二、网站描述✍️三、网站介绍📚四、网站效果🌐五、代码实现 🪓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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link rel="stylesheet" type="text/css" href="style/css.css"><script src="js/jquery-1.8.3.min.js"></script><!--Luara js文件--><script src="js/jquery.luara.0.0.1.min.js"></script></head><body><div class="top"><div class="topcon clear"><div class="tl left clear">您好，欢迎来到圣军食品有限公司!</div><div class="tr right clear">400-6666666</div></div></div><!-- top end --><div class="nav"><div class="navcon clear"><div class="logo left clear"><img src="images/logo.png" alt="圣军食品有限公司" /></div><div class="menu right clear"><ul><li class="cur"><a href="index.html">首页</a></li><li><a href="about.html">关于我们</a></li><li><a href="cpzs.html">产品展示</a></li><li><a href="news.html">新闻资讯</a></li><li><a href="zsjm.html">招商加盟</a></li><li><a href="rczp.html">人才招聘</a></li><li><a href="lxwm.html">联系我们</a></li></ul></div></div></div><!--nav end --><div class="banner"><!--Luara图片切换骨架begin--><div class="example2"><ul><li><img src="images/banner.jpg" alt="1"/></li><li><img src="images/banner.jpg" alt="2"/></li><li><img src="images/banner.jpg" alt="3"/></li><li><img src="images/banner.jpg" alt="4"/></li></ul><div class="dh"><ol class="clear"><li></li><li></li><li></li><li></li></ol></div></div><!--Luara图片切换骨架end--><script>$(function(){<!--调用Luara示例-->$(".example2").luara({width:"1920",height:"565",interval:4500,selected:"seleted",deriction:"left"});});</script></div><!-- banner end --><div class="content"><div class="conbox mt30 clear"><div class="bktit clear"><div class="qyxc_tit left clear"><img src="images/qyxc_tit.png" alt="企业宣传" /></div><div class="xwzx_tit left clear"><img src="images/zxzx_tit.png" alt="最新资讯" /></div><div class="lxwm_tit right clear"><img src="images/lxwm_tit.png" alt="联系我们" /></div></div><div class="bkbox clear"><div class="qyxc left clear"><div class="example"><ul><li><img src="images/xc_img.jpg" alt="1"/></li><li><img src="images/xc_img.jpg" alt="2"/></li><li><img src="images/xc_img.jpg" alt="3"/></li><li><img src="images/xc_img.jpg" alt="4"/></li></ul><div class="tpdh"><ol class="clear"><li>4</li><li>3</li><li>2</li><li>1</li></ol></div></div><!--Luara图片切换骨架end--><script>$(function(){<!--调用Luara示例-->$(".example").luara({width:"325",height:"230",interval:4000,selected:"seleted"});});</script></div><div class="xwzx left clear"><div class="xw_top clear"><div class="xw_img left clear"><img src="images/zx_img.jpg" alt=""></div><div class="xw_text right clear"><h3><a href="#">改走親民路線鮑魚禮盒隻賣200元</a></h3><p>“咋個那麼快就要過中秋了哦？冰箱頭還剩幾個粽子沒吃種禮盒裡...</p></div></div><!-- xw_top end --><ul><li><span class="rq">[-09-06]</span><a href="subnew.html">四川月饼知名品牌－出十大金天伦月...</a></li><li><span class="rq">[-09-06]</span><a href="subnew.html">四川月饼知名品牌－出十大金天伦月...</a></li><li><span class="rq">[-09-06]</span><a href="subnew.html">四川月饼知名品牌－出十大金天伦月...</a></li><li><span class="rq">[-09-06]</span><a href="subnew.html">四川月饼知名品牌－出十大金天伦月...</a></li><li><span class="rq">[-09-06]</span><a href="subnew.html">四川月饼知名品牌－出十大金天伦月...</a></li><li><span class="rq">[-09-06]</span><a href="subnew.html">四川月饼知名品牌－出十大金天伦月...</a></li></ul></div><div class="lxwm right clear"> <img src="images/lx_img.jpg" alt="联系我们" /><p>地址：洛阳市洛龙区开元大道219号宝龙城市...<br />联系人：朱海华<br />电话：0371-7691000<br />手机：15617811151<br />邮箱：384397414@</p></div></div></div><!-- conbox end --><div class="gywm mt20"><h2><span class="more"><a href="about.html">更多 >></a></span><img src="images/gywm_tit.png" alt="关于我们" /></h2><div class="wmbox clear"><div class="wm_img left clear"><img src="images/gywm.jpg" alt="关于我们" /></div><div class="wm_text right clear"><p>商丘张弓老朱家食品有限公司创建于1992年，是一家专业生产月饼、蜜三刀、密角、绿豆糕、糕点、等食品的品牌企业。公司拥有精干、专业、创新的员工团队，用自信、高效、诚信、创新的经营理念为客户提供全面的优质服务！</p><p>老朱家人凭着艰苦创业，不屈不挠的精神，经过不断的努力和发展，公司拥有标准化厂房、规模宏大的办公大楼以及配备齐全的送货车队。月饼生产流水线及全自动生产设备。以优良的产品品质和务实进去的经营作风，在客户和同行界得到广泛认同和好评。原商丘市人大副主任朱永勤曾亲临本厂品尝后给予高度赞扬，并亲自题词：送孝心，献爱心，老朱家月饼最称心。原全国人大代表张弓酒厂董事长，县人大主任吕信贻品尝后也给予高度赞扬。原张弓酒厂供应部部长，现任张弓北村支部书记张强亲临本厂视察题词：香甜松酥，溢满中原！老朱家深知“变革与创新是始终紧系自身发展的”，所以，一直致力于企业的改良和创新工作，小到每一种原料选购，大到企业品牌战略的实施，凭借企业自身的综合实力，不断进行新的探索和挑...<a href="#"><span style="color:#e52516;">【查看详情】</span></a></p></div></div></div><!-- gywm end --><div class="cpzs mt20"><h2><span class="more"><a href="cpzs.html">更多 >></a></span><img src="images/cpzs_tit.png" alt="产品展示" /></h2><div class="cpbox"><ul class="clear"><li><a href="subpro.html"><img src="images/cp.jpg"><p>圣君月饼·花好月圆</p></a> </li><li><a href="subpro.html"><img src="images/cp.jpg"><p>圣君月饼·花好月圆</p></a> </li><li><a href="subpro.html"><img src="images/cp.jpg"><p>圣君月饼·花好月圆</p></a> </li><li><a href="subpro.html"><img src="images/cp.jpg"><p>圣君月饼·花好月圆</p></a> </li></ul></div></div><!-- cpzs end --></div><!-- content end --><div class="footer mt20"><div class="footcon"><div class="f_link"><span style="color:#c58b44; font-size:18px;">友情链接：</span><a href="#">嘻嘻月饼</a> <a href="#">花好月圆月饼</a> <a href="#">老字号月饼</a> <a href="#">家里蹲月饼</a> <a href="#">真好月饼</a> <a href="#">嘻嘻月饼</a> <a href="#">花好月圆月饼</a> <a href="#">老字号月饼</a> <a href="#">家里蹲月饼</a> </div><div class="f_text clear"><div class="ftl left clear"><div class="f_nav"><a href="index.html">首页</a> / <a href="about.html">关于我们</a> / <a href="cpzs.html">产品展示</a> / <a href="news.html">新闻资讯</a> / <a href="zsjm.html">招商加盟</a> / <a href="rczp.html">人才招聘</a> / <a href="lxwm.html">联系我们</a></div><p>Copyright @ . 技术支持：和美科技有限公司<br />销售热线：400-6666666 联系人：白经理 地址：开封市新元区金普大道121号</p></div><div class="ftr right clear"><img src="images/ewm.jpg" alt="二维码" /></div></div></div></div><!-- footer end --></body></html>
CSS样式代码💒
@charset "utf-8";/* CSS Document *//* ========= 公共样式 ========= */*{margin:0; padding:0}body{font-family:"Microsoft yahei", sans-serif,Arial;font-size:12px;margin:0;padding:0;color:#555; background:url(../images/body_bg.jpg);}div,h1,h2,h3,h4,h5,p,ul,ol,li,dl,dd,dt,img,form{margin:0;padding:0;border:0;}ul,ol,li{list-style:none;}form,tr,th,td,input,select{font-size:13px;}input{font-family: arial;}/*text and password*/table{border-collapse:collapse;}/*边线重叠*//*link*/a{text-decoration:none;color:#555;}a:hover{color:#e52516;}.clear {zoom:1;}.clear:after {content:'';display:block;clear:both;height:0px;}/*解决超链接点击出现虚框问题*/a{text-decoration:none;outline:none;}a:active{star:expression(this.onFocus=this.blur());}.left{display:inline;float:left}.right{display:inline;float:right}.mt5{margin-top:5px!important;}.mt10{margin-top:10px!important;}.mt15{margin-top:15px!important;}.mt20{margin-top:20px!important;}.mt25{margin-top:25px!important;}.mt30{margin-top:30px!important;}.mt35{margin-top:35px!important;}.mt40{margin-top:40px!important;}.mt45{margin-top:45px!important;}.mt50{margin-top:50px!important;}.blank10{height:10px; line-height:10px;}/*--------------- 首页样式 ----------------*/.top{width:100%; height:35px; background:#331f07;}.topcon{width:1000px; height:35px; line-height:35px; margin:0 auto; overflow:hidden;}.tl{color:#b9b9b9;}.tr{background:url(../images/zxrx.png) left center no-repeat; padding-left:98px; font-size:20px; color:#e52516;}.nav{width:100%; height:100px; background:url(../images/nav.png) repeat-x;}.navcon{width:1000px; height:100px; margin:0 auto; overflow:hidden;}.logo img{margin-top:5px;}.menu li{float:left; font-size:16px; }.menu li a{display:block; padding:40px 30px 0 30px; color:#fedc83;}.menu li a:hover,.menu .cur{background:url(../images/nav_li.png) top center no-repeat;}.menu li a:hover,.menu .cur a{color:#fff;}/*banner*/.banner{width:100%; height:565px;overflow:hidden;}/*左滑*/.luara-left{position:relative;padding:0;overflow: hidden;}.luara-left ul{position: relative;padding: inherit;margin: 0;}.luara-left ul li{float: left;padding: inherit;margin: inherit;list-style: none;}.luara-left ul li img{width: inherit;height: inherit;}.dh{position:relative;width:100%;height:60px;top:-60px; left:0; background:#000;filter:alpha(opacity=50);opacity:0.5; z-index:999}.dh ol{width:1000px; margin:0 auto; padding-top:25px;}.dh ol li{float:right;width:38px;height:7px; margin:0 5px;background:#c8c8c6;}.dh ol li.seleted{background:#cd0000;}.content{width:1000px; height:auto; margin:0 auto; overflow:hidden;}.bktit{background:url(../images/tit_bg.png) bottom center no-repeat; height:66px;}.qyxc_tit,.qyxc{width:325px; height:auto; overflow:hidden;}.xwzx_tit,.xwzx{width:340px; height:auto; overflow:hidden; margin:0 20px;}.lxwm_tit,.lxwm{width:285px; height:auto; overflow:hidden;}.bkbox{padding-top:15px;}.tpdh{position:relative;width:100%; height:35px;top:-35px; left:0; background:#666;filter:alpha(opacity=50);opacity:0.5;}.tpdh ol{padding:10px 10px 0 0;}.tpdh ol li{float:right;width:15px;height:15px; margin:0 5px;background:#000; color:#999; text-align:center;}.tpdh ol li.seleted{background:#cd0000; color:#fff;}/*渐隐式*/.luara-{position:relative;padding:0;overflow: hidden;}.luara- ul{padding: inherit;margin: 0;}.luara- ul li{display: none;padding: inherit;margin: inherit;list-style: none;}.luara- ul li:first-child{display:block;}.luara- ul li img{width: inherit;height: inherit;}.gywm h2,.cpzs h2{background:url(../images/tit_bg.png) bottom center no-repeat; height:66px;}.more{font-size:12px; font-weight:normal; float:right; margin:35px 15px 0 0;}.more a,.more a:hover{color:#722416;}.wmbox{padding-top:20px;}.wm_img{width:283px;}.wm_img img{width:283px; height:231px;}.wm_text{width:700px; height:auto; line-height:29px;}.wm_text p{text-indent:2em;}.xw_img{width:109px;}.xw_img img{width:109px; height:75px;}.xw_text{width:220px; height:auto; line-height:25px;}.xw_text h3{font-size:13px; overflow:hidden;}.xw_text h3 a{color:#e52516;}.xwzx ul{padding-top:8px;}.xwzx li{height:25px; line-height:25px; overflow:hidden; background:url(../images/middot.png) 5px center no-repeat; text-indent:20px;}.rq{float:right; font-size:12px; color:#999; font-weight:normal;}.lxwm p{background:url(../images/lxbg.png) right bottom no-repeat; line-height:28px; padding-top:8px;}.cpbox{padding:25px 0; overflow:hidden;}.cpbox li{float:left; width:235px; margin:0 7px; display:inline;}.cpbox li img{width:225px; height:180px; border:5px solid #904d28;}.cpbox li p{text-align:center; line-height:25px; margin-top:5px; font-size:14px;}.footer{width:100%; height:auto; background:#331f07 url(../images/foot_bg.jpg) repeat-x;}.footcon{width:1000px; height:auto; margin:0 auto; overflow:hidden;}.f_link{height:65px; line-height:65px;}.f_link a{color:#fedc83; font-size:14px; margin:0 8px;}.f_text{padding:20px 0 30px 0; overflow:hidden;}.f_nav{color:#fedc83;}.f_nav a{color:#fedc83; font-size:14px; margin:0 8px;}.f_text p{color:#dfdfdf; line-height:25px; font-size:14px; padding-top:20px;}/*--------------- 内页样式 -----------*/.main{width:1000px; height:auto; margin:30px auto 0 auto;}.mleft{width:220px; height:auto; overflow:hidden;}.mright{width:760px; height:auto; overflow:hidden;}.cpfl h2,.nylx h2{background:url(../images/tit_bg.png) right bottom no-repeat; height:40px; line-height:40px; font-size:16px; color:#cd0000; text-indent:10px;}.cpfl h2 span,.nylx h2 span{font-size:14px; color:#722416; padding-left:5px;}.cpfl li a{width:174px; margin:0 auto;height:34px;line-height:34px; padding-left:40px; display:block; font-size:14px;background:url(../images/page-menu-list.jpg) right top no-repeat;margin-top:10px;color:#EEDCC4;}.cpfl li a:hover{background:url(../images/page-menu-list.jpg) left top no-repeat;color:#333;}.lxbox{padding:10px 5px; line-height:25px; overflow:hidden; font-size:13px; background:url(../images/lxbg.png) bottom right no-repeat;}.rt{background:#fff url(../images/about-line.png) top center repeat-x; padding-top:20px;}.rb{background:url(../images/about-line.png) bottom center repeat-x; padding-bottom:10px;}.mright h2{background:url(../images/tit_bg.png) right bottom no-repeat; height:32px; line-height:32px; font-size:16px; text-indent:15px; color:#722416;}.ny_nav{font-size:12px; font-weight:normal; float:right; margin-right:15px;}.ny_nav a{color:#722416;}.jjbox{padding:20px; line-height:25px; overflow:hidden;}.jjbox h1{font-size:16px; line-height:40px; text-align:center;}.info{display:block; line-height:30px; font-size:12px; text-align:center; border-bottom:1px solid #999; margin-bottom:10px;}.pro_list,.new_list{padding:20px; overflow:hidden;}.pro_list li{float:left; width:220px; margin:5px 10px; display:inline;}.pro_list li img{width:210px; height:168px; border:5px solid #904d28;}.pro_list li p{text-align:center; line-height:25px; margin-top:5px; font-size:14px;}.new_list li{clear:both; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #bc886b;}.wzbt{width:655px; float:right; line-height:25px;}.wzbt h3{font-size:14px;}.wzbt p{color:#999;}.fgz{background:url(../images/fgz.jpg) center center no-repeat; height:7px; margin:20px 0 10px 0;}.pages{padding:20px 0 10px 0; overflow:hidden; text-align:center;}.pages a{border:1px solid #ccc; padding:2px 10px; margin:0 3px; display:inline-block;}.pages a:hover{border:1px solid #904d28; color:#904d28;}.gys{border:1px solid #ccc; padding:2px 10px; display:inline-block;}.red{border:1px solid #904d28; color:#904d28; padding:2px 10px; display:inline-block;}
八、更多干货🎁
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
HTML5期末大作业：美食网页主题网站设计与实现——HTML+CSS+JavaScript月饼美食食品企业网站html模板9页面
