```
<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菜單特效
- 動畫