``` <!--右侧悬浮导航/s--> <!-- --> <div class="fixed-right-nav"> <a href="javascript:window.scroll(0,0)" class="backtop"><i></i></a> <a href="沟通链接" class="msg" target="_blank"><i></i>免费咨询</a> <a href="/service/reservation/t2" class="decora" target="_blank"><i></i>我要装修</a> <a href="#" class="qrcode"><i></i><div class="qrcodePic"><img width="150" height="150" src="二维码图片地址"></div></a> </div> <!--右侧悬浮导航/e--> <style> /*右侧悬浮导航*/ .fixed-right-nav { position: fixed; z-index: 50; right: 50%; margin-right: -688px; top: 50%; margin-top: -100px; width: 78px; text-align: center; opacity: .9; } .fixed-right-nav a { display: block; height: 50px; border-radius: 2px; margin-bottom: 2px; background: #939393; overflow: hidden; color: #fff; } .fixed-right-nav a:hover { background: #f84f45; } .fixed-right-nav .backtop i { display: block; width: 29px; height: 17px; margin: 17px auto 0; background: url(http://icon.dyrs.cc/ico.png!c) no-repeat -42px -116px; } .fixed-right-nav .msg i { display: block; width: 16px; height: 17px; margin: 9px auto 0; background: url(http://icon.dyrs.cc/ico.png!c) no-repeat -48px -45px; } .fixed-right-nav .decora i { display: block; width: 18px; height: 18px; margin: 8px auto 0; background: url(http://icon.dyrs.cc/ico.png!c) no-repeat -47px -68px; } .fixed-right-nav .qrcode i { display: block; width: 18px; height: 18px; margin: 15px auto 0; background: url(http://icon.dyrs.cc/ico.png!c) no-repeat -47px -91px; } .fixed-right-nav .qrcodePic { position: absolute; bottom: 2px; visibility: hidden; right: 80px; width: 150px; height: 150px; transform: scale(0); -webkit-transform: scale(0); transition: all ease .3s; -webkit-transition: all ease .3s; transform-origin: right bottom; -webkit-transform-origin: right bottom; cursor: default } .fixed-right-nav .qrcode:hover .qrcodePic { visibility: visible; transform: scale(1); -webkit-transform: scale(1); } @media (max-width: 1410px) { .fixed-right-nav { right: 0; margin-right: 0; } } </style> ```