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>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识