<link rel="stylesheet" href="http://at.alicdn.com/t/font_2552256_h2xmhqamonw.css"> <div class="xf"> <ul> <li> <a href="#"> <i class="iconfont icon-duihua"></i> <p>在线咨询</p> </a> </li> <li> <a href="javascript:;"> <i class="iconfont icon-weixin"></i> <p>微信联系</p> </a> <div uk-dropdown="pos:left-center" class="weixin_sub"> <img src="images/ewm01.png" alt="" style="width: 110px;"> </div> </li> <li> <a href="#"> <i class="iconfont icon-baojia"></i> <p>索取报价</p> </a> </li> <li> <a href="javascript:;"> <i class="iconfont icon-dianhua"></i> <p>联系电话</p> </a> <div uk-dropdown="pos:left-center" class="tel_sub"> <div class="xf_tel">400-500-1234</div> </div> </li> <li> <a href="{url id=sitemap /}"> <i class="iconfont icon-ditu"></i> <p>网站地图</p> </a> </li> <li> <a href="#" uk-scroll> <i class="iconfont icon-fanhuidingbu"></i> <p>返回顶部</p> </a> </li> </ul> </div>
SCSS代码:
/** 悬浮按钮 **/ .xf{ position: fixed; top: 15%; right: 0; z-index: 100; ul{ margin: 0; padding: 0; li{ list-style: none; text-align: center; a{ display: block; background-color: #FE0000; color: #fff; padding:4px 10px; &:hover{ text-decoration: none; background-color: #c30404; } } i{ font-size: 30px; } p{ font-size: 14px; text-align: center; margin: 0; } } } .weixin_sub{ min-width: 120px; max-width: 120px; padding: 5px; box-shadow: none; &::after{ content: ""; width: 0; height: 0; border-top: 10px solid transparent; border-left: 16px solid #fff; border-bottom: 10px solid transparent; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); } } .tel_sub{ min-width: 200px; max-width: 200px; padding: 5px; box-shadow: none; background-color: #c30404; color: #fff; font-weight: bold; font-size: 24px; &::after{ content: ""; width: 0; height: 0; border-top: 10px solid transparent; border-left: 16px solid #c30404; border-bottom: 10px solid transparent; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); } } }