🎀 精彩专栏推荐👇🏻👇🏻👇🏻

✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🦄 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

一、👨‍🎓网站题目
二、✍️网站描述
三、📚网站介绍
四、🌐网站效果
五、🪓 代码实现
- 🧱HTML结构代码
- 💒CSS样式代码
六、🥇 如何让学习不再盲目
七、🎁更多干货

一、👨‍🎓网站题目

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

二、✍️网站描述

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

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

三、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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 rel="stylesheet" href="css/default.css" />
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js" ></script>
<script type="text/javascript" src="js/jquery.superslide.2.1.1.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
</head>
<body>
<!--header-->
<div class="headerWrap"><div class="header w1200 cleafix"><!--logo--><div class="logo fl"><a href="#"><img src="picture/logo.png" /></a></div><!--nav--><ul id="nav" class="nav clearfix"><li class="nLi on"><h3><a href="#">首页</a></h3></li><li class="nLi"><h3><a href="about.html">关于饭心</a></h3><ul class="sub"><li><a href="company_overview.html">企业概述</a></li><li><a href="development.html">发展历程</a></li><li><a href="#">理想愿景</a></li></ul></li><li class="nLi"><h3><a href="show.html">产品展示</a></h3></li><li class="nLi "><h3><a href="accepted.html">招贤纳士</a></h3></li><li class="nLi"><h3><a href="cooperation.html">商务合作</a></h3></li></ul><!--预约提货--><div class="heaR"><a href="#">预约提货</a></div></div>
</div>
<!--banner-->
<div class="slideBox"><div class="hd"><ul><li></li><li></li><li></li></ul></div><div class="bd"><ul><li><a href="#"><img src="picture/banner.jpg" /></a></li><li><a href="#"><img src="picture/banner.jpg" /></a></li><li><a href="#"><img src="picture/banner.jpg" /></a></li></ul></div>
</div>
<!--页面主体部分-->
<!--关于饭心-->
<div class="mainBox"><div class="main w1200"><div class="mainTitle"><h2>ABOUT  US</h2><h3>关于饭心</h3><em></em></div></div></li><li><div><a href="#"><div class="serTxt"><h2>安全食品</h2><em></em><p>倾力打造线上线下全渠道的销售模式</p><span></span></div><div class="serPic"><img src="picture/img1.jpg"></div></a></div><div><a href="#"><div class="serTxt"><h2>礼品定制</h2><em></em><p>专属企业私人礼品视觉定制</p><span></span></div><div class="serPic"><img src="picture/img2.jpg"></div></a></div></li><li><div><a href="#"><div class="serTxt"><h2>安全食品</h2><em></em><p>倾力打造线上线下全渠道的销售模式</p><span></span></div><div class="serPic"><img src="picture/img1.jpg"></div></a></div><div><a href="#"><div class="serTxt"><h2>礼品定制</h2><em></em><p>专属企业私人礼品视觉定制</p><span></span></div><div class="serPic"><img src="picture/img2.jpg"></div></a></div></li></ul></div></div></div>
</div>
<!--饭心客户-->
<div class="mainBox mainBox1"><div class="main w1200"><div class="mainTitle"><h2>CUSTOMER</h2><h3>饭心客户</h3><em></em></div><div class="customer cleafix"><ul><li><a href="#"><img src="picture/img3.jpg" /></a></li><li><a href="#"><img src="picture/img3.jpg" /></a></li><li><a href="#"><img src="picture/img3.jpg" /></a></li><li><a href="#"><img src="picture/img3.jpg" /></a></li><li><a href="#"><img src="picture/img3.jpg" /></a></li><li><a href="#"><img src="picture/img3.jpg" /></a></li><li><a href="#"><img src="picture/img3.jpg" /></a></li><li><a href="#"><img src="picture/img3.jpg" /></a></li><li><a href="#"><img src="picture/img3.jpg" /></a></li><li><a href="#"><img src="picture/img3.jpg" /></a></li></ul></div><h3 class="More"><a href="#">了解更多</a></h3></div>
</div>
<!--footer-->
<div class="footerWrap"><div class="footer w1200 cleafix"><ul><li><h2>CONTACT</h2><h3>联系饭心</h3><div class="fooM cleafix"><i><img src="picture/ico_btn1.png"></i><div class="divTxt fl"><h4>ADDRESS</h4><em></em><p>北京市朝阳区北苑领地office大厦</p></div></div><div class="fooM cleafix"><i><img src="picture/ico_btn2.png"></i><div class="divTxt fl"><h4>PHONE</h4><em></em><p>15801014527 / 13810977519    李爽</p></div></div></li><li><h2>&nbsp;</h2><h3>&nbsp;</h3><div class="fooM cleafix"><i><img src="picture/ico_btn3.png"></i><div class="divTxt fl"><h4>E-MAIL</h4><em></em><p>Lishuang@fanxin100.com</p></div></div><div class="fooM cleafix"><i><img src="picture/ico_btn4.png"></i><div class="divTxt fl"><h4>相关说明</h4><em></em><p><a href="#">隐私政策</a><a href="#">法律声明</a><a href="#">使用条款</a></p></div></div></li><li><h2>FOCUS  ON</h2><h3>关注饭心</h3><span><img src="picture/webchat.png" /></span><p>扫描关注饭心官网微信！</p></li></ul></div><div class="fooTxt">Copyright © 2016  饭心网  保留所有权利</div>
</div>
</body>
</html>

💒CSS样式代码


.slideBox {width: 100%;height: auto;overflow: hidden;position: relative;
}
.slideBox .hd {width: 100%;height: 15px;overflow: hidden;position: absolute;left: 0;bottom: 21px;z-index: 1;*width: 102px;*left: 50%;*margin-left: -51px;
}
.slideBox .hd ul {overflow: hidden;zoom: 1;*float: left;text-align: center;
}
.slideBox .hd ul li {*float: left;display: inline-block;margin: 0 13px;width: 8px;height: 8px;border-radius: 50px;background: #fff;cursor: pointer;
}
.slideBox .hd ul li.on {background: #dd1215;
}
.slideBox .bd {position: relative;z-index: 0;width:100%;margin: 0 auto;
}
.slideBox .bd li {position: relative;zoom: 1;vertical-align: middle;
}
.slideBox .bd a img {width: 100%;height: auto;display: block;
}
.More{text-align: center;padding-bottom: 5px;
}

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。