WordPress添加六格小工具

释放双眼,带上耳机,听听看~!

目录

    代码

    <style>
    .Mrxu-block {
    	padding-top: 0px;
    	position: relative;
    }
    
    .Mrxu-block .cut-prev,.Mrxu-block .cut-next {
    	position: absolute;
    	font-size: 14px;
    	top: 63px;
    	width: 35px;
    	height: 35px;
    	text-align: center;
    	line-height: 35px;
    	color: #CCCCCC;
    	background: #F3F4F7;
    	border-radius: 50%;
    	cursor: pointer;
    }
    
    .Mrxu-block .cut-prev {
    	display: none;
    	left: -55px;
    }
    
    .Mrxu-block .cut-next {
    	right: -55px;
    }
    
    .Mrxu-block .cut-prev:hover,.Mrxu-block .cut-next:hover {
    	color: #39AEFF;
    	background: #F3F4F7;
    }
    
    .Mrxu-circulation {
    	height: 197px;
    	overflow: hidden;
    	padding: 5px 5px;
    }
    
    .Mrxu-circulation ul {
    	width: 300%;
    }
    
    .Mrxu-circulation ul li {
    	float: left;
    	position: relative;
    	width: 5%;
    	height: 100px;
    	margin-right: 26px;
    	z-index: 3;
    }
    
    .Mrxu-circulation ul li .Mrxu-content::before {
    	content: '';
    	position: absolute;
    	right: 0;
    	top: 0;
    	width: 168px;
    	height: 100px;
    }
    
    .Mrxu-circulation ul li .Mrxu-content {
    	position: relative;
    	height: 100px;
    	font-size: 14px;
    	border-radius: 5px;
    	transition: 0.2s;
    	overflow: hidden;
    }
    
    .Mrxu-content .Mrxu-top {
    	display: block;
    	position: relative;
    	box-sizing: border-box;
    	padding: 22px 0 0 16px;
    	border-radius: 5px;
    	overflow: hidden;
    	height: 100px;
    }
    
    .Mrxu-name {
    	position: relative;
    	font-size: 26px;
    	line-height: 26px;
    	margin-bottom: 8px;
    	z-index: 1;
    }
    
    .Mrxu-hint {
    	position: relative;
    	z-index: 1;
    	text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    	background: linear-gradient(to right, #ffffffa6, #fefefd00);
    	margin-left: -18px;
    }
    
    .Mrxu-circulation ul li.off:hover .Mrxu-content {
    	height: 100px;
    }
    
    .Mrxu-circulation ul li:hover .Mrxu-content {
    	height: 180px;
    	box-shadow: 0 6px 10px 0 rgba(0,0,0,0.10);
    }
    
    .Mrxu-circulation .color1 .Mrxu-content {
    	background: #fee7e7;
    	-moz-box-shadow:0px 2px 5px #7a7a7a45; -webkit-box-shadow:0px 2px 5px #7a7a7a45;
    }
    
    .Mrxu-circulation .color1 .Mrxu-top {
    	color: #ff94b2;
    }
    
    .Mrxu-circulation .color1 .Mrxu-name {
    	color: #fff;
    	font-weight: 900;
    	text-shadow: 5px 5px 5px #ff00238c;
    }
    
    .Mrxu-circulation li.color1 .Mrxu-content::before {
    	background-position: 0 -100px;
    }
    
    .Mrxu-circulation .color2 .Mrxu-content {
    	background: #C9F1ED;
    	-moz-box-shadow:0px 2px 5px #7a7a7a45; -webkit-box-shadow:0px 2px 5px #7a7a7a45;
    }
    
    .Mrxu-circulation .color2 .Mrxu-top {
    	color: #87BAB5;
    }
    
    .Mrxu-circulation .color2 .Mrxu-name {
    	color: #fff;
    	font-weight: 900;
    	text-shadow: 5px 5px 5px #1dab9d;
    }
    
    .Mrxu-circulation li.color2 .Mrxu-content::before {
    	background-position: -178px -100px;
    }
    
    .Mrxu-circulation .color3 .Mrxu-content {
    	background: #FFECB4;
    	-moz-box-shadow:0px 2px 5px #7a7a7a45; -webkit-box-shadow:0px 2px 5px #7a7a7a45;
    }
    
    .Mrxu-circulation .color3 .Mrxu-top {
    	color: #DEBD83;
    }
    
    .Mrxu-circulation .color3 .Mrxu-name {
    	color: #fff;
    	font-weight: 900;
    	text-shadow: 5px 5px 5px #ffa500;
    }
    
    .Mrxu-circulation li.color3 .Mrxu-content::before {
    	background-position: -534px -100px;
    }
    
    .Mrxu-circulation .color4 .Mrxu-content {
    	background: #FFD4D4;
    	-moz-box-shadow:0px 2px 5px #7a7a7a45; -webkit-box-shadow:0px 2px 5px #7a7a7a45;
    }
    
    .Mrxu-circulation .color4 .Mrxu-top {
    	color: #BD7C7C;
    }
    
    .Mrxu-circulation .color4 .Mrxu-name {
    	color: #fff;
    	font-weight: 900;
    	text-shadow: 5px 5px 5px #ff00238c;
    }
    
    .Mrxu-circulation li.color4 .Mrxu-content::before {
    	background-position: -1424px -100px;
    }
    
    .Mrxu-circulation .color5 .Mrxu-content {
    	background: #e6f2ff;
    	-moz-box-shadow:0px 2px 5px #7a7a7a45; -webkit-box-shadow:0px 2px 5px #7a7a7a45;
    	/*animation: glow 800ms ease-out infinite alternate;*/
    }
    
    .Mrxu-circulation .color5 .Mrxu-top {
    	color: #8eb1ff;
    }
    
    .Mrxu-circulation .color5 .Mrxu-name {
    	color: #fff;
    	font-weight: 900;
    	text-shadow: 5px 5px 5px #4eadff;
    }
    
    .Mrxu-circulation li.color5 .Mrxu-content::before {
    	background-position: -712px -100px;
    }
    
    .Mrxu-circulation .color6 .Mrxu-content {
    	background: #FFE2D0;
    	-moz-box-shadow:0px 2px 5px #7a7a7a45; -webkit-box-shadow:0px 2px 5px #7a7a7a45;
    }
    
    .Mrxu-circulation .color6 .Mrxu-top {
    	color: #ff9a83;
    	
    }
    
    .Mrxu-circulation .color6 .Mrxu-name {
    	color: #fff;
    	font-weight: 900;
    	text-shadow: 5px 5px 5px #ff8100;
    }
    
    .Mrxu-circulation li.color6 .Mrxu-content::before {
    	background-position: -890px -100px;
    }
    
    .Mrxu-content .Mrxu-top i {
    	position: absolute;
    	top: 0;
    	right: -20px;
    	width: 130px;
    	height: 100px;
    	background: url(https://7.67an.com/67an/tongji/12.png) no-repeat 0 0;
    }
    
    .Mrxu-circulation li .icon1 {
    	background-position: 0px 0;
    }
    
    .Mrxu-circulation li .icon2 {
    	background-position: -140px 0;
    }
    
    .Mrxu-circulation li .icon3 {
    	background-position: -280px 0;
    }
    
    .Mrxu-circulation li .icon4 {
    	background-position: -410px 0;
    }
    
    .Mrxu-circulation li .icon5 {
    	background-position: -530px 0;
    }
    
    .Mrxu-circulation li .icon6 {
    	background-position: -650px 0;
    }
    
    .Mrxu-block .Mrxu-content {
    	height: 100px;
    }
    
    .Mrxu-block .Mrxu-link {
    	text-align: center;
    	line-height: 26px;
    	font-size: 14px;
    }
    
    .Mrxu-block .Mrxu-link a {
    	margin: 10px 5px 0;
    	display: inline-block;
    	background: rgba(255,255,255,0.50);
    	width: 77px;
    	height: 26px;
    	border-radius: 6px;
    	font-size: 13px;
    	color: #842100;
    }
    
    .Mrxu-block .Mrxu-link a:hover {
    	background: #fff;
    	color: #666;
    }
    </style><div class="Mrxu-block">
        <div class="Mrxu-circulation">
                       <ul>
                                      <li class="color1">
                                                     <div class="Mrxu-content">
                                                                    <a class="Mrxu-top" href="#">
                                                                                   <p class="Mrxu-name">软件</p>
                                                                                   <p class="Mrxu-hint">&nbsp;&nbsp;&nbsp;&nbsp;不一样的乐趣</p> <i class="icon1"></i>
    
                                                                    </a>
                                                                    <div class="Mrxu-link"> <a href="/yz_rj">前往乐园</a>
    
                                                                    </div>
                                                     </div>
                                      </li>
                                      <li class="color2">
                                                     <div class="Mrxu-content">
                                                                    <a class="Mrxu-top" href="#">
                                                                                   <p class="Mrxu-name">系统</p>
                                                                                   <p class="Mrxu-hint">    &nbsp;&nbsp;&nbsp;&nbsp;美妙的系统</p> <i class="icon2"></i>
    
                                                                    </a>
                                                                    <div class="Mrxu-link"> <a href="/xt_sat">前去探索</a>
    
                                                                    </div>
                                                     </div>
                                      </li>
                                      <li class="color3">
                                                     <div class="Mrxu-content">
                                                                    <a class="Mrxu-top" href="#">
                                                                                   <p class="Mrxu-name">帮助</p>
                                                                                   <p class="Mrxu-hint">    &nbsp;&nbsp;&nbsp;&nbsp;站点帮助</p> <i class="icon3"></i>
    
                                                                    </a>
                                                                    <div class="Mrxu-link"> <a href="/document">点我前往</a>
    
                                                                    </div>
                                                     </div>
                                      </li>
                                      <li class="color4">
                                                     <div class="Mrxu-content">
                                                                    <a class="Mrxu-top" href="#">
                                                                                   <p class="Mrxu-name">教程</p>
                                                                                   <p class="Mrxu-hint">   &nbsp;&nbsp;&nbsp;&nbsp; 优质教程</p> <i class="icon4"></i>
    
                                                                    </a>
                                                                    <div class="Mrxu-link"> <a href="/muyujc">源教程站</a>
    
                                                                    </div>
                                                     </div>
                                      </li>
                                      <li class="color5">
                                                     <div class="Mrxu-content">
                                                                    <a class="Mrxu-top" href="#">
                                                                                   <p class="Mrxu-name">Android</p>
                                                                                   <p class="Mrxu-hint">   &nbsp;&nbsp;&nbsp;&nbsp; 安卓世界</p> <i class="icon5"></i>
    
                                                                    </a>
                                                                    <div class="Mrxu-link"> <a href="/ad_roid">立即前往</a>
    <a href="https://www.67an.com/">七安</a>
    
                                                                    </div>
                                                     </div>
                                      </li>
                                      <li class="color6">
                                                     <div class="Mrxu-content">
                                                                    <a class="Mrxu-top" href="#">
                                                                                   <p class="Mrxu-name">站长自用</p>
                                                                                   <p class="Mrxu-hint">    &nbsp;&nbsp;&nbsp;&nbsp;解锁新视点</p> <i class="icon6"></i>
    
                                                                    </a>
                                                                    <div class="Mrxu-link"> <a href="/zz_zys">前往探索</a>
    <a href="https://www.67an.com/">七安</a>
    
                                                                    </div>
                                                     </div>
                                      </li>
                       </ul>
        </div>
    </div>

    文章链接:https://www.67an.com/102
    文章标题:WordPress添加六格小工具
    文章版权:七安 (67an.com) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!
    重要说明

    本站资源大多来自网络,如有侵犯你的权益请联系管理员七安 或给邮箱发送邮件hello😀67an.com 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


    如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip(点击下载),zip、rar解压,建议下载WinRAR(点击下载)

    给TA打赏
    共{{data.count}}人
    人已打赏
    WordPress

    WordPress添加五格小工具

    2021-12-5 19:13:30

    WordPress

    WordPress流光炫彩动态彩色文字

    2021-12-5 19:18:57

    0 条回复 A文章作者 M管理员
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    搜索