700字范文 > html网页设计代码作业设计——美食甜品店铺加盟企业(1页) HTML+CSS+JavaScript web

html网页设计代码作业设计——美食甜品店铺加盟企业(1页) HTML+CSS+JavaScript web

时间：2021-09-02 11:17:02

HTML5期末大作业

文章目录

HTML5期末大作业一、作品展示二、文件目录三、代码实现四、获取更多源码

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>甜品加盟首页</title><link rel="stylesheet" type="text/css" href="statics/css/swiper.min.css" /><link rel="stylesheet" type="text/css" href="statics/css/style.css" /><script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script><script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="header"><div class="top-bar"><div class="w1200"><div class="l">期待您的加入！</div><div class="r"><span class="address">总店地址：北京市海淀区某某街某号</span><span>加盟热线：<span class="red">188-XXXX-XXXX</span></span></div></div></div><div class="w1200"><div class="logo"><a href="#"><img src="statics/images/logo.png" /></a></div><div class="nav"><ul><li><a class="active" href="#">首页</a></li><li><a href="#">成功案例</a></li><li><a href="#">加盟热线</a></li><li><a href="#">员工培训</a></li><li><a href="#">联系我们</a></li><li><a href="#">关于我们</a></li></ul></div></div></div><div class="slider swiper-container"><ul class="swiper-wrapper"><li class="swiper-slide"><img src="statics/images/slider.jpg" /><div class="w1200"><div class="slider-txt"><div class="title">芒果草莓奶油蛋糕</div><div class="sub-title">冬季爆款 / 超高颜值 / 网红食品</div><a href="#" class="btn"><span>立即加盟</span></a></div></div></li><li class="swiper-slide"><img src="statics/images/slider.jpg" /><div class="w1200"><div class="slider-txt"><div class="title">芒果草莓奶油蛋糕</div><div class="sub-title">冬季爆款 / 超高颜值 / 网红食品</div><a href="#" class="btn"><span>立即加盟</span></a></div></div></li><li class="swiper-slide"><img src="statics/images/slider.jpg" /><div class="w1200"><div class="slider-txt"><div class="title">芒果草莓奶油蛋糕</div><div class="sub-title">冬季爆款 / 超高颜值 / 网红食品</div><a href="#" class="btn"><span>立即加盟</span></a></div></div></li></ul><div class="arrow"><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div></div><div class="services"><div class="w1200"><ul><li><img src="statics/images/icon-tianpin.png"/><p class="title">甜品定制</p><p class="desc">对员工集体培训，聘请国际甜品大师授课包教包会对员工集体培训，聘请国际甜品大师授课包教包会</p></li><li><img src="statics/images/icon-yinpin.png"/><p class="title">特制饮品</p><p class="desc">对员工集体培训，聘请国际甜品大师授课包教包会对员工集体培训，聘请国际甜品大师授课包教包会</p></li><li><img src="statics/images/icon-xuanzhi.png"/><p class="title">门店选址</p><p class="desc">对员工集体培训，聘请国际甜品大师授课包教包会对员工集体培训，聘请国际甜品大师授课包教包会</p></li></ul></div></div><div class="about"><div class="w1200"><div class="l"><h2>关于我们</h2><p>17甜点有限公司总部位于北京，在上海、深圳、广州、武汉等30个地区设有分店，每年销售额突破一个亿17甜点有限公司总部位于北京，在上海、深圳、广州、武汉等30个地区设有分店，每年销售额突破一个亿</p></div><div class="r"><div class="about-pic"><div class="about-pic-l"><div class="about-pic-l-t"><img src="statics/images/about1.jpg"/></div><div class="about-pic-l-b"><img src="statics/images/about2.jpg"/><img src="statics/images/about3.jpg"/></div></div><div class="about-pic-l"><img src="statics/images/about4.jpg"/></div></div></div></div></div><div class="product"><div class="w1200"><h2 class="title">加盟产品</h2><p class="sub-title">Franchised products </p><div class="pro-box"><div class="pro-cate"><ul><li class="active">店长推荐</li><li>热卖爆款</li><li>优质甜品</li><li>鲜榨饮品</li><li>营养蛋糕</li><li>鲜榨饮品</li><li>营养蛋糕</li></ul></div><div class="pro-list"><div class="pro-list-slider swiper-container2 active"><ul class="swiper-wrapper"><li class="swiper-slide"><a href="#"><img src="statics/images/jiameng1.jpg"/><div class="desc">经过统计几十个加盟店的数据显示，此款产品最受消费者喜爱，店长亲自推荐，包教包会</div></a></li><li class="swiper-slide"><a href="#"><img src="statics/images/jiameng1.jpg"/><div class="desc">经过统计几十个加盟店的数据显示，此款产品最受消费者喜爱，店长亲自推荐，包教包会</div></a></li></ul><div class="arrow"><span class="arrow-next"></span><span class="arrow-prev"></span></div></div><div class="pro-list-slider swiper-container2"><ul class="swiper-wrapper"><li class="swiper-slide"><a href="#"><img src="statics/images/jiameng1.jpg"/><div class="desc">经过统计几百个加盟店的数据显示，此款产品最受消费者喜爱，店长亲自推荐，包教包会</div></a></li><li class="swiper-slide"><a href="#"><img src="statics/images/jiameng1.jpg"/><div class="desc">经过统计几百个加盟店的数据显示，此款产品最受消费者喜爱，店长亲自推荐，包教包会</div></a></li></ul><div class="arrow"><span class="arrow-next"></span><span class="arrow-prev"></span></div></div><div class="pro-list-slider swiper-container2"><ul class="swiper-wrapper"><li class="swiper-slide"><a href="#"><img src="statics/images/jiameng1.jpg"/><div class="desc">经过统计几千个加盟店的数据显示，此款产品最受消费者喜爱，店长亲自推荐，包教包会</div></a></li><li class="swiper-slide"><a href="#"><img src="statics/images/jiameng1.jpg"/><div class="desc">经过统计几千个加盟店的数据显示，此款产品最受消费者喜爱，店长亲自推荐，包教包会</div></a></li></ul><div class="arrow"><span class="arrow-next"></span><span class="arrow-prev"></span></div></div><div class="pro-list-slider swiper-container2"><ul class="swiper-wrapper"><li class="swiper-slide"><a href="#"><img src="statics/images/jiameng1.jpg"/><div class="desc">经过统计几万个加盟店的数据显示，此款产品最受消费者喜爱，店长亲自推荐，包教包会</div></a></li><li class="swiper-slide"><a href="#"><img src="statics/images/jiameng1.jpg"/><div class="desc">经过统计几万个加盟店的数据显示，此款产品最受消费者喜爱，店长亲自推荐，包教包会</div></a></li></ul><div class="arrow"><span class="arrow-next"></span><span class="arrow-prev"></span></div></div><div class="pro-list-slider swiper-container2"><ul class="swiper-wrapper"><li class="swiper-slide"><a href="#"><img src="statics/images/jiameng1.jpg"/><div class="desc">经过统计几十个加盟店的数据显示，此款产品最受消费者喜爱，店长亲自推荐，包教包会</div></a></li><li class="swiper-slide"><a href="#"><img src="statics/images/jiameng1.jpg"/><div class="desc">经过统计几十个加盟店的数据显示，此款产品最受消费者喜爱，店长亲自推荐，包教包会</div></a></li></ul><div class="arrow"><span class="arrow-next"></span><span class="arrow-prev"></span></div></div><div class="pro-list-slider swiper-container2"><ul class="swiper-wrapper"><li class="swiper-slide"><a href="#"><img src="statics/images/jiameng1.jpg"/><div class="desc">经过统计几百个加盟店的数据显示，此款产品最受消费者喜爱，店长亲自推荐，包教包会</div></a></li><li class="swiper-slide"><a href="#"><img src="statics/images/jiameng1.jpg"/><div class="desc">经过统计几百个加盟店的数据显示，此款产品最受消费者喜爱，店长亲自推荐，包教包会</div></a></li></ul><div class="arrow"><span class="arrow-next"></span><span class="arrow-prev"></span></div></div><div class="pro-list-slider swiper-container2"><ul class="swiper-wrapper"><li class="swiper-slide"><a href="#"><img src="statics/images/jiameng1.jpg"/><div class="desc">经过统计几千个加盟店的数据显示，此款产品最受消费者喜爱，店长亲自推荐，包教包会</div></a></li><li class="swiper-slide"><a href="#"><img src="statics/images/jiameng1.jpg"/><div class="desc">经过统计几千个加盟店的数据显示，此款产品最受消费者喜爱，店长亲自推荐，包教包会</div></a></li></ul><div class="arrow"><span class="arrow-next"></span><span class="arrow-prev"></span></div></div></div></div></div></div><div class="team"><div class="w1200"><h2 class="title">管理团队</h2><p class="sub-title">Management team </p><div class="team-list swiper-container3"><ul class="swiper-wrapper"><li class="swiper-slide"><div class="item"><a href=""><img src="statics/images/team1.png"/><p class="name">17素材</p><p class="duty">米其林特约糕点师</p><p class="desc">在国外学习5年，为17甜点培训数以万计的糕点师在国外学习5年，为17甜点培训数以万计的糕点师</p></a></div></li><li class="swiper-slide"><div class="item"><a href=""><img src="statics/images/team1.png"/><p class="name">17素材</p><p class="duty">米其林特约糕点师</p><p class="desc">在国外学习5年，为17甜点培训数以万计的糕点师在国外学习5年，为17甜点培训数以万计的糕点师</p></a></div></li><li class="swiper-slide"><div class="item"><a href=""><img src="statics/images/team1.png"/><p class="name">17素材</p><p class="duty">米其林特约糕点师</p><p class="desc">在国外学习5年，为17甜点培训数以万计的糕点师在国外学习5年，为17甜点培训数以万计的糕点师</p></a></div></li><li class="swiper-slide"><div class="item"><a href=""><img src="statics/images/team1.png"/><p class="name">17素材</p><p class="duty">米其林特约糕点师</p><p class="desc">在国外学习5年，为17甜点培训数以万计的糕点师在国外学习5年，为17甜点培训数以万计的糕点师</p></a></div></li></ul></div><div class="team-arrow"><span class="team-arrow-next"></span><span class="team-arrow-prev"></span></div></div></div><div class="footer"><div class="w1200"><div class="form"><span>线上联系 :</span><form action=""><input type="text" name="name" placeholder="请输入您的姓名" /><input type="text" name="tel" placeholder="请输入您的联系方式" /><input type="text" name="city" placeholder="请输入加盟城市名称" /><input type="submit" value="提交" class="submit"/></form></div><div class="line"><p><span class="t">加盟热线 :</span><span class="pink">188-XXXX-XXXX</span></p><p><span class="t">售后服务 :</span><span class="pink">188-XXXX-XXXX</span></p><p><span class="t">售后服务 :</span><span class="pink">188-XXXX-XXXX</span></p></div><div class="footer-nav"><div class="l"><dl><dt><a href="">加盟产品</a></dt><dd><a href="">店长推荐</a></dd><dd><a href="">热卖爆款</a></dd><dd><a href="">优质甜品</a></dd><dd><a href="">鲜榨饮品</a></dd><dd><a href="">营养蛋糕</a></dd></dl><dl><dt><a href="">关于我们</a></dt><dd><a href="">总部地址</a></dd><dd><a href="">分店数据</a></dd><dd><a href="">团队人员</a></dd><dd><a href="">培训过程</a></dd></dl><dl><dt><a href="">加入我们</a></dt><dd><a href="">招聘信息</a></dd><dd><a href="">工作环境</a></dd><dd><a href="">福利补贴</a></dd><dd><a href="">团建活动</a></dd></dl></div><div class="r"><div class="wx"><img src="statics/images/qr1.jpg"/><p>17素材甜点公众号</p></div><div class="wb"><img src="statics/images/qr1.jpg"/><p>17素材甜点微博</p></div></div></div></div></div><div class="copyright">17素材 Copyright © - 17素材网络科技有限公司 <a href="#">沪ICP备17033508号-5</a></div></body></html><script type="text/javascript">//导航固定$(window).scroll(function() {var height = $(document).scrollTop()if(height > 150) {$('.header').addClass('fixed')} else {$('.header').removeClass('fixed')}})//轮播图开始var swiper = new Swiper('.swiper-container', {nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',loop: true,autoplay: 5000});//加盟产品$('.pro-cate ul li').hover(function(){var index = $(this).index();$(this).addClass('active').siblings().removeClass('active');$('.pro-list .pro-list-slider').removeClass('active').eq(index).addClass('active');})var swiper = new Swiper('.swiper-container2', {nextButton: '.arrow-next',prevButton: '.arrow-prev',loop: true,observer:true,observeParents:true});//团队var swiper = new Swiper('.swiper-container3', {nextButton: '.team-arrow-next',prevButton: '.team-arrow-prev',slidesPerView: 3,loop: true,observer:true,observeParents:true});</script>