模板描述：红色简洁风格 健身教练培训 企业网站，红色简洁风格的健身教练培训企业网站源码下载html模板下载
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/swiper-3.2.7.min.css" /> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/master.css"> <link rel="stylesheet" href="css/bannerList.css">
2. 引入JS
<script type="text/javascript" src="js/jquery.min.js"></script> <script src="js/bannerList.js"></script> <script type="text/javascript" src="js/swiper-3.4.0.jquery.min.js" ></script>
3. HTML代码
<div class="header">
<div class="w1200">
<div class="logo">
<a href=""><img src="images/logo.png" width="378" height="82" alt=""></a>
</div>
<div class="nav">
<ul class="nav-list">
<li><a href='/'>首页</a><span></span></li>
<li><a href='/'>课程</a><span></span></li>
<li><a href='/'>教练</a><span></span></li>
<li><a href='/'>培训证书</a><span></span></li>
<li><a href='/'>优势</a><span></span></li>
<li><a href='/'>报名优惠</a><span></span></li>
<li><a href='/'>新闻动态</a><span></span></li>
<li><a href='/'>成绩查询</a><span></span></li>
<li><a href='/'>关于我们</a><span></span></li>
</ul>
</div>
</div>
</div>
<div class="banner">
<ul class="">
<li><a href=""><img src="images/banner/banner1.jpg" alt=""></a></li>
<li><a href=""><img src="images/banner/banner1.jpg" alt=""></a></li>
<li><a href=""><img src="images/banner/banner1.jpg" alt=""></a></li>
</ul>
<div class="left-btn"></div>
<div class="right-btn"></div>
<div class="img-btn-list"></div>
</div>
<!--course start-->
<div class="course">
<div class="course-head">
<h2>全新私人教练课程</h2>
<p>实力导师激情塑造 不只是帮你打造完美身材</p>
</div>
<div class="w1200">
<div class="content-four">
<ul class="contentbox-four">
<li class="con-four">
<img src="images/photo/photo_03.png"/>
<div class="txt-four">
<h3>私教CPT认证</h3>
<p>私人健身教练的专业知识要建立在市场需求的基础上，将体适能要素、运动营养学、运动生理学、运动解剖学、生物力学、基础运动损伤学融合运用来解决实质问题。只有深度学习了以上知识并能熟悉掌握其原理，才能有效避免身体在运动中的潜在危险，最后根据客户实际身体状态制..</p>
<a href="">立即报名</a>
</div>
</li>
<li class="con-four">
<img src="images/photo/photo_03.png"/>
<div class="txt-four">
<h3>私教CPT认证</h3>
<p>私人健身教练的专业知识要建立在市场需求的基础上，将体适能要素、运动营养学、运动生理学、运动解剖学、生物力学、基础运动损伤学融合运用来解决实质问题。只有深度学习了以上知识并能熟悉掌握其原理，才能有效避免身体在运动中的潜在危险，最后根据客户实际身体状态制..</p>
<a href="">立即报名</a>
</div>
</li>
<li class="con-four">
<img src="images/photo/photo_03.png"/>
<div class="txt-four">
<h3>私教CPT认证</h3>
<p>私人健身教练的专业知识要建立在市场需求的基础上，将体适能要素、运动营养学、运动生理学、运动解剖学、生物力学、基础运动损伤学融合运用来解决实质问题。只有深度学习了以上知识并能熟悉掌握其原理，才能有效避免身体在运动中的潜在危险，最后根据客户实际身体状态制..</p>
<a href="">立即报名</a>
</div>
</li>
<li class="con-four">
<img src="images/photo/photo_03.png"/>
<div class="txt-four">
<h3>私教CPT认证</h3>
<p>私人健身教练的专业知识要建立在市场需求的基础上，将体适能要素、运动营养学、运动生理学、运动解剖学、生物力学、基础运动损伤学融合运用来解决实质问题。只有深度学习了以上知识并能熟悉掌握其原理，才能有效避免身体在运动中的潜在危险，最后根据客户实际身体状态制..</p>
<a href="">立即报名</a>
</div>
</li>
<li class="con-four">
<img src="images/photo/photo_03.png"/>
<div class="txt-four">
<h3>私教CPT认证</h3>
<p>私人健身教练的专业知识要建立在市场需求的基础上，将体适能要素、运动营养学、运动生理学、运动解剖学、生物力学、基础运动损伤学融合运用来解决实质问题。只有深度学习了以上知识并能熟悉掌握其原理，才能有效避免身体在运动中的潜在危险，最后根据客户实际身体状态制..</p>
<a href="">立即报名</a>
</div>
</li>
<li class="con-four">
<img src="images/photo/photo_03.png"/>
<div class="txt-four">
<h3>私教CPT认证</h3>
<p>私人健身教练的专业知识要建立在市场需求的基础上，将体适能要素、运动营养学、运动生理学、运动解剖学、生物力学、基础运动损伤学融合运用来解决实质问题。只有深度学习了以上知识并能熟悉掌握其原理，才能有效避免身体在运动中的潜在危险，最后根据客户实际身体状态制..</p>
<a href="">立即报名</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--course end-->
<!--team start-->
<div id="team">
<div class="team_head">
<h2>行业顶级导师团队</h2>
<p>全面的课程开设 为您的人生梦想添翼</p>
</div>
<div class="w1200">
<div class="btnMode" id="slider">
<a href="javascript:void(0);" class="prev btn"></a>
<div class="scroll">
<ul class="scrollContainer">
<li class="panel" id="panel_1">
<a href="" class="inside" target="_blank">
<img width="230" height="295" alt="Alexander McQueen秋季" src="images/photo/team.png" />
<span>王威</span>
<p>亚洲形体健身学院资深培训导师
亚洲形体健身学院基础理论课程导师
亚洲形体健身学院资深培训导师</p>
</a>
<a href="/" class="panel_more">查看更多</a>
</li>
<li class="panel" id="panel_2">
<a href="" class="inside" target="_blank">
<img width="230" height="295" alt="Alexander McQueen秋季" src="images/photo/team.png" />
<span>王威</span>
<p>亚洲形体健身学院资深培训导师
亚洲形体健身学院基础理论课程导师
亚洲形体健身学院资深培训导师</p>
</a>
<a href="/" class="panel_more">查看更多</a>
</li>
<li class="panel current" id="panel_3">
<a href="" class="inside " target="_blank">
<img width="230" height="295" alt="Alexander McQueen秋季" src="images/photo/team.png" />
<span>王威</span>
<p>亚洲形体健身学院资深培训导师
亚洲形体健身学院基础理论课程导师
亚洲形体健身学院资深培训导师</p>
</a>
<a href="/" class="panel_more">查看更多</a>
</li>
<li class="panel" id="panel_4">
<a href="" class="inside" target="_blank">
<img width="230" height="295" alt="Alexander McQueen秋季" src="images/photo/team.png" />
<span>王威</span>
<p>亚洲形体健身学院资深培训导师
亚洲形体健身学院基础理论课程导师
亚洲形体健身学院资深培训导师</p>
</a>
<a href="/" class="panel_more">查看更多</a>
</li>
<li class="panel" id="panel_5">
<a href="" class="inside" target="_blank">
<img width="230" height="295" alt="Alexander McQueen秋季" src="images/photo/team.png" />
<span>王威</span>
<p>亚洲形体健身学院资深培训导师
亚洲形体健身学院基础理论课程导师
亚洲形体健身学院资深培训导师</p>
</a>
<a href="/" class="panel_more">查看更多</a>
</li>
<li class="panel" id="panel_6">
<a href="" class="inside" target="_blank">
<img width="230" height="295" alt="Alexander McQueen秋季" src="images/photo/team.png" />
<span>王威</span>
<p>亚洲形体健身学院资深培训导师
亚洲形体健身学院基础理论课程导师
亚洲形体健身学院资深培训导师</p>
</a>
<a href="/" class="panel_more">查看更多</a>
</li>
</ul>
</div>
<a href="javascript:void(0);" class="next btn"></a>
</div>
</div>
</div>
<!--team end-->
<!--cert start-->
<div class="cert">
<div class="cert-head">
<h2>四大类、7种权威证书一次获得</h2>
<p>在您的职业生涯开始，R-STAR助您获得国家职业资格认证</p>
</div>
<div class="w1200">
<div class="container cert_list">
<div class="swiper-container swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide selected">证书</div>
<div class="swiper-slide">国职证书</div>
<div class="swiper-slide">国专证书</div>
<div class="swiper-slide">康复训练证书</div>
<div class="swiper-slide">普拉提证书</div>
<div class="swiper-slide">功能性证书</div>
<div class="swiper-slide">高级私教证书</div>
<div class="swiper-slide">训练营证书</div>
</div>
</div>
<!-- swiper2 -->
<div class="swiper-container swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-no-swiping">
<img src="images/bg/bg_06.png" alt="">
</div>
<div class="swiper-slide swiper-no-swiping">
<img src="images/bg/bg_09.jpg" alt="">
</div>
<div class="swiper-slide swiper-no-swiping">
<img src="images/bg/bg_06.png" alt="">
</div>
<div class="swiper-slide swiper-no-swiping">
<img src="images/bg/bg_06.png" alt="">
</div>
<div class="swiper-slide swiper-no-swiping">
<img src="images/bg/bg_06.png" alt="">
</div>
<div class="swiper-slide swiper-no-swiping">
<img src="images/bg/bg_06.png" alt="">
</div>
<div class="swiper-slide swiper-no-swiping">
<img src="images/bg/bg_06.png" alt="">
</div>
<div class="swiper-slide swiper-no-swiping">
<img src="images/bg/bg_06.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<!--cert end-->
<!--jiuye start-->
<div class="jiuye">
<div class="jiuye-head">
<h2>专业的团队 就业保障</h2>
<p>教学团队经过重重筛选，具有丰富的经验和专业知识，三大保障，为您提供贴心的就业服务</p>
</div>
<div class="w1200">
<div class="jiuye_info">
<h2>全国就业网络</h2>
<p>
覆盖全国的就业网络<br>
全国600多个城市的上万家<br>
健身品牌建立长期合作关系
</p>
</div>
<div class="jiuye_img">
<img src="images/photo/jiuye_img1.png" alt="">
</div>
<div class="jiuye_info">
<h2>毕业针对推荐工作</h2>
<p>
100%签订就业协议<br>
毕业根据个人意愿及素质测评<br>
针对性推荐工作
</p>
</div>
<div class="jiuye_img">
<img src="images/photo/jiuye_img2.png" alt="">
</div>
<div class="jiuye_info">
<h2>毕业跟踪指导</h2>
<p>
解答就业难题<br>
入职前开设就业指导课程,<br>
入职后定期联络回访
</p>
</div>
</div>
</div>
<!--jiuye end-->
<!--sign-up start-->
<div class="sign-up">
<div class="w1200">
<div class="sign-up-head">
<h2>现在报名</h2>
<p>更享四重好礼</p>
</div>
<div class="ih-item circle effect5">
<a href="#">
<div class="img"><img src="images/photo/sign1.png" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>凡12月25日 前报名<br>
即可免费
赠送<br>《产后功能恢复课程》</h3>
</div>
</div>
</a>
</div>
<div class="ih-item circle effect5">
<a href="#">
<div class="img"><img src="images/photo/sign2.png" alt="img"></div>
<div class="info">
<div class="info-back">
<h3><br>
同时享受<br>
学费优惠1000元
</h3>
</div>
</div>
</a>
</div>
<div class="ih-item circle effect5">
<a href="#">
<div class="img"><img src="images/photo/sign3.png" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>
前100名报名<br>
免费考取价值2000<br>元的
中国健美协会（CBBA）高级证书
</h3>
</div>
</div>
</a>
</div>
<div class="ih-item circle effect5">
<a href="#">
<div class="img"><img src="images/photo/sign4.png" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>
前100名报名<br>
免费考取价值2000<br>元的
中国健美协会（CBBA）高级证书
</h3>
</div>
</div>
</a>
</div>
</div>
<a href="" class="sign-up-more">查看更多</a>
</div>
<!--sign-up end-->
<!--three_icon start-->
<div class="three_icon">
<div class="w1200">
<div class="three_icon_list">
<span><img src="images/icon/icon1.png" alt=""></span>
<span>0元入学 百度钱包随意分期付款</span>
</div>
<div class="three_icon_list">
<span><img src="images/icon/icon2.png" alt=""></span>
<span>入学3天不满意 无条件全额退款</span>
</div>
<div class="three_icon_list">
<span><img src="images/icon/icon3.png" alt=""></span>
<span>零基础包教会 终身免费重修</span>
</div>
</div>
</div>
<!--three_icon end-->
<!--news start-->
<div class="news">
<div class="news_head">
<h2>健身相关资讯</h2>
<p>健身知识、健身心得、行业资讯一手新鲜</p>
</div>
<div class="w1200 news_list">
<dl>
<dt>2017-07-25</dt>
<dd>
<a href="">
<h2>费恩莱斯形象代言人，功夫影星元武教你泰拳实战技击</h2>
<p>泰拳实战技击课堂精彩回顾，简单实用的技击招式，可以防身 可以健身，热血沸腾的课堂一起操练一起呐喊，拳脚到肉的实战演练感触泰拳技击的魅力/p>
</a>
</dd>
</dl>
<dl>
<dt>2017-07-25</dt>
<dd>
<a href="">
<h2>费恩莱斯形象代言人，功夫影星元武教你泰拳实战技击</h2>
<p>泰拳实战技击课堂精彩回顾，简单实用的技击招式，可以防身 可以健身，热血沸腾的课堂一起操练一起呐喊，拳脚到肉的实战演练感触泰拳技击的魅力/p>
</a>
</dd>
</dl>
<dl>
<dt>2017-07-25</dt>
<dd>
<a href="">
<h2>费恩莱斯形象代言人，功夫影星元武教你泰拳实战技击</h2>
<p>泰拳实战技击课堂精彩回顾，简单实用的技击招式，可以防身 可以健身，热血沸腾的课堂一起操练一起呐喊，拳脚到肉的实战演练感触泰拳技击的魅力/p>
</a>
</dd>
</dl>
<dl>
<dt>2017-07-25</dt>
<dd>
<a href="">
<h2>费恩莱斯形象代言人，功夫影星元武教你泰拳实战技击</h2>
<p>泰拳实战技击课堂精彩回顾，简单实用的技击招式，可以防身 可以健身，热血沸腾的课堂一起操练一起呐喊，拳脚到肉的实战演练感触泰拳技击的魅力/p>
</a>
</dd>
</dl>
<dl>
<dt>2017-07-25</dt>
<dd>
<a href="">
<h2>费恩莱斯形象代言人，功夫影星元武教你泰拳实战技击</h2>
<p>泰拳实战技击课堂精彩回顾，简单实用的技击招式，可以防身 可以健身，热血沸腾的课堂一起操练一起呐喊，拳脚到肉的实战演练感触泰拳技击的魅力/p>
</a>
</dd>
</dl>
<dl>
<dt>2017-07-25</dt>
<dd>
<a href="">
<h2>费恩莱斯形象代言人，功夫影星元武教你泰拳实战技击</h2>
<p>泰拳实战技击课堂精彩回顾，简单实用的技击招式，可以防身 可以健身，热血沸腾的课堂一起操练一起呐喊，拳脚到肉的实战演练感触泰拳技击的魅力/p>
</a>
</dd>
</dl>
</div>
<a href="" class="news_more">查看更多</a>
</div>
<!--news end-->
<div class="footer">
<div class="w1200">
<div class="footer_left">
<h2>联系我们</h2>
<div class="footer_left_contact">
<span>
<p>上海市浦东新区川周公路2788号</p>
</span>
<span>
<p>4006 586 486</p>
</span>
<span>
<p>ruixing@rstarfit.com</p>
</span>
</div>
<div class="footer_left_ewm">
<span>微信公众号：</span>
<span><img src="images/photo/footer_ewm1.png" alt=""></span>
<span><img src="images/photo/footer_ewm2.png" alt=""></span>
</div>
</div>
<div class="footer_right">
<h2 class="text-right">留言</h2>
<form class="myform" action="" method="post" name="myform">
<div class="form-control">
<label for="txtname">您的姓名：</label>
<input type="text" id="txtname" name="txtname" required="required" placeholder="请输入您的姓名">
</div>
<div class="form-control">
<label for="txttel">您的电话：</label>
<input type="tel" id="txttel" name="txttel" required="required" placeholder="请输入您的电话">
</div>
<div class="form-control">
<label for="txtmail">您的邮箱：</label>
<input type="email" id="txtmail" name="txtmail" required="required" placeholder="请输入您的邮箱">
</div>
<div class="form-control">
<label for="txtadd">您的地址：</label>
<input type="address" id="txtadd" name="txtadd" required="required" placeholder="请输入您的地址">
</div>
<div class="form-control">
<label for="txtcontent">请您留言：</label>
<textarea id="txtcontent" name="txtcontent" cols="30" rows="10" placeholder="请输入您的姓名"></textarea>
</div>
<div class="form-control">
<label> </label>
<button type="submit" name="submit">
提交信息
</button>
</div>
</form>
</div>
<div class="clearfix"></div>
<p class="text-center">版权所有©2016-2020 上海锐星健身咨询有限公司 COPYRIGHT 2013-2017 WWW.RSTARFIT.COM 网站建设备案号：沪ICP备12002834号-1</p>
</div>
</div>
<!--head js-->
<script type="text/javascript">
$(function(){
$('.nav li').hover(function(){
$('span',this).stop().css('height','2px');
$('span',this).animate({
left:'0',
width:'100%',
right:'0'
},200);
},function(){
$('span',this).stop().animate({
left:'50%',
width:'0'
},200);
});
});
</script>
<!--banner-->
<script>
bannerListFn(
$(".banner"),
$(".img-btn-list"),
$(".left-btn"),
$(".right-btn"),
2000,
true
);
</script>
<!--team-->
<script type="text/javascript">
$(function(){
/*未元素的首尾添加补白*/
var $panels = $('#slider .scrollContainer > li');
var $parent=$panels.parent();//或许当前li的最近一级的父元素
var $length=$panels.length;//获取指定length值
var $first=$panels.eq(0).clone().addClass("panel cloned").attr("id",'panel_'+($length+1));//获取第一个元素并复制
var $last=$panels.eq($length-1).clone().addClass("cloned").attr("id",'panel_0');;//获取最后一个元素并复制
$parent.append($first);//将li序列中的第一个添加到ul元素中的最后一个 $("#slide02").scrollLeft(0);
$parent.prepend($last);//将li序列中的最后一个添加到ul元素中的第一个
var totalPanels = $(".scrollContainer").children().size();//所有子元素的数字，滚动元素的个数 7
var regWidth = $(".panel").css("width");//获取li元素的宽度
var regImgWidth = $(".panel img").css("width");//获取其中图片的宽度
var movingDistance = 205;//每次移动的距离
var curWidth = 220;//当前中间li的宽度为350px
var curHeight =442;//当前中间li的高度未312
var curImgWidth =220;
var curImgHeight =220;
var othersW =200;//其他li的宽度
var othersH =380;//高度
var othersImgW =200;//其他li的宽度
var othersImgH =200;//高度
var $panels = $('#slider .scrollContainer > li');//此处作用是将复制进来补白的元素重新赋值
var $container = $('#slider .scrollContainer');
$panels.css({'float' : 'left','position' : 'relative'});
$("#slider").data("currentlyMoving", false);//是否正在运动中
$container.css('width', (($panels[0].offsetWidth+25) * $panels.length) + 60 ).css('left','0');//计算容器的总的宽度 PS：25为margin值 offsetWidth
var scroll = $('#slider .scroll').css('overflow', 'hidden');
function returnToNormal(element) {//li元素返回到正常状态
$(element).animate({ width: othersW,height: othersH}).find("img").animate({width:othersImgW,height:othersImgH});
};
function growBigger(element) {//当前元素之间变大
$(element).addClass("current").animate({ width: curWidth,height:curHeight}).siblings().removeClass("current")
.end().find("img").animate({width:curImgWidth,height:curImgHeight})
}
//direction true = right, false = left
function change(direction) {
//if not at the first or last panel
if((direction && !(curPanel < totalPanels-2)) || (!direction && (curPanel <= 1))) {
return false;
}
//if not currently moving
if (($("#slider").data("currentlyMoving") == false)) {
$("#slider").data("currentlyMoving", true);
var next = direction ? curPanel + 1 : curPanel - 1;
var leftValue = $(".scrollContainer").css("left");
var movement = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
$(".scrollContainer").stop().animate({"left": movement}, function() {
$("#slider").data("currentlyMoving", false);
});
returnToNormal("#panel_"+curPanel);
growBigger("#panel_"+next);
curPanel = next;
//remove all previous bound functions
$("#panel_"+(curPanel+1)).unbind();
//go forward
$("#panel_"+(curPanel+1)).click(function(){ change(true); });
//remove all previous bound functions
$("#panel_"+(curPanel-1)).unbind();
//go back
$("#panel_"+(curPanel-1)).click(function(){ change(false); });
//remove all previous bound functions
$("#panel_"+curPanel).unbind();
}
}
// Set up "Current" panel and next and prev 设置当前元素和上下
growBigger("#panel_2");
var curPanel = 2;
$("#panel_"+(curPanel+1)).click(function(){ change(true);return false;});
$("#panel_"+(curPanel-1)).click(function(){ change(false);return false;});
//when the prev/next arrows are clicked
$("#slider .next").click(function(){ change(true);});
$("#slider .prev").click(function(){ change(false);});
$(window).keydown(function(event){//键盘方向键控制
switch (event.keyCode) {
case 13: //enter
$(".next").click();
break;
case 37: //prev arrow
$(".prev").click();
break;
case 39: //next arrow
$(".next").click();
break;
}
});
});
</script>
<!--cert-->
<script>
$(function() {
function setCurrentSlide(ele, index) {
$(".swiper1 .swiper-slide").removeClass("selected");
ele.addClass("selected");
}
var swiper1 = new Swiper('.swiper1', {
slidesPerView: 8,
paginationClickable: true,
spaceBetween: 10,
freeMode: true,
loop: false,
onTab: function(swiper) {
var n = swiper1.clickedIndex;
}
});
swiper1.slides.each(function(index, val) {
var ele = $(this);
ele.on("click", function() {
setCurrentSlide(ele, index);
swiper2.slideTo(index, 500, false);
});
});
var swiper2 = new Swiper('.swiper2', {
direction: 'horizontal',
loop: false,
// effect : 'fade',//淡入
//effect : 'cube',//方块
//effect : 'coverflow',//3D流
effect : 'flip',//3D翻转
autoHeight: true,
onSlideChangeEnd: function(swiper) {
var n = swiper.activeIndex;
setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
swiper1.slideTo(n, 500, false);
}
});
});
</script>
<script>
$(function () {
$(".con-four").hover(function() {
$(this).find(".txt-four").stop().animate({"left": 0});
}, function() {
$(this).find(".txt-four").stop().animate({"left":-380});
})
});
</script>
