子比主题现在右侧悬浮导航还是比较不错的，功能页比较全面，如果有喜欢折腾的朋友可以自己修改下，右侧悬浮导航，此教程是从其他博客看到后觉着不错，可以学习下，喜欢的朋友可以自己测试，只显示电脑端，手机端空间太小，影响阅读、美观。右侧悬浮导航主要以zibll子比主题来进行样式的美化，一些css都采用zibll子比主题，若其他主题使用请自己修改代码中一些颜色代码或者其他部分代码，样式借鉴很多主题的右侧导航优秀的样式。没有代码基础（目前就只写了python），所以右侧悬浮导航一些功能很难完美实现，本站教程所使用的图片，请自觉下载保存本地，然后上传到图床或者其他地方。
设置前，请关闭[电脑端的“回到顶部”按钮，后台子比主题设置里面自己找一下]
第一步：添加CSS代码
后台子比主题设置--->自定义代码--->自定义CSS样式，添加下面的CSS代码。
基础版CSS样式
/*右侧导航栏*/
.elevator_item .hd-time-limited{display: block; position: fixed; right: 5px; bottom: 450px; width: 40px; height: 140px; animation: vip-key 2.4s infinite; margin-top: 10px; border-radius: var(--main-radius);}@keyframes vip-key{0%{bottom: 442px;} 50%{bottom: 450px;} 100%{bottom: 442px;}}.elevator_item{font-weight:700; position: fixed; right: 5px; bottom: 150px; z-index: 10;}.elevator_item .feedback{width: 40px; height: 40px; background-color: #fff; color: #fa3c64; font-size: 12px; padding: 3px 6px; display: block; border-radius: 5px; text-align: center; margin-top: 10px; /* box-shadow: 0 1px 2px rgba(0, 0, 0, .35);*/ box-shadow: 0 0 10px var(--main-shadow); cursor: pointer;}.elevator_item .medium{position: relative; background-color: #fa3c64; color: #fff;}.elevator_item .medium .lf-box{display: none; position: absolute; right: 41px; top: -90px; width: 370px; height: 280px; padding-right: 10px;}.elevator_item .medium .sp-list{width: 360px; height: 280px; border-radius: 5px; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35);}.elevator_item .medium .sp-list li:first-child{height: 70px; border-bottom: 1px solid #e5e5e5; padding: 20px 50px;}.elevator_item .medium li:first-child span{font-size: 14px; color: #383838;float: left; line-height: 30px;}.elevator_item .medium .btn-addGroup{width: 90px; height: 30px; border-radius: 8px; background: #fa3c64; color: #fff; line-height: 30px; text-align: center; float: left; margin-left: 14px;}.elevator_item .medium .spl-li{padding: 22px 34px 0;}.elevator_item .medium .spl-li span{display: block; font-size: 14px; color: #383838; margin-bottom: 8px;}.elevator_item .medium .spl-li img{width: 130px;}.elevator_item .feedback:hover .lf-box{display: block;}.fl{float: left;}.fr{float: right;}.graHover{position: relative; overflow: hidden;}.graHover:before{display: none; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-color: rgba(255, 255, 255, .5);}.graHover:hover:before{display: block;}.clearfix{*zoom: 1;}.clearfix:after{visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}.wiiuii-why{background-color: var(--main-bg-color); width: 50px; height: 100%; position: fixed; right: 0; top: 0; z-index: 10; /*box-shadow: -2px 0px 4px 0px rgb(0 0 0 / 10%);*/ box-shadow: 0 0 10px var(--main-shadow);}@media screen and (max-width:768px){.wapnones{display:none;}}最终版CSS样式（适用子比主题，基础版出现了一些css污染，所以我对类进行了修改）
后台子比主题设置--->自定义代码--->自定义底部HTML代码，添加下面的HTML代码。
基础版HTML
<!--右侧浮动 开始-->
<div class="wapnones wiiuii-why">
<div class="elevator_item">
<a class="hd-time-limited" href="#" style="background: url(https://www.zulinfang.com/wp-content/uploads/2022/11/26666.png) no-repeat center;" target="_blank" rel="nofollow"></a>
<a class="feedback graHover signin-loader" style="background-color: #44BBA1;color:#fff;" href="javascript:;" rel="nofollow">点击登陆</a>
<a class="feedback medium signin-loader hover-show pay-vip" href="javascript:;" style="background-color: #f2c69f;color:#383838;">活动专区
<div class="lf-box">
<ul>
<li>
<!--若用我的图片一定要把图片下载到本地！-->
<div style="padding-bottom: 5px;">
<img style="border-radius: 8px;" src="https://img.wiiuii.cn/img/VVVSVIP.jpg">
</div>
<img style="border-radius: 8px;" src="https://img.wiiuii.cn/img/VVVIPS.jpg">
</li>
</ul>
</div>
</a>
<a class="feedback graHover main-shadow toggle-theme" style="background-color: var(--key-color);color:var(--main-bg-color);" href="javascript:;" rel="nofollow">模式切换</a>
<a target="_blank" class="feedback graHover" style="background-color: #3ba4f9;color:#fff;" href="https://www.wiiuii.cn/newposts" rel="nofollow">发布文章</a>
<div class="feedback medium">官方客服
<div class="lf-box">
<ul class="sp-list">
<li>
<span>官方客服：1431258805</span>
<a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1431258805" target="_self" class="btn-addGroup graHover" rel="nofollow">一键联系</a></li>
<li class="spl-li clearfix mobile-hide">
<div class="fl">
<span>微信公众号</span>
<img src="https://www.wiiuii.cn/wp-content/uploads/2021/02/9ce98472f1e7.png" ></div>
<div class="fr">
<span>微信公众号</span>
<img src="https://www.zulinfang.com/wp-content/uploads/2022/11/0af9da361143.png" ></div>
</li>
</ul>
</div>
</div>
<a class="feedback graHover main-shadow muted-2-color ontop radius8 fade" style="background-color: #1e6be3;color:#fff;display: block;" href="javascript:(scrollTo());" >返回顶部</a>
</div>
</div>
<!--右侧浮动 结束-->最终版HTML
<!--右侧浮动 开始-->
<div class="wapnones wiiuii-why">
<div class="wiiuii-navigation-item">
<a class="hd-time-limited" href="#" style="background: url(https://img.wiiuii.cn/img/cfxy.jpg) no-repeat center;" target="_blank" rel="nofollow"></a>
<a class="feedback wiiuii-Gra-Hover signin-loader jb-yellow" style="color:#fff;" href="javascript:;" rel="nofollow">点击登陆</a>
<a class="feedback medium jb-vip1 signin-loader hover-show pay-vip" href="javascript:;" style="color:#383838;">活动专区
<div class="lf-box">
<ul>
<li>
<!--若用我的图片一定要把图片下载到本地！-->
<div style="padding-bottom: 5px;">
<img style="border-radius: 8px;" src="https://img.wiiuii.cn/img/VVVSVIP.jpg">
</div>
<img style="border-radius: 8px;" src="https://img.wiiuii.cn/img/VVVIPS.jpg">
</li>
</ul>
</div>
</a>
<a class="feedback wiiuii-Gra-Hover main-shadow toggle-theme" style="background-color: var(--key-color);color:var(--main-bg-color);" href="javascript:;" rel="nofollow">模式切换</a>
<a target="_blank" class="feedback wiiuii-Gra-Hover jb-blue" style="color:#fff;" href="https://www.wiiuii.cn/newposts" rel="nofollow">发布文章</a>
<div class="feedback medium jb-red">联系星语
<div class="lf-box">
<ul class="sp-list">
<li>
<span>星语企鹅：1431258805</span>
<a class="btn-addGroup wiiuii-Gra-Hover" href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1431258805" target="_self" rel="nofollow">一键联系</a></li>
<li class="spl-li wiiuii-clearfix mobile-hide">
<div class="fl">
<span>微信公众号</span>
<img src="https://www.wiiuii.cn/wp-content/uploads/2021/02/9ce98472f1e7.png" ></div>
<div class="fr">
<span>星语微信号</span>
<img src="https://www.zulinfang.com/wp-content/uploads/2022/11/cfbf6f4c8292.png" ></div>
</li>
</ul>
</div>
</div>
<a class="feedback wiiuii-Gra-Hover jb-purple main-shadow muted-2-color ontop radius8 fade" style="color:#fff;" href="javascript:(scrollTo());" >返回顶部</a>
</div>
</div>
<!--右侧浮动 结束-->说明：若需要上面的图片，自己下载保存。自己添加、修改代码。添加模块请自己修改CSS的“elevator_item”类里的“bottom：150px;”高度，不然很丑哦。蓝色的图片大小是40x140。
效果截图：
感谢您的来访，获取更多精彩文章请收藏本站。
© 版权声明
THE END
暂无评论内容