👨🎓静态网站的编写主要是用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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欧麦喜官网</title>
<link href="css/rest.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/animate.min.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<link href="css/video-js.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main1 animated bounceInDown" data-wow-delay="4.4s">
<div class="index_top">
<div class="w1200">
<div class="nav animated bounceInRight " style="animation-delay:1s;-webkit-animation-delay:1s;">
<div class="nav_logo fl"><img src="images/logo.png"></div>
<div class="nav_ul fr">
<ul>
<li>
<a href="#">企业•实力 </a>
<dl>
<dd><a href="#">企业•实力1</a></dd>
<dd><a href="#">企业•实力2</a></dd>
<dd><a href="#">企业•实力3</a></dd>
</dl>
</li>
<li>
<a href="#">极简•形象</a>
<dl>
<dd><a href="#">极简•形象1</a></dd>
<dd><a href="#">极简•形象2</a></dd>
<dd><a href="#">极简•形象3</a></dd>
</dl>
</li>
<li>
<a href="#">喜作•产品</a>
<dl>
<dd><a href="#">喜作•产品1</a></dd>
<dd><a href="#">喜作•产品2</a></dd>
<dd><a href="#">喜作•产品3</a></dd>
</dl>
</li>
<li class="cur"><a href="#">欧麦喜</a></li>
<li>
<a href="#">合作•惊喜</a>
<dl>
<dd><a href="#">合作•惊喜1</a></dd>
<dd><a href="#">合作•惊喜2</a></dd>
<dd><a href="#">合作•惊喜3</a></dd>
</dl>
</li>
<li>
<a href="#">火爆•动态</a>
<dl>
<dd><a href="#">火爆•动态1</a></dd>
<dd><a href="#">火爆•动态2</a></dd>
<dd><a href="#">火爆•动态3</a></dd>
</dl>
</li>
<li>
<a href="#">联系•我们</a>
<dl>
<dd><a href="#">联系•我们1</a></dd>
<dd><a href="#">联系•我们2</a></dd>
<dd><a href="#">联系•我们3</a></dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="ibanner" class="ibanner">
<div class="bd">
<ul>
<li><img src="temp/banner1.jpg" /></li><li><img src="temp/banner2.jpg" /></li><li><img src="temp/banner3.jpg" /></li> <li><img src="temp/banner4.jpg" /></li> </ul>
</div>
</div>
</div>
<div class="main5 wow fadeInUpRight">
<div class="w1200">
<div class="maincom main5-0 wow bounceInLeft" data-wow-delay="0.5s"></div>
<div class="maincom main5-1 wow bounceInLeft" data-wow-delay="1s"></div>
<div class="maincom main5-2 wow bounceInLeft" data-wow-delay="1.5s"></div>
</div>
</div>
<!-- <div class="main2 wow fadeInUpLeft">
<div class="w1200">
<div class="maincom main2-0 wow bounceInLeft" data-wow-delay="0.3s"></div>
<div class="maincom main2-1 wow bounceIn" data-wow-delay="0.6s"></div>
<div class="maincom main2-2 wow bounceIn" data-wow-delay="0.9s"></div>
<div class="maincom main2-3 wow bounceIn" data-wow-delay="1.2s"></div>
</div>
</div> -->
<div class="main3 wow fadeInUpRight">
<div class="w1200">
<div class="maincom main3-0 wow bounceInLeft" data-wow-delay="0.5s"></div>
<div class="maincom main3-1 wow bounceInRight" data-wow-delay="1s"></div>
</div>
</div>
<div class="main4 wow fadeInUpLeft">
<div class="w1200">
<div class="maincom main4-0 wow bounce" data-wow-delay="0.5s"></div>
<div class="maincom main4-1 wow bounce" data-wow-delay="1s">
<div>
<a class="news_ul_pic fl" href="#" target="_blank"><img src="temp/new1.jpg"></a>
<div class="indexnews fr">
<div class="indexnews_c1">
<a class="fl" href="#">企业简介</a>
</div>
<p class="indexnews_c2">品纳餐饮管理有限公司是一家集企业咨询、餐饮连锁经营、网络科技创新为一体的综合型企业，总部位于广州市白云区，经过多年的沉淀和悉心钻研，公司已在集团化、多元化的新型企业道路上迈出了坚实的一步，成为集研发、制造、销售、运输、培训为一体的专业餐饮管理服务机构，打造了以500公里为业务半径、整个大陆业务拓展和终端运营服务的无缝覆盖体系，目前在南京、上海、武汉、成都均已设有分公司。</p>
<a class="indexnews_a" href="#">更多详情</a>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="main2 wow fadeInUpLeft">
<div class="w1200">
<div class="maincom main2-0 wow bounceInLeft" data-wow-delay="0.3s">
<video id="my-video" class="video-js" controls preload="auto" width="730" height="410"
poster="temp/video.png" data-setup="{}">
<source src="http://jq22com.qiniudn.com/jq22-sp.mp4" type="video/mp4">
<p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
</video>
<script src="js/video.min.js"></script>
<script src="js/zh-CN.js"></script>
<script type="text/javascript">
var myPlayer = videojs('my-video');
videojs("my-video").ready(function(){
var myPlayer = this;
myPlayer.play();
});
</script>
</div>
<div class="maincom main2-1 wow bounceIn indexpro" data-wow-delay="0.6s">
<a href="">
<img src="temp/index_pro1.jpg" alt="">
<p class="p1">欧麦喜荣获“受欢迎茶饮”，广受全国……</p>
<p class="p2">手作大麦茶热销全国，轻创企业的创新标杆，作为全国受欢迎的茶饮，欧麦喜受众遍及大江南北，全国掀起麦茶新潮流……</p>
</a>
</div>
<div class="maincom main2-2 wow bounceIn indexpro" data-wow-delay="0.9s">
<a href="">
<img src="temp/index_pro1.jpg" alt="">
<p class="p1">欧麦喜调茶师的专业炫酷工艺圈粉数千……</p>
<p class="p2">调茶工艺的美学根据调酒师演变，从最初的只是简单控流、控量到现在的将调试过程完成艺术仅仅几个月时间，每一杯给一个步骤每一个工序都为优质典雅代言……</p>
</a>
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<ul>
<li>
<p><span>姓 名</span><input type="text" name="name" id="name" class="liuyan"></p>
<p><span>手机号</span><input type="text" name="tel" id="tel" class="liuyan"></p>
<p><span>留 言</span><textarea name="introduce" id="contact" class="liuyan"></textarea></p>
<p>
<button class="fbtn1" name="button" onclick="FromSubmit()">提交</button>
<button class="fbtn2" name="submit" onclick="ClickReset()">重置</button>
</p>
</li>
<li>
<img src="images/fewm.png">
</li>
<li>
<img src="images/fh1.png">
<p>
<span>华南</span>广州市天河区科学大道科汇金谷一街1号1-4楼
</p>
<p>
<span>华北</span>北京市丰台区新宫中福丽宫品牌基地2号楼365室
</p>
<p>
<span>华东</span>上海市闵行区顾戴路3009号祥鹿大厦2楼
</p> <em><img src="images/ftel.png">4006-150-513</em>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="flink">
<p>版权所有:品纳餐饮管理有限公司<a href="http://www.miitbeian.gov.cn/" target="_blank">粤ICP备00008888号-88</a><a href="#" target="_blank">网站地图</a></p>
<p><span>友情链接：</span>
<a target="_blank" href="#">饮品合作</a> <a target="_blank" href="#">火锅合作</a> <a target="_blank" href="http://www.yibingke.com/">冰淇淋加盟</a> <a target="_blank" href="http://www.yzgcha.com/">贡茶加盟</a> <a target="_blank" href="http://www.jiugongz.com/">烘焙合作</a> </p>
<div class="clear"></div>
</div>
<div class="fixicon">
<a href="" ><img src="images/fixicon1.png" alt=""></a>
<a href="" ><img src="images/fixicon2.png" alt=""></a>
<a href="" ><img src="images/fixicon3.png" alt=""></a>
<a href="" ><img src="images/fixicon4.png" alt=""></a>
<a href="" ><img src="images/fixicon5.png" alt=""></a>
</div>
<script src="js/wow.js"></script>
<script src="js/jquery.SuperSlide.2.1.2.js"></script>
<script>
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
new WOW().init();
};
$(function (){
jQuery(".ibanner").slide({mainCell:".bd ul",autoPlay:true,delayTime:1000,effect:"leftLoop"});
});
</script>
</body>
</html>
CSS样式代码💒
@media (min-width:0px) and (max-width:1200px) ,(min-height: 0px) and (max-height: 800px) {
.fixicon{width: 60px;height: 400px;position: fixed;right: 0px;bottom: 10px;}
.fixicon a{float: left;margin-bottom: 10px;}
.fixicon a img{width: 60px;}
}
@media (min-width:1200px) and (min-height: 800px) {
.fixicon{width: 110px;height: 600px;position: fixed;right: 10px;bottom: 10px;}
.fixicon a{float: left;margin-bottom: 10px;}
}
.nav{height: 200px;width:100%;z-index:8;transition:all 0.2s;}
.nav_black li a{color: #2c2d30;}
.nav_logo{margin: 53px 0 25px 0;}
.nav_ul{margin: 77px 0 0 0;}
.nav_ul ul li{float:left;height:70px;line-height:70px;position:relative;transition:all 0.2s;margin-left: 30px;}
.nav_ul a{font-size: 21px;color: #ffffff;/* margin-left:30px; */transition:all 0.2s;padding: 5px 10px;}
.nav_ul ul li.cur a{border: 1px solid #71b057;color: #71b057;}
.nav_ul ul li:hover a{border: 1px solid #71b057;color: #71b057;}
.nav_ul ul li:hover dl{display:block;}
.nav_ul dl{position:absolute;top:70px;border-top:0px;display:none;}
.nav_ul dl dd{height:40px;line-height:40px;width:148px;margin-bottom: 10px;}
.nav_ul dl dd a{display:block;width:100%;height:40px;line-height:40px;margin:0px;padding:0px;overflow:hidden;text-indent:18px;background:url(../images/nav_bg1.png) 148px center no-repeat;transition:all 0.5s;}
.nav_ul dl dd a:hover{background:#f6f6f6 url(../images/nav_bg1.png) 130px center no-repeat;text-indent: 10px;}
.main1{width: 100%;overflow:hidden;position: relative;}
.main2{background: #000 url(../images/bg2.jpg) no-repeat top center;width: 100%;height:1080px;overflow:hidden;}
.main3{background:url(../images/bg3.jpg) no-repeat center center;width: 100%; height:1140px; overflow:hidden;}
.main4{background:url(../images/bg4.jpg) no-repeat center center;width: 100%; height:1080px; overflow:hidden;}
.main5{background:url(../images/bg5.jpg) no-repeat center center;width: 100%; height:972px; overflow:hidden;}
.maincom{position: absolute;left: 50%; top:50%;}
八、更多干货🎁
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
!
💂【获取方式】
gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app
