上回已经有分享一个右侧导航栏代码了,两个右侧导航栏代码其实都差不多,主要就是显示的外表不同,看自己喜好觉得哪个好看就选择哪个吧。
具体效果图如下:
代码内容如下:
<style> .elevator_item .hd-time-limited { display: block; position: fixed; right: 0; bottom: 445px; width: 40px; height: 140px; background: url(assets/img/right.png) no-repeat center; } .elevator_item { position: fixed; right: 0; bottom: 95px; z-index: 11; } .elevator_item .feedback { width: 36px; height: 41px; font-size: 12px; padding: 5px 6px; display: block; border-radius: 5px; text-align: center; margin-top: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.35); cursor: pointer; } .graHover { position: relative; overflow: hidden; } </style> <div class=”elevator_item” id=”elevator_item” style=”display:block;”> <a target=”_self” class=”feedback graHover” style=”background-color: #3cbdfa;color:#fff;” href=”/user/reg.php” rel=”nofollow”>分站搭建</a> <a target=”_self” class=”feedback graHover” id=”sign_daily” style=”background-color: #ffd900;color:#383838;” rel=”nofollow” href=”商品链接”>刷名片赞</a> <a target=”_self” class=”feedback graHover” style=”background-color: #AF3A9F;color:#fff;” href=”商品链接” rel=”nofollow”>超会Q钻</a> <a target=”_self” class=”feedback graHover” style=”background-color: #fa3c63;color:#fff;” href=”商品链接” rel=”nofollow”>抖音业务</a> <a target=”_self” class=”feedback graHover” style=”background-color: #ffa500;color:#fff;” href=”商品链接” rel=”nofollow”>快手业务</a> <a target=”_self” class=”feedback graHover” style=”background-color: #1e6be3;color:#fff;” href=”商品链接” rel=”nofollow”>全民K歌</a> <a target=”_self” class=”feedback graHover” style=”background-color: #06C17E;color:#fff;” href=”商品链接” rel=”nofollow”>空间业务</a> <a target=”_self” class=”feedback graHover” style=”background-color: #FF3399;color:#fff;” href=”商品链接” rel=”nofollow”>免费福利</a> </div>