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

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代码

部分内容回复可见

转载请注明来源:网站右侧悬浮菜单css+html 手机端隐藏PC自动判断