QQ客服侧边栏导航

浏览：904次- 评论：1次- 发布时间：2017-11-24

Html

Css

@charset "utf-8";
	* {
	padding:0;
	margin:0;
}
html,body {
	font-size:12px;
	font-family:"微软雅黑";
	outline:none;
	color:#666;
	background:#fff;
}
ul,ol {
	list-style:none;
}
img {
	border:none;
	outline:none;
}
a {
	color:#666;
	text-decoration:none;
	outline:none;
}
a:hover {
	color:#e8431f;
}
/*浮动客服*/
#floatDivBoxs {
	width:170px;
	background:#fff;
	position:fixed;
	top:100px;
	right:0;
	z-index:999;
}
#floatDivBoxs .floatDtt {
	width:100%;
	height:45px;
	line-height:45px;
	background:#f08326;
	color:#fff;
	font-size:18px;
	text-indent:22px;
	position:relative;
}
#floatDivBoxs .floatDqq {
	padding:0 14px;
}
#floatDivBoxs .floatDqq li {
	height:45px;
	line-height:45px;
	font-size:15px;
	border-bottom:1px solid #e3e3e3;
	padding:0 0 0 50px;
}
#floatDivBoxs .floatDtxt {
	font-size:18px;
	color:#333;
	padding:12px 14px;
}
#floatDivBoxs .floatDtel {
	padding:0 0 15px 10px;
}
#floatDivBoxs .floatDtel img {
	display:block;
}
#floatDivBoxs .floatDbg {
	width:100%;
	height:20px;
	background:url(http://www.jq22.com/img/cs/500x500-1.png) no-repeat;
	box-shadow:-2px 0 3px rgba(0,0,0,0.25);
}
.floatShadow {
	background:#fff;
	box-shadow:-2px 0 3px rgba(0,0,0,0.25);
}
#rightArrow {
	width:50px;
	height:45px;
	background:url(http://www.jq22.com/img/cs/500x500-1.png) no-repeat;
	position:fixed;
	top:100px;
	right:170px;
	z-index:999;
}
#rightArrow a {
	display:block;
	height:45px;
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3