TSYBLOG.COM

网站右侧悬浮菜单css+html 手机端隐藏PC自动判断

  • 可以自己自定义图标,在css更改图片链接即可(背景图标和鼠标hover浮动图标)
  • 代码适用于大部分主题(包含本站的RiPro主题)大轩能力有限,Css请自行修改适配
  • RiPro主题使用用户,请删除footer.php中43-53行代码,把下方html代码添加至diy-footer.php中;diy代码请放置diy.css
  • 如果要自己添加在css里写好就可以了。图标可以使用https://www.iconfont.cn
%title插图%num

html代码

<div class="wapnone fk_service">
	<ul>
		<li>
			<div class="fk_service_consult_cont1" style="display: none;"> <span class="fk_service_triangle"></span> 在线咨询 </div>
		</li>
		<li class="fk_service_box fk_service_consult">
			<div class="fk_service_consult_cont"> <span class="fk_service_triangle"></span>
				<div class="fk_service_consult_cont_top"> <span class="fk_service_hint"> <span class="fk_service_icon"></span>
						<span> 如遇问题,请联系站长 </span> </span> <span class="fk_service_button" onclick="window.open('https://wpa.qq.com/msgrd?v=3&uin=20838641&site=qq&menu=yes')">QQ联系</span>
					<span class="fk_service_button" onclick="window.open('https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=cpol@qq.com')">在线邮件</span>
				</div> <span class="fk_service_phone"> QQ 请注明来意 :904030000</span> <span class="fk_service_check_site"> <span class="fk_service_icon"></span>
					<span onclick="window.open('http://tool.zmki.cn')">更多:辣条科技</span> </span>
			</div>
		</li>
		
		<li class="fk_service_box fk_service_qr">
			<div class="fk_service_qr_cont"> <span class="fk_service_triangle"></span>
				<div class="fk_service_qrimg"> <span class="fk_service_qrimg_site"></span> 微信公众号 </div>
				<div class="fk_service_qrtext"><span>辣条科技 · 科技梦想</span></div>
			</div>
		</li>
		<!-- 不需要图标的注释或删除即可 -->
		<li class="fk_service_box fk_service_ax" onclick="window.open('https://www.xxuanyl.com')">
			<div class="fk_service_ax_cont"> <span class="fk_service_triangle"></span> 提交收录,站长收到留言后即刻处理! </div>
		</li>

		<li class="fk_service_box fk_service_dh" onclick="window.open('https://www.xxuanyl.com')">
			<div class="fk_service_dh_cont"> <span class="fk_service_triangle"></span> 提交收录,站长收到留言后即刻处理! </div>
		</li>

		<li class="fk_service_box fk_service_jk" onclick="window.open('https://www.xxuanyl.com')">
			<div class="fk_service_jk_cont"> <span class="fk_service_triangle"></span> 提交收录,站长收到留言后即刻处理! </div>
		</li>

		<li class="fk_service_box fk_service_ws" onclick="window.open('https://www.xxuanyl.com')">
			<div class="fk_service_ws_cont"> <span class="fk_service_triangle"></span> 提交收录,站长收到留言后即刻处理! </div>
		</li>

		<li class="fk_service_box fk_service_sd" onclick="window.open('https://www.xxuanyl.com')">
			<div class="fk_service_sd_cont"> <span class="fk_service_triangle"></span> 提交收录,站长收到留言后即刻处理! </div>
		</li>



		<li class="fk_service_box fk_service_dz" onclick="window.open('https://www.xxuanyl.com')">
			<div class="fk_service_dz_cont"> <span class="fk_service_triangle"></span> 提交收录,站长收到留言后即刻处理! </div>
		</li>
		
		<li class="fk_service_box fk_service_feedback" onclick="window.open('https://www.xxuanyl.com')">
			<div class="fk_service_feedback_cont"> <span class="fk_service_triangle"></span> 提交收录,站长收到留言后即刻处理! </div>
		</li>
		
		<li class="fk_service_box fk_service_upward" onclick="FkService.fk_upWard();" style="display: block;">
			<div class="fk_service_upward_cont"> <span class="fk_service_triangle"></span> <span> 返回顶部 </span> </div>
		</li>
	</ul>
</div>

Css代码

此区域内容需评论后可见

喜欢本文?
文章阅读
常见问题
免费下载或者VIP会员专享资源能否直接商用?
提示下载完成但无法解压?
投稿及掉连解决方法:

本站均测试后上架,保证所提供下载的资源的准确性、安全性和完整性。

如有链接无法下载、失效或广告,下方评论区留言,或联系客服处理,看到处理!

如果您也有好的资源或教程,您可以投稿发布,所得成本报酬归发布方所有!

6条回应

  1. jiulinxiri2020-6-12 16:34

    Study

    • TSY2020-6-12 23:21

  2. css2021-4-22 18:16

    效果不错 啊

    • TSY2021-4-24 19:07

      本站都是亲测过的

  3. asdf2021-5-18 14:25

    这就是艺术

  4. 6662021-10-9 17:19

    这….怎么弄呢