html网页设计代码作业设计——美食甜品店铺加盟企业(1页) HTML+CSS+JavaScript web期末作业设计网页_美食网页设计作业成品
2024-07-06 14:06:27
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 © 2014-2020 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>四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识
html网页设计代码作业设计——美食甜品店铺加盟企业(1页) HTML+CSS+JavaScript web期末作业设计网页_美食网页设计作业成品相关推荐
- HTML5期末大作业：甜品店网站设计——美食甜品店铺加盟企业(1页) HTML+CSS+JavaScript web期末作业设计网页_美食网页设计作业成品
HTML5期末大作业:甜品店网站设计--美食甜品店铺加盟企业(1页) HTML+CSS+JavaScript web期末作业设计网页_美食网页设计作业成品 常见网页设计作业题材有 个人. 美食. 公司 ...
- HTML5期末大作业：宠物之家网站设计——代码质量好宠之家(5页) HTML+CSS+JavaScript web期末作业设计网页
HTML5期末大作业:宠物之家网站设计--代码质量好宠之家(5页) HTML+CSS+JavaScript web期末作业设计网页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...
- html网页设计作业代码——网上鲜花网页设计(5页)HTML+CSS+JavaScript web期末作业设计网页
HTML5期末大作业:网上鲜花网站设计--网上鲜花网页设计(5页)HTML+CSS+JavaScript web期末作业设计网页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...
- 网页设计作业 仿苏宁易购商城网站设计——仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业
HTML5期末大作业:仿苏宁易购商城网站设计--仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
- HTML5期末大作业：网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品 常见网页设计作业题材有 个人. 美食 ...
- HTML5期末大作业：仿苏宁易购商城网站设计——仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业
HTML5期末大作业:仿苏宁易购商城网站设计--仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
- HTML5期末大作业：英雄联盟网站设计——英雄联盟LOL(4页) HTML+CSS+JavaScript web期末网站设计大作业
HTML5期末大作业:英雄联盟网站设计--英雄联盟LOL(4页) HTML+CSS+JavaScript web期末网站设计大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...
- 使用dreamweaver制作采用DIV+CSS进行布局——美食甜品店铺加盟企业HTML静态网页 ——学生美食网页设计作品静态HTML网页模板源码
- 网页设计作业——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) 文章目录 HTML5期末大作业:网页设计--小米商城官网首页(1页) 一.作品展示 二.文件目录 三.代码实现 四.完整源码 一.作品展示 ...
最新文章
- js实现移动端图片预览：手势缩放， 手势拖动，双击放大...
- MySQL基础教程之IN的用法详解
- CentOS7 下配置 Nginx + PHP7 + MariaDB + ThinkPHP5.1
- 【自适应(盲)均衡6】信号过多径衰落信道的矩阵乘法表示之Toeplitz矩阵和Toeplitz块矩阵的生成（分数间隔FSE）
- 电脑入门基础教程_ARM入门最好的文章------转载一位资身工程师的入门心得
- OpenTelemetry-可观察性的新时代
- 2020计算机原理组成1254,1254计算机科学与技术专业计算机组成原理A科目2020年09月国家开 放大学(中央广播电视大学)考试试题及答案.pdf...
- iPhone 11降至3000元档，一顿降价猛如虎！
- oracle 调用存储过程返回集合插入临时表_技术分享：集合
- 【转载】oracle normal、sys、system、sysdba、sysoperdba的区别
- Rabbitmq 延迟队列
- AXE模式隐私号基于语音流分析的用户接听识别方案
- Android 如何修改factory mode下FM的默认测试频点及阀值
- 测试基本理论-看这篇就够了
- ipv4和计算机地址是什么意思,什么是IP地址？IPV4和IPV6又有什么区别？
- 抖音从流量上游杀入本地生活市场，美团如何“以牙还牙”？
- 小米手机相机的专业模式
- SDEdit一点成画，小白也能是绘画大师！
- 神经网络与深度学习（二） pytorch入门——张量
- PDMS二次开发（十四）——自动插入焊口和计算焊接当量（达因数）