```
<div class="float-sidebar last" bi_parent_name="floatSidebar" >
<a bi_name="悬浮广告" class="float-bar-ad" id="activity_spring" href="悬浮广告图片链接" target="_blank" style="background-image: url(悬浮广告图片);width: 48px;height: 135px;display:none" ></a>
<div class="span shown-btn">
<span class="dot"></span>
</div>
<ul class="float-bar-nav">
<li class="item tel"><span class="icons-float-bar f1"></span>
<p>
咨询<br> 反馈
</p>
<div class="sub-nav-layer">
<div class="sub-nav-main">
<div class="sub-inner inner">
<a href="#售前咨询链接" target="_blank"> <span class="icons-float-bar f3"></span>
<p class="title">售前咨询</p>
</a> <a class="info" href="tel:售前咨询号码">售前咨询号码</a>
</div>
<div class="sub-inner">
<a class="smartQA" href="客服沟通链接" target="_blank"> <span class="icons-float-bar f2"></span>
<p class="title">智能客服</p>
</a>
</div>
<div class="sub-inner">
<a href="#意见反馈链接" target="_blank">
<span class="icons-float-bar f5"></span>
<p class="title">意见反馈</p>
</a>
</div>
</div>
</div></li>
<li class="item to-top-btn"><a href="#toTop"><span class="icons-float-bar to-top"></span></a></li>
</ul>
</div>
<style>
/*--- float bar start ---*/
.icons-float-bar{
width: 24px;
height: 24px;
display: inline-block;
vertical-align: middle;
background: url(http://bk.image.styleweb.com.cn/2018/10/23/3753_jnlkiihc.png?imageView2/0/w/390) 0 0 no-repeat;
}
.icons-float-bar.f1 {
background-position: 0 0;
}
.icons-float-bar.f2 {
background-position: -24px 0;
}
.icons-float-bar.f3 {
background-position: -48px 0;
}
.icons-float-bar.f4 {
background-position: -72px 0;
}
.icons-float-bar.f5 {
background-position: -96px 0;
}
.icons-float-bar.to-top {
background-position: -144px 0;
}
@media(max-width:1023px){
.icons-float-bar{
background-image: url(http://bk.image.styleweb.com.cn/2018/10/23/3753_jnlkiih6.png?imageView2/0/w/390);
background-size: auto 100%;
}
}
.float-bar-nav .item:hover>a .icons-float-bar{
opacity: 1;
}
.sub-inner :hover .icons-float-bar{
opacity: 1;
}
.page-nav-btn {
width: 25px;
height: 2px;
display: inline-block;
vertical-align: middle;
background-color: white;
position: relative;
}
.page-nav-btn:before,
.page-nav-btn:after {
content: "";
border-bottom: 2px solid white;
display: inline-block;
width: 25px;
position: absolute;
top: -9px;
left: 0;
}
.page-nav-btn:after {
top: auto;
bottom: -9px;
}
.float-sidebar {
position: fixed;
z-index: 98;
bottom: 20px;
right: 20px;
}
.float-bar-nav >.item{
background-color: white;
text-align: center;
line-height: 48px;
width: 48px;
height: 48px;
font-size: 0;
/*border: 1px solid #d4d5d7;*/
transition: background-color .3s ease-out;
}
.float-bar-nav >.item.tel{
height: auto;
margin-bottom: 10px;
background-color: #e41e2b;/*第一个按钮颜色*/
line-height: 0;
cursor: default;
}
.float-bar-nav >.item.tel > .icons-float-bar{
margin: 12px auto;
}
.float-bar-nav >.item.tel > p {
position: relative;
padding: 10px 16px;
background-color: white;
font-size: 14px;
color: #333;
line-height: 16px;
text-align: center;
}
.float-bar-nav >.item.tel > p:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 3px;
height: 3px;
margin-top: -1px;
margin-left: -1px;
border-radius: 50%;
background-color: #333;
}
.float-bar-nav >.item.to-top-btn:hover .to-top{
background-position: -120px 0;
}
.float-bar-nav >.item.tel:hover {
background-color: #F24651; /*第一个按钮悬浮颜色*/
}
.float-bar-nav >.item.to-top-btn {
visibility: hidden;
opacity: 0;
transition: opacity .3s ease-out;
}
.show-totop .float-bar-nav >.item.to-top-btn {
visibility: visible;
opacity: 1;
}
.float-bar-nav .item {
position: relative;
box-shadow: 0 4px 10px 0 rgba(138, 141, 147, 0.2);
}
.float-bar-nav .sub-nav-layer {
position: absolute;
top: 0;
right: 100%;
padding-right: 5px;
font-size: 14px;
opacity: 0;
visibility: hidden;
transform: scale(.95);
transform-origin: right;
transition: opacity .4s, transform .3s ease-out;
}
.float-bar-nav .item:hover .sub-nav-layer{
opacity: 1;
transform: scale(1);
visibility: visible;
}
.float-bar-nav .page-nav .sub-nav-layer {
position: fixed;
right: 94px;
bottom: 90px;
top: auto;
min-height: 292px;
}
.oldIE .float-bar-nav .sub-nav-layer {
visibility: hidden;
}
.float-bar-nav .page-nav-list {
/*margin: 10px;*/
padding: 20px 0;
font-size: 14px;
width: 160px;
background-color: white;
text-align: left;
box-shadow: 0px 5px 8px rgba(6,0,1,0.1)
}
.oldIE .float-bar-nav .page-nav-list {
border: 1px solid #d4d5d7;
}
.float-bar-nav .page-nav-list .item {
padding: 15px 30px;
list-style: circle inside;
cursor: pointer;
line-height: 20px;
transition: background-color .3s ease-out;
}
.sub-nav-main .phone{
width: 160px;
display: inline-block;
vertical-align: top;
text-align: center;
line-height: 30px;
}
.sub-nav-main .phone-icons{
width: 54px;
display: inline-block;
height: 54px;
background:url(https://img.huaweicloud.com/static/v2_resources/images/common/phone-icon.gif) no-repeat;
margin:20px 0 0;
}
.sub-nav-main .text{
font-size: 14px;
color:#666;
line-height: 18px;
}
.sub-nav-main .num{
font-size: 16px;
color:#333;
}
.sub-nav-main .num span{
font-weight: bold;
}
.sub-nav-main ul.info{
display: inline-block;
width: 160px;
text-align: left;
border-left:1px dotted #d4d4d4;
margin: 15px 0 ;
height: 125px;
padding:10px 20px 0;
}
.sub-nav-main ul.info li{
line-height: 24px;
color: #999;
font-size: 12px;
}
@media (max-height: 800px) {
.float-bar-nav .page-nav-list .item {
padding: 10px 30px;
}
}
.float-bar-nav .page-nav-list .item:hover{
background-color: #f5f5f5
}
.float-bar-nav .page-nav-list .item.on {
background-color: #5DCBB2;
color: white
}
.float-bar-nav .sub-nav-main {
min-width: 220px;
white-space: nowrap;
background-color: #fff;
line-height: 40px;
display: block;
padding: 10px 0;
box-shadow: 0 4px 10px 0 rgba(138, 141, 147, 0.2);
}
.sub-inner .icons-float-bar{
float:left;
margin: 10px 20px 0 18px;
}
.sub-inner.inner .icons-float-bar{
float:left;
margin-top: 8px;
}
.sub-inner{
line-height: 44px;
height: 44px;
text-align: left;
padding-right: 20px;
position: relative;
}
/*.sub-inner:after{
position: absolute;
top:16px;
right: 0;
background: #e41e2b;
content: '';
width: 3px;
height: 28px;
display:none;
}*/
.sub-inner.inner{
height: 60px;
line-height: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.sub-inner .title{
font-size: 14px;
color: #333;
}
.sub-inner .info{
font-size: 14px;
color: #E41F2B; /*字体颜色*/
background: none;
padding: 0;
}
.sub-inner:hover{
background: #fafafa;/*字体悬浮颜色*/
}
.sub-inner:hover .title{
color: #E41F2B;
}
/*.sub-inner:hover:after{
display: block;
}*/
.float-bar-nav .telephone {
font-weight: bold;
margin-left: 5px;
}
.float-sidebar .shown-btn{
position: fixed;
/*top: 50%;*/
bottom: 40px;
right: 20px;
/*left: -60px;*/
width: 40px;
height: 40px;
line-height: 40px;
background: rgba(116,116,116,0.4);
border-radius: 50%;
font-size: 0;
display: none;
cursor: pointer;
/*box-shadow: 0px 0px 10px rgba(0,0,0,0.3);*/
text-align: center;
}
.float-sidebar .shown-btn>.dot {
width: 4px;
height: 4px;
border-radius: 50%;
display: inline-block;
background-color: #fff;
vertical-align: middle;
}
.float-sidebar .shown-btn>.dot:before,
.float-sidebar .shown-btn>.dot:after {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #fff;
vertical-align: middle;
position: absolute;
margin-left: -10px;
}
.float-sidebar .shown-btn>.dot:after {
margin-left: 6px;
}
@media (max-width: 1366px) {
.float-sidebar {
right: 20px
}
.page-nav:hover .sub-nav-layer {
right: 64px;
}
}
@media (max-width: 1023px) {
.float-sidebar .shown-btn{
display: block;
}
.float-sidebar {
right: -200px;
transition: right .3s ease-out;
}
.float-sidebar.show {
right: 0;
}
.float-sidebar .page-nav .sub-nav-layer{
visibility: hidden !important;
}
.float-sidebar.show .page-nav:hover .sub-nav-layer{
visibility: visible !important;;
right: 44px
}
.float-sidebar.show .shown-btn{
display: none;
}
.float-bar-nav >.item.tel > p {
display: none;
}
.float-bar-nav .sub-nav-layer {
top: auto;
right: -50px;
bottom: 0;
}
.show-totop .float-bar-nav .sub-nav-layer {
bottom: -58px;
}
.show .float-bar-nav .sub-nav-layer {
right: 100%;
}
}
/*--- float bar end ---*/
/* region float add */
.float-bar-ad {
display: block;
position: absolute;
bottom: 100%;
width: 48px;
height: 159px;
margin-bottom: 10px;
background-image: url(https://img.huaweicloud.com/static/v2_resources/images/common/float-ad2.jpg);
background-size: 100% auto;
box-shadow: 0 4px 10px 0 rgba(138, 141, 147, 0.2);
}
@media (max-width: 1023px){
.float-bar-ad {
display: none;
}
}
/* endregion float add */
</style>
```
- 基本说明
- 常用在线前端CDN库
- 公共代码部分
- HTML基础
- 媒体查询（调整各种屏幕下的效果）
- 网站备案
- 阿里云备案
- 域名解析
- 阿里云常规解析
- 手机端M.后缀
- 301跳转
- 在线客服咨询平台解决方案
- 百度商桥
- 商务通
- 美恰客服
- 腾讯QQ
- 建站系统自带
- 逸创·云客服
- 编辑器组件高级用法
- 社区分享
- 新闻类
- 图文
- Tab组件自定义
- 子导航自定义
- 文字
- 幻灯片
- 手机端导航栏
- 电脑端导航
- 单页面导航
- 单排导航
- 表单
- 栏目条
- 背景
- 图文组件基础应用
- 图文组件高级应用
- jPages分页插件使用（用于普通图文分页）
- 图文上下滚动
- 底部吸底导航
- Layer弹窗特效
- 页面进入弹窗
- 弹窗特效
- 视频弹窗
- 字体图标
- Iconfont（阿里图标库）
- Font Awesome
- Chrome开发者工具中文文档
- 悬浮在线客服
- 华为云右侧在线客服
- 装修公司
- CSS
- DIV CSS3 box-shadow对象盒子阴影和图片阴影
- CSS选择器
- 边框
- 旋转
- JS
- URL网址信息
- JQ
- JQ选择器
- 常用JQ
- jQuery标签替换函数replaceWith()的使用例子
- 锚链接动画
- 手机端
- 全局样式
- 导航
- PC导航菜单
- 插件
- 鼠标悬浮跟随
- 简单的Material Design风格手机App菜单特效
- 动画