彩虹代刷网导航美化装修代码

 

<style>

.zzxd-box { padding: 20px; border: 1px solid #ccc; overflow: hidden; background: #333; background:#fff4d4;}

.zzxd-box h2 { font-size:22px; line-height:30px; border-bottom: 1px solid #666; padding: 5px 0px; margin-bottom: 15px; font-weight:blod;}

.zzxd-box h2 a { float:right; font-size: 12px; line-height: 30px; display: block; width: 80px; height: 30px; background: red; color: #fff; text-align: center; border-radius: 5px; text-decoration: none;}

.zzxd-box ul { list-style: none; width: 101%; overflow: hidden; margin: 0px; padding: 0px;}

.zzxd-box ul li { float: left; min-width: 120px; width: 18.8%; margin-right: 1%; margin-bottom: 1%; line-height: 45px; border: 1px solid #000; border-radius: 10px; overflow: hidden;background: #fff;}

.zzxd-box ul li a { display: block; height: 45px; width: 100%; font-size: 14px; color: #333; text-decoration: none; }

.zzxd-box ul li i { display: block; width: 45px; height: 45px; float: left; margin-right: 7px;background:url(/images/yewuicobg.png) no-repeat;}

.zzxd-box ul li:hover a { color: #fff;}

.zzxd-box ul li i.dy_ico { background-position: 0px 0px;}

.zzxd-box ul li i.hs_ico {background-position: 0px -50px;}

.zzxd-box ul li i.wb_ico {background-position: 0px -100px;}

.zzxd-box ul li i.ks_ico {background-position: 0px -150px;}

.zzxd-box ul li i.wx_ico {background-position: 0px -200px;}

.zzxd-box ul li i.qm_ico {background-position: 0px -250px;}

.zzxd-box ul li i.ws_ico {background-position: 0px -300px;}

.zzxd-box ul li i.tb_ico {background-position: 0px -350px;}

.zzxd-box ul li i.jd_ico {background-position: 0px -400px;}

.zzxd-box ul li.li_dy:hover {background: #000;}

.zzxd-box ul li.li_hs:hover {background: #ff0030;}

.zzxd-box ul li.li_wb:hover {background: #ffe400;}

.zzxd-box ul li.li_ks:hover {background: #ff7800;}

.zzxd-box ul li.li_wx:hover {background: #00b40e;}

.zzxd-box ul li.li_qm:hover {background: #1f81ff;}

.zzxd-box ul li.li_ws:hover {background: #f74281;}

.zzxd-box ul li.li_tb:hover {background: #fd3f00;}

.zzxd-box ul li.li_jd:hover {background: #c91724;}

</style>

 

2、然后把下面的这段代码放到你的代刷网后台“首页公告”里面去,这个代码结合QQ代刷网站点公告装修美化代码会更完善更好用。

 

<section class="zzxd-box">

<h2>在线自助下单</h2>

<ul>

<li class="li_dy"><i class="dy_ico"></i><a href="栏目链接">抖音业务</a></li>

<li class="li_dy"><i class="dy_ico"></i><a href="栏目链接"">抖音套餐</a></li>

<li class="li_hs"><i class="hs_ico"></i><a href="栏目链接"">小红书</a></li>

<li class="li_wb"><i class="wb_ico"></i><a href="栏目链接"">新浪微博</a></li>

<li class="li_ks"><i class="ks_ico"></i><a href="栏目链接"">快手业务</a></li>

<li class="li_wx"><i class="wx_ico"></i><a href="栏目链接"">微信业务</a></li>

<li class="li_qm"><i class="qm_ico"></i><a href="栏目链接"">全民K歌</a></li>

<li class="li_ws"><i class="ws_ico"></i><a href="栏目链接"">微视业务</a></li>

<li class="li_tb"><i class="tb_ico"></i><a href="栏目链接"">淘宝业务</a></li>

<li class="li_jd"><i class="jd_ico"></i><a href="栏目链接"">京东业务</a></li>

</ul>

</section>

 

CTRL+D快速收藏,欢迎常来喔

未经允许不得转载:作者: 逍遥, 转载或复制请以 超链接形式 并注明出处 逍遥分享网
原文地址: 《彩虹代刷网导航美化装修代码》 发布于2020年8月31日

本文链接:彩虹代刷网导航美化装修代码 - https://www.xiaoyaofx.com/post-344.html

本文标签:

相关推荐
发表评论
0 评论
还没有评论,快来抢沙发吧!