直接使用代码
<style>
/* 公共顶部样式 */
#nav{background: #12b7f5;border-bottom:1px solid #83c8ed;position:fixed;top:0; width:100%; z-index: 9999;}
.mask{width:100%; height:100%; position:fixed; top:80;min-height:2000px; z-index: 9988; display:none}
.mask2{width:100%; height:80px; position:absolute; top:0;min-height:80px; z-index: 9988; display:none }
#nav .nav-logo{width:20%;float:left;}
#nav .nav-logo img{margin-left:4px;width:40px;margin-top:10px;}
#nav .nav-title{font-size:16px; color:#fff;line-height:20px;padding-top:20px;text-align:center;float: left;width:60%; }
#nav .nav-bar{width:20%; position:relative;float:right;text-align: right}
#nav .nav-bar img.nav-line{float:right;margin:15px; margin-top:22px;}
#nav .nav-bar .nav-content{display:none; position:absolute; top:60px; right:0px;border-radius:3px; width:100px; z-index: 9999; background:#333; }
#nav .nav-bar .nav-content .arrow{display:block; float:right;margin-right:16px;margin-top:-10px;}
#nav .nav-bar .nav-content ul{margin-top:8px;text-align: left;}
#nav .nav-bar .nav-content li a{ color:#ffffff; display:inline-block; line-height:30px; padding-left:10px;}
/* 轮播图定制 */
#carousel-example-generic{margin-top:55px;}
.carousel-indicators{ bottom:-6px; }
.carousel-indicators li{ background:#eee; border:none; }
.carousel-indicators li.active{ background:#e70}
/* 首页--德福简介 */
#index-introduction{clear:both;padding:10px 6px;border-bottom:10px solid #f5f5f5}
#index-introduction .introduction-content{padding:8px;border-left:3px solid #f5f5f5;color:#333!important;text-indent:2em}
/* 首页-关键词区 */
#index-keywords .kuai{margin:15%;width:70%;padding-top:70%;position:relative}
#index-keywords .kuai p{width:100%;height:100%;background:#f6f4f5;border-radius:50%;position:absolute;top:0;left:0;text-align:center;font-size:18px;padding-top:40%;color:#666}
#index-keywords .kuai p.line2{padding-top:33%}
/* 首页-专家 */
#index-expert{border-top:10px solid #f5f5f5}
#index-expert .list-expert .kuai{padding:10px;border-bottom:1px solid #efefef;clear:both;color:#333!important}
#index-expert .list-expert .expert-img{width:100px;height:100px;border-radius:50px}
a.com-index-more{display:block;text-align:center;color:#12b7f5;line-height:45px}
/* 首页-关于我们 */
#index-about{border-top:10px solid #f5f5f5;}
#index-about .kuai{padding:10px 0; border-bottom:1px solid #efefef;clear:both;}
#index-about .kuai .about-info{padding-left:8px;}
#index-about .kuai .about-info h5{padding:0;margin:0}
#index-about .kuai .about-info p{color:#666;padding-top:10px;}
/* 首页-底部 */
footer{background:#eceaeb}
#index-agency{border:1px solid #efefef;padding-bottom:10px}
#index-links{border:1px solid #efefef;padding-bottom:10px}
#index-kefu .qq{padding: 10px; }
#index-kefu a{color:#666}
#kefu{width:90px; position:fixed; right:-5px;bottom:80px;}
.com-list-link{padding-top:10px;}
.com-list-link a{display:inline-block; margin:0 8px; color:#666}
</style>
<!-- 导航条 -->
<div id="nav" class="container">
<div class="mask2"></div><!-- 导航遮罩层 -->
<div class="nav-logo">
<a href="/m/index">
<img src="/Public/images/img11.jpg" class="logo" />
</a>
</div>
<div class="nav-title">
心理咨询-德道幸福
</div>
<div class="nav-bar">
<img src="/Public/images/code/200305/line.png" width="30" class="nav-line" />
<div class="nav-content">
<img src="/Public/images/code/200305/arrow.png" class="arrow" />
<ul>
<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>
<li><a href="">招商加盟</a></li>
<li><a href="">联系我们</a></li>
<li><a href="/m/login">登录</a><a href="/m/zhuce">注册</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="mask"></div><!-- 导航遮罩层 -->
<script type="text/javascript">
$(function () {
//手机导航显示隐鲹操作
var a = true;
$('.nav-line').click(function () {
a = !a;
console.log(a)
if (a) {
$('.nav-content').hide();
} else {
$('.nav-content').show();
$('.mask').show();
$('.mask2').show();
}
})
//单击页面导航区域以外可关闭导航操作
$('.mask').click(function (e) {
$('.nav-content').hide();
$('.nav-content-blue').hide();
$('.mask').hide();
$('.mask2').hide();
b = true;
a = true;
console.log(b)
});
//单击页面导航区域以外可关闭导航操作
$('.mask2').click(function (e) {
$('.nav-content').hide();
$('.nav-content-blue').hide();
$('.mask').hide();
$('.mask2').hide();
b = true;
a = true;
console.log(b)
});
//页面滚动关闭导航
$(document).scroll(function (e) {
$('.nav-content').hide();
$('.nav-content-blue').hide();
$('.mask').hide();
$('.mask2').hide();
a = true;
b = true;
});
//轮播图手指滑动支持-----------------------------------------------------------
// 获取手指在轮播图元素上的一个滑动方向(左右)
// 获取界面上轮播图容器
var $carousels = $('.carousel');
var startX, endX;
// 在滑动的一定范围内,才切换图片
var offset = 50;
// 注册滑动事件
$carousels.on('touchstart', function (e) {
// 手指触摸开始时记录一下手指所在的坐标x
startX = e.originalEvent.touches[0].clientX;
});
$carousels.on('touchmove', function (e) {
// 目的是:记录手指离开屏幕一瞬间的位置 ,用move事件重复赋值
endX = e.originalEvent.touches[0].clientX;
});
$carousels.on('touchend', function (e) {
//console.log(endX);
//结束触摸一瞬间记录手指最后所在坐标x的位置 endX
//比较endX与startX的大小,并获取每次运动的距离,当距离大于一定值时认为是有方向的变化
var distance = Math.abs(startX - endX);
if (distance > offset) {
//说明有方向的变化
//根据获得的方向 判断是上一张还是下一张出现
$(this).carousel(startX > endX ? 'next' : 'prev');
}
})
//-------------------------------------------------------------------
})
</script>
<!-- 轮播图 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/Public/images/code/200305/lunbo1.png" alt="..." width='100%'>
</div>
<div class="item">
<img src="/Public/images/code/200305/lunbo2.png" alt="..." width='100%'>
</div>
<div class="item">
<img src="/Public/images/code/200305/lunbo3.png" alt="..." width='100%'>
</div>
</div>
</div>
<div class="clear"></div>
<!-- 德道幸福简介 -->
<div class="container" id="index-introduction">
<div class="col-xs-4 pm">
<img src="/Public/images/code/200305/about.png" width="90" class="center-block" />
<h4 class="text-center"> 德道幸福简介</h4>
</div>
<div class="col-xs-8">
<a href="/m/article_defu/88">
<div class="introduction-content">
北京德道幸福生活心理医学研究院(简称“德道幸福”)始创于2001年,由祝正宇 先生创立,是中国目前还在发展的最早的心理咨询机构。工作内容:心理研究和......
<!-- 北京德道幸福生活心理医学研究院(简称“德道幸福”)始创于2001年,由祝正宇 先生创立,是中国目前还在发展的最早的心理咨询机构?工作内容:心理研究和心理咨 询、心理治疗?服务对象:精英群体和成功人士?目标:成为中国乃至于世界华人zui 好的心理咨询机构?目的:消除痛苦品尝幸福?手段:运用幸福心理学。 -->
>>
</div>
</a>
</div>
</div>
<!-- 关键词区 -->
<div class="container" id="index-keywords">
<h1 class=" pad-left10 h3"> 心理咨询</h1>
<hr />
<div class="col-xs-6 pm">
<a href="/m/index_question/1">
<div class="kuai">
<p>人际关系</p>
</div>
</a>
</div>
<div class="col-xs-6 pm">
<a href="/m/index_question/2">
<div class="kuai">
<p class="line2">儿童<br />青少年</p>
</div>
</a>
</div>
<div class="col-xs-6 pm">
<a href="/m/index_question/3">
<div class="kuai">
<p>婚姻恋爱</p>
</div>
</a>
</div>
<div class="col-xs-6 pm">
<a href="/m/index_question/4">
<div class="kuai">
<p class="line2">强迫症<br />抑郁 焦虑</p>
</div>
</div>
</div>
<!-- 德道幸福专家 -->
<div class="container" id="index-expert">
<div class="list-expert">
<a href="/m/expert_info/9">
<div class="kuai">
<div class="col-xs-4 pm">
<img src="http://cdn.dxw9.com/Uploads/Public/Uploads/2018-12-24/5c20bb5f4148d.jpg"
class="expert-img" />
</div>
<div class="col-xs-8">
<h4>李春艳</h4>
德道幸福推荐咨询师北京德道幸福生活心理医学研究院儿童青少年研...
</div>
<div class="clear"></div>
</div>
</a><a href="/m/expert_info/220">
<div class="kuai">
<div class="col-xs-4 pm">
<img src="http://cdn.dxw9.com/Uploads/Public/Uploads/2017-05-09/5911687f88496.jpeg"
class="expert-img" />
</div>
<div class="col-xs-8">
<h4>程晓君</h4>
北京德道幸福生活心理医院的专职心理咨询师国家二级心理咨询师意...
</div>
<div class="clear"></div>
</div>
</a><a href="/m/expert_info/10">
<div class="kuai">
<div class="col-xs-4 pm">
<img src="http://cdn.dxw9.com/Uploads/Public/Uploads/2017-12-27/5a4346618327a.jpg"
class="expert-img" />
</div>
<div class="col-xs-8">
<h4>王海玲</h4>
北京德道幸福生活心理医学研究院神经症研究所所长神经症心理专家...
</div>
<div class="clear"></div>
</div>
</a>
<a class="com-index-more" href="/m/morewuxiao?leixing=8">更多专家...</a>
</div>
<!-- 关于德福 -->
<div id="index-about">
<div class="list-about">
<div class="kuai">
<div class="col-xs-3 pm">
<a href="/m/article_defu/125"><img src="/Public/images/img43.jpg"
width="100%"/></a>
</div>
<div class="col-xs-9">
<div class="about-info">
<a href="/m/article_defu/articleId/125">
<h5>德道幸福品牌介绍</h5>
<p>一、品牌简介 德道幸福是心理咨询行业的知名品牌,是...</p>
</a>
</div>
</div>
<div class="clear"></div>
</div>
<div class="kuai">
<div class="col-xs-3 pm">
<a href="/m/article_defu/125"><img src="/Public/images/img43.jpg"
width="100%"/></a>
</div>
<div class="col-xs-9">
<div class="about-info">
<a href="/m/article_defu/articleId/125">
<h5>德道幸福品牌介绍</h5>
<p>一、品牌简介 德道幸福是心理咨询行业的知名品牌,是...</p>
</a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<a class="com-index-more" href="/m/list_defu/22">查看更多...</a>
</div>
</div>
<footer>
<!-- 友情链接 -->
<div class="container" id="index-links">
<div class="com-list-link">
<a>热点关注 : </a>
<a href="/m/index_question/3">婚姻</a>
<a href="/m/list_defu/42">心理医生</a>
<a href="/m/list_question/11">同性恋</a>
<a href="/m/list_question/3">厌学</a>
<a href="/m/list_question/32">挽回</a>
</div>
</div>
<!-- 加盟及分支机构 -->
<div class="container" id="index-agency">
<div class="com-list-link">
<a>友情链接 : </a>
<a href="/m/index_city/CityID/3">郑州心理咨询</a><a href="/m/index_city/CityID/4">济南心理咨询</a><a
href="/m/index_city/CityID/5">北京心理咨询</a><a href="/m/index_city/CityID/6">昆明心理咨询</a><a
href="/m/index_city/CityID/7">西安心理咨询</a> </div>
</div>
<!-- 在线客服 -->
<div class="container" id="index-kefu">
<div class="qq">
<a>在线客服 : </a>
<a href="http://wpa.qq.com/msgrd?v=3&uin=1262717595&site=qq&menu=yes"><img border="0"
src="http://wpa.qq.com/pa?p=2:1262717595:51"
alt="点击这里给我发消息" width="60" /></a>
<a href="http://wpa.qq.com/msgrd?v=3&uin=2211516185&site=qq&menu=yes"><img border="0"
src="http://wpa.qq.com/pa?p=2:2211516185:51"
alt="点击这里给我发消息" width="60" /></a>
<a href="http://wpa.qq.com/msgrd?v=3&uin=3114425201&site=qq&menu=yes"><img border="0"
src="http://wpa.qq.com/pa?p=2:3114425201:51"
alt="点击这里给我发消息" width="60" /></a>
<a href="http://wpa.qq.com/msgrd?v=3&uin=3571323788&site=qq&menu=yes"><img border="0"
src="http://wpa.qq.com/pa?p=2:3571323788:51"
alt="点击这里给我发消息" width="60" /></a>
<div>
<a>电话:13384008949 0371-87539659<br />
地址:郑州市管城区紫荆山路与商城路交叉口北100米华林.新时代广场1430
</a>
</div>
</div>
</div>
</footer>
<div id='kefu'><a href="/m/contact"><img src='/Public/images/icon/kefu.png' width="100%"></a></div>