模板描述：绿色扁平风格 治疗颈椎公司 企业网站，绿色扁平风格的治疗颈椎公司企业网站源码下载html模板下载
代码结构
1. 引入CSS
<link rel="stylesheet" href="static/css/style.css">
2. 引入JS
<script src="static/js/jquery.js"></script> <script src="static/js/jquery.flexslider-min.js"></script> <script src="static/js/scrollReveal.min.js"></script>
3. HTML代码
<div class="pub_top">
<div class="wrap">
<div class="left fl">
<img src="static/images/logo.jpg" alt="" class="fl big">
<img src="static/images/logo_white.png" alt="" class="fl sm">
</div>
<div class="right fr">
<ul>
<li class="on">
<a href="#">首页</a>
</li>
<li class="company_intro">
<a href="#">公司简介</a>
<div class="list none">
<ul>
<li><a href="#">关于伟益</a></li>
<li><a href="#">团队风采</a></li>
<li><a href="#">荣誉资质</a></li>
</ul>
</div>
</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>
<div class="clear"></div>
</ul>
<span class="menu-toggle"><em></em></span>
</div>
<div class="clear"></div>
</div>
<div class="menulist none">
<div class="wrap pub_list align-center space-between">
<div class="left">
<div class="title">公司介绍</div>
<div class="content mb20">
<p>会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交</p>
</div>
<!--<div class="more">-->
<!--<a href="#">查看更多<i></i></a>-->
<!--</div>-->
</div>
<div class="right">
<div class="pic"></div>
</div>
</div>
</div>
</div>
<div class="sm_menu">
<ul>
<li>
<a href="#">首页</a>
</li>
<li class="">
<a href="#">公司简介</a>
<div class="list none">
<ul>
<li><a href="#">关于伟益</a></li>
<li><a href="#">团队风采</a></li>
<li><a href="#">荣誉资质</a></li>
</ul>
</div>
</li>
<li>
<a href="#">项目介绍</a>
</li>
<li>
<a href="#">招商加盟</a>
</li>
<li>
<a href="#">活动资讯</a>
</li>
<li class="on">
<a href="#">案例展示</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="idx_banner">
<div class="flexslider">
<ul class="slides">
<li><a href="#"
style="background: url(static/images/idx_banner.png) no-repeat center center;background-size: cover"></a>
</li>
<li><a href="#"
style="background: url(static/images/idx_banner.png) no-repeat center center;background-size: cover"></a>
</li>
<li><a href="#"
style="background: url(static/images/idx_banner.png) no-repeat center center;background-size: cover"></a>
</li>
</ul>
</div>
</div>
<div class="company_title">
<div class="">
<a href="#" class="on">服务项目</a>
</div>
</div>
<div class="idx">
<!--<div class="wrap">-->
<div class="idx_box server">
<div class="idx_title" data-sr="move 100px, over .8s,wait .2s, enter bottom">服务项目</div>
<div class="content">
<div class="detail pub_list" data-sr="move 100px, over .8s,wait .2s, enter bottom">
<div class="pub_list_bd">
<div class="pic">
<div style="background: url(static/images/idx_pic.png)no-repeat center center;background-size: cover;"></div>
</div>
</div>
<div class="pub_list_bd text">
<h3>生命知数</h3>
<p class="black6 elli_line">脊柱号称人的第二生命线’是人的‘支柱与栋梁’，内连五脏六腑外接四肢百骸脊柱损害是‘百病之源’和七十多种疾病相关。忽视对脊脊柱号称人的第二生命线脊柱号称人的第二生命线脊柱号称人的第二生命线脊柱号称人的第二生命线脊柱号称人的第二生命线脊柱号称人的第二生命线... </p>
<a href="#" class="more">查看详情</a>
</div>
</div>
<div class="detail second_det pub_list" data-sr="move 100px, over .8s,wait .2s, enter bottom">
<div class="pub_list_bd text">
<div class="text_wrap">
<h3>商学院</h3>
<p class="black6 elli_line">脊柱号称人的第二生命线’是人的‘支柱与栋梁’，内连五脏六腑外接四肢百骸脊柱损害是‘百病之源’和七十多种疾病相关。忽视对脊... </p>
<a href="#" class="more">查看详情</a>
</div>
</div>
<div class="pub_list_bd">
<div class="pic">
<div style="background: url(static/images/idx_pic.png)no-repeat center center;background-size: cover;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="idx_box activity">
<div class="wrap">
<div class="idx_title" data-sr="move 100px, over .8s,wait .2s, enter bottom">活动资讯</div>
<div class="content pub_list">
<div class="left" data-sr="move 100px, over .8s,wait .2s, enter left">
<div class="box pub_list">
<div class="pic">
<div style="background: url(static/images/case.png)no-repeat center;background-size: cover;"></div>
</div>
<div class="text ml20 pub_list_bd pub_list space-between">
<h3>如何确认孩子体位姿势有问题 </h3>
<p class="black9">生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交......</p>
<a href="#" class="more">更多问答</a>
</div>
</div>
<div class="box pub_list">
<div class="pic">
<div style="background: url(static/images/case.png)no-repeat center;background-size: cover;"></div>
</div>
<div class="text ml20 pub_list_bd pub_list space-between">
<h3>如何确认孩子体位姿势有问题 </h3>
<p class="black9">生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交......</p>
<a href="#" class="more">更多问答</a>
</div>
</div>
</div>
<div class="right promotion" data-sr="move 100px, over .8s,wait .2s, enter right">
<div class="promotion_box pub_list align-center">
<div class="fl">
<p class="day">13</p>
<p class="date">12-13</p>
</div>
<div class="text">
<a href="#" class="title">如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题</a>
<p class="introduction black9">
生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交......</p>
</div>
<div class="clear"></div>
</div>
<div class="promotion_box pub_list align-center">
<div class="fl">
<p class="day">13</p>
<p class="date">12-13</p>
</div>
<div class="text">
<a href="#" class="title">如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题</a>
<p class="introduction black9">
生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交......</p>
</div>
<div class="clear"></div>
</div>
<div class="promotion_box pub_list align-center">
<div class="fl">
<p class="day">13</p>
<p class="date">12-13</p>
</div>
<div class="text">
<a href="#" class="title">如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题</a>
<p class="introduction black9">
生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交......</p>
</div>
<div class="clear"></div>
</div>
<div class="promotion_box pub_list align-center">
<div class="fl">
<p class="day">13</p>
<p class="date">12-13</p>
</div>
<div class="text">
<a href="#" class="title">如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题</a>
<p class="introduction black9">
生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数</p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="content none sm_content">
<div class="left" data-sr="move 100px, over .8s,wait .2s, enter bottom">
<div class="box fl">
<div class="text pub_list_bd">
<h3>如何确认孩子体位姿势有问题 </h3>
<p class="black9 elli_line">生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交......</p>
</div>
<div class="pic">
<div style="background: url(static/images/case.png)no-repeat center;background-size: cover;"></div>
</div>
</div>
<div class="box fl">
<div class="text pub_list_bd">
<h3>如何确认孩子体位姿势有问题 </h3>
<p class="black9 elli_line">生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交......</p>
</div>
<div class="pic">
<div style="background: url(static/images/case.png)no-repeat center;background-size: cover;"></div>
</div>
</div>
<div class="clear"></div>
<a href="#" class="more">更多问答</a>
</div>
<div class="right promotion" data-sr="move 100px, over .8s,wait .2s, enter bottom">
<div class="promotion_box pub_list align-center">
<div class="fl">
<p class="day">13</p>
<p class="date">12-13</p>
</div>
<div class="text">
<a href="#" class="title">如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题</a>
<p class="introduction black9 elli_line">
生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交......</p>
</div>
<div class="clear"></div>
</div>
<div class="promotion_box pub_list align-center">
<div class="fl">
<p class="day">13</p>
<p class="date">12-13</p>
</div>
<div class="text">
<a href="#" class="title">如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题</a>
<p class="introduction black9 elli_line">
生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交......</p>
</div>
<div class="clear"></div>
</div>
<div class="promotion_box pub_list align-center">
<div class="fl">
<p class="day">13</p>
<p class="date">12-13</p>
</div>
<div class="text">
<a href="#" class="title">如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题</a>
<p class="introduction black9 elli_line">
生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交会成功召开生命知数项目交......</p>
</div>
<div class="clear"></div>
</div>
<div class="promotion_box pub_list align-center">
<div class="fl">
<p class="day">13</p>
<p class="date">12-13</p>
</div>
<div class="text">
<a href="#" class="title">如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题如何确认孩子体位姿势有问题</a>
<p class="introduction black9 elli_line">
生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数项目交生命知数项目交流会成功召开生命知数</p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div class="idx_box idx_join">
<div class="idx_title" data-sr="move 100px, over .8s,wait .2s, enter bottom">招商加盟</div>
<img src="static/images/join_idx.png" alt="" data-sr="move 100px, over .8s,wait .2s, enter bottom">
</div>
<div class="idx_box idx_product">
<div class="idx_title" data-sr="move 100px, over .8s,wait .2s, enter bottom">案例介绍</div>
<div class="content">
<div class="wrap">
<a href="#" class="box" data-sr="move 100px, over .8s,wait .2s, enter bottom">
<div class="box-wrap">
<h3>如何确认孩子体位姿势有问题 </h3>
<p class="black9 elli_line">生命知数项目交流会成功召开生命知数 项目交流会成功召开生命知数项目交流会成功召开生命知数项目交......</p>
<div class="pic">
<div style="background: url(static/images/case.png)no-repeat center;background-size: cover;"></div>
</div>
</div>
</a>
<a href="#" class="box" data-sr="move 100px, over .8s,wait .3s, enter bottom">
<div class="box-wrap">
<h3>如何确认孩子体位姿势有问题 </h3>
<p class="black9 elli_line">生命知数项目交流会成功召开生命知数 项目交流会成功召开生命知数项目交流会成功召开生命知数项目交......</p>
<div class="pic">
<div style="background: url(static/images/case.png)no-repeat center;background-size: cover;"></div>
</div>
</div>
</a>
<a href="#" class="box" data-sr="move 100px, over .8s,wait .4s, enter bottom">
<div class="box-wrap">
<h3>如何确认孩子体位姿势有问题 </h3>
<p class="black9 elli_line">生命知数项目交流会成功召开生命知数 项目交流会成功召开生命知数项目交流会成功召开生命知数项目交......</p>
<div class="pic">
<div style="background: url(static/images/case.png)no-repeat center;background-size: cover;"></div>
</div>
</div>
</a>
<a href="#" class="box" data-sr="move 100px, over .8s,wait .5s, enter bottom">
<div class="box-wrap">
<h3>如何确认孩子体位姿势有问题 </h3>
<p class="black9 elli_line">生命知数项目交流会成功召开生命知数 项目交流会成功召开生命知数项目交流会成功召开生命知数项目交......</p>
<div class="pic">
<div style="background: url(static/images/case.png)no-repeat center;background-size: cover;"></div>
</div>
</div>
</a>
<div class="clear"></div>
<a href="#" class="more" data-sr="move 100px, over .8s,wait .5s, enter bottom">更多案例</a>
</div>
</div>
</div>
<!--</div>-->
</div>
<div class="company_footer">
<div class="wrap pub_list align-center bigger_footer">
<div class="logo">
<img src="static/images/logo_white.png" class="big">
<img src="static/images/logo_white_sm.png" class="sm">
</div>
<div class="text pub_list_bd">
<div>
<p>地址：北京省海淀区****街****号</p>
<p>电话：0431-0000000 / 8888888</p>
<p>传真：0431-00000</p>
<p>邮箱：0000000@136.com</p>
<p><a href="#">网址：www12linhangbaojie.com</a></p>
</div>
<div class="copy">Copyright © 2015 版权所有 建议使用 IE6.0 以上浏览器 1024*768及以上分辨率 北京ICP备12</div>
</div>
<div class="fr">
<img src="static/images/qrcode.jpg">
</div>
<div class="clear"></div>
</div>
<div class="wrap phone_set">
<div class="logo"><img src="static/images/logo_white.png"></div>
<div class="content pub_list align-center">
<div class="text fl">
<p>地址：北京省海淀区****街****号</p>
<p>电话：0431-0000000 / 8888888</p>
<p>传真：0431-00000</p>
<p>邮箱：0000000@136.com</p>
<p><a href="#">网址：www12linhangbaojie.com</a></p>
</div>
<div class="fl">
<img src="static/images/qrcode.jpg">
</div>
<div class="clear"></div>
</div>
<div class="copy" style="text-align: center">Copyright © 2015 版权所有 建议使用 IE6.0 以上浏览器 1024*768及以上分辨率 北京ICP备12
</div>
</div>
</div>
<div class="bottom_bar pub_list">
<a href="#" class="bar pub_list_bd">
<i class="ico_index"></i>
<p>首页</p>
</a>
<a class="bar pub_list_bd" href="tel:15810283076">
<i class="ico_tel"></i>
<p>招商咨询</p>
</a>
<a href="#" class="bar pub_list_bd last">
<i class="ico_order"></i>
<p>在线预约</p>
</a>
</div>
<script>
window.sr = new scrollReveal({
//reset: true,
move: '200px',
mobile: true
});
$(function () {
$('.flexslider').flexslider({ pauseOnAction: false,directionNav: false,slideshowSpeed: 5000});
$('.company_intro,.menulist,.list').mouseover(function () {
$('.list').show()
$('.menulist').show()
$('.pub_top .right > ul > li').eq(1).addClass('on')
})
$('.company_intro,.menulist,.list').mouseleave(function () {
$('.list').hide()
$('.menulist').hide()
$('.pub_top .right > ul > li').eq(1).removeClass('on')
})
$('.menu-toggle').click(function () {
$('.sm_menu').toggleClass('on')
if($('.sm_menu').hasClass('on')){
$('.menu-toggle em').css('background-image','url(static/images/close.png)')
}else{
$('.menu-toggle em').css('background-image','url(static/images/menu.png)')
}
})
$('.icon_share').click(function () {
var mydom = $('.company_case .share .fr .fr .sharelist'),
mydomA = $('.company_case .share .fr .fr .sharelist a')
if (mydom.hasClass('on')) {
mydom.removeClass('on')
mydom.hide()
mydomA.hide()
} else {
mydom.addClass('on')
mydom.show()
mydomA.show()
}
})
})
</script>
