WordPress 主题 ripro 底部信息统计美化

卡片中的信息数字都是固定值,需要自行更改,最右边的区域可以做超链接。

效果如下:

食用方法:

HTML区块或是主题根目录下

<div class="section index-bottom-tip">
	<div class="index-md-bg container">
		<div class="index-bottom-box">
			<div class="index-gradient-btn index-m3-box-btn">
				<div class="index-m3-box">
					<div class="index-m-box">
						<div class="index-m-box-column">
							<div><span class="index-new-num">512</span></div>
							<div>
								<span class="index-new-j"><sup>+</sup>108</span>
								<span class="index-new-wk">自上周以来</span>
							</div>
						</div>
						<svg class="index-svg index-svg-v" tabindex="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.9 7.8" role="img" aria-label="Arrow right">
							<path d="M25 3.2H.7c-.4 0-.7.3-.7.7 0 .4.3.7.7.7H25c.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7z"></path>
							<path d="M24.4 4.7V.4c0-.4.3-.6.6-.3l1.2 1.1c.3.3.9.8 1.2 1.1l1.2 1.1c.3.3.3.8 0 1.1l-1.2 1.1c-.3.3-.9.8-1.2 1.1l-1.2.9c-.3.3-.6.2-.6-.3V4.7z"></path>
						</svg>
					</div>
					<div class="index-m3-name">Update This Week	</div>
				</div>
			</div>
		</div>
		<div class="index-bottom-box">
			<div class="index-gradient-btn index-bottom-btn-bg">
				<div class="index-m3-box">
					<div class="index-m-box">
						<div class="index-m-box-column">
							<div><span class="index-new-num">602</span></div>
							<div>
								<span class="index-new-j"><sup>+</sup>18</span>
								<span class="index-new-wk">自昨天以来</span>
							</div>
						</div>
						<svg class="index-svg index-svg-v" tabindex="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.9 7.8" role="img" aria-label="Arrow right">
							<path d="M25 3.2H.7c-.4 0-.7.3-.7.7 0 .4.3.7.7.7H25c.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7z"></path>
							<path d="M24.4 4.7V.4c0-.4.3-.6.6-.3l1.2 1.1c.3.3.9.8 1.2 1.1l1.2 1.1c.3.3.3.8 0 1.1l-1.2 1.1c-.3.3-.9.8-1.2 1.1l-1.2.9c-.3.3-.6.2-.6-.3V4.7z"></path>
						</svg>
					</div>
					<div class="index-m3-name">Update Today</div>
				</div>
			</div>
		</div>
		<div class="index-bottom-box-new">
			<div class="login-btn index-bottom-c-column" title="会员中心">
				<img class="index-bottom-c-pic" src="./img/census.jpg" alt="">
				<div class="index-bottom-c-box">
					<h4 class="index-bottom-c-h4">SVIP可免费下载全站资源</h4>
					<span class="index-bottom-c-red">开通会员享特权						<svg class="index-svg index-bottom-c-btn" tabindex="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.9 7.8" role="img" aria-label="Arrow right">
							<path d="M25 3.2H.7c-.4 0-.7.3-.7.7 0 .4.3.7.7.7H25c.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7z"></path>
							<path d="M24.4 4.7V.4c0-.4.3-.6.6-.3l1.2 1.1c.3.3.9.8 1.2 1.1l1.2 1.1c.3.3.3.8 0 1.1l-1.2 1.1c-.3.3-.9.8-1.2 1.1l-1.2.9c-.3.3-.6.2-.6-.3V4.7z"></path>
						</svg>
					</span>
				</div>
			</div>	
		</div>
	</div>
</div>

<style type="text/css">
/*统计模块样式*/
.ripro-dark .post-grid{background-color:#232425;border:1px solid #232425;}
.post-grid .entry-media img{margin:0 auto;width:100%;border-radius:4px;}
.entry-media .placeholder{background-color:unset;}
.index-bottom-tip{padding-top:40px;}
.ripro-dark .index-bottom-tip{background:#1e1e1f;}
.index-gradient-btn:before{content:"";position:absolute;z-index:0;border-radius:5px;top:1px;right:1px;bottom:1px;left:1px;background-color:#fff;-webkit-transition:opacity .25s ease-in-out;transition:opacity .25s ease-in-out;opacity:0;}
.index-m3-box{z-index:1;text-align:left;font-weight:inherit;font-style:inherit;letter-spacing:0;font-size:12px;line-height:18px;font-weight:400;padding:30px;-ms-flex-item-align:center;align-self:center;min-height:130px;color:#fff;}
.index-gradient-btn{position:relative;border-radius:6px;text-align:center;color:#282828;display:-webkit-box;display:-ms-flexbox;display:flex;}
.index-m-box{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.index-m3-box,.index-m-box{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;}
.index-m-box-column{display:-webkit-box;display:-ms-flexbox;display:flex;}
.index-new-num{font-weight:inherit;font-style:inherit;letter-spacing:0;font-family:Montserrat,sans-serif;font-size:42px;line-height:40px;font-weight:600;letter-spacing:-.015em;display:block;color:#fff;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out;margin-bottom:5px;}
.index-new-j{font-weight:inherit;font-style:inherit;letter-spacing:0;font-family:Montserrat,sans-serif;font-size:16px;line-height:24px;font-weight:600;letter-spacing:.025em;letter-spacing:.075em;color:#00dcaf;display:block;margin:0 0 -5px 5px;}
.index-new-wk{display:inline-block;opacity:.6;line-height:1em;margin-left:5px;color:#fff;}
.index-svg-v{font-size:.6em;margin-left:5px;opacity:.6;}
.index-svg{fill:currentColor;height:1em;stroke-width:0;}
.index-m3-name{font-weight:inherit;font-style:inherit;letter-spacing:0;font-family:Montserrat,sans-serif;font-size:12px;line-height:18px;font-weight:600;letter-spacing:.075em;text-transform:uppercase;letter-spacing:.16em;line-height:.9em;opacity:.6;position:absolute;bottom:30px;left:30px;color:#fff;}
.index-bottom-c-h4{font-weight:inherit;font-style:inherit;letter-spacing:0;font-family:Montserrat,sans-serif;font-size:14px;line-height:20px;font-weight:600;letter-spacing:.075em;text-transform:uppercase;letter-spacing:.16em;display:block;margin:0;color:#fff;}
.index-bottom-tip,.index-bottom-tip *{box-sizing:inherit;}
.index-bottom-c-column{padding:30px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;cursor:pointer;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-radius:6px;overflow:hidden;text-align:center}
.index-bottom-c-column:hover .index-bottom-c-pic{-webkit-transform:scale(1.02);transform:scale(1.02)}
@media (min-width:1350px){.index-bottom-c-column{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:left}}
.index-bottom-c-pic{position:absolute;top:0;left:0;min-width:100%;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.index-bottom-c-column img{max-width:initial;}
.index-bottom-c-box{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;position:relative}
@media (min-width:1350px){.index-bottom-c-box{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}
.index-bottom-c-red{color:#eee}
.index-bottom-column{margin:auto;padding-left:10px;padding-right:10px;width:95%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
@media (min-width:750px){.index-bottom-column{width:95%;max-width:95%;padding-left:5px;padding-right:5px;margin-left:auto;margin-right:auto}}
@media (min-width:1000px){.index-bottom-column{width:95%;max-width:95%;padding-left:0;padding-right:0;margin-left:auto;margin-right:auto}}
@media (min-width:1200px){.index-bottom-column{width:1440px;max-width:95%;margin-left:auto;margin-right:auto}}
.index-bottom-box{-ms-flex-preferred-size:100%;flex-basis:100%;min-width:0}
.index-bottom-box:last-child{margin-right:0}
@media (max-width:749px){.index-bottom-box:nth-child(2){display:none}}
@media (min-width:750px){.index-bottom-box{-ms-flex-preferred-size:100%;flex-basis:100%;min-width:0;-ms-flex-preferred-size:48.90511%;flex-basis:48.90511%;margin-right:2.18978%;display:block}.index-bottom-box:last-child{margin-right:0}}
@media (min-width:750px) and (max-width:999px){.index-bottom-box:nth-child(2):nth-child(n){margin-right:0}}
@media (min-width:1000px){.index-bottom-box{-ms-flex-preferred-size:100%;flex-basis:100%;min-width:0;-ms-flex-preferred-size:31.87331%;flex-basis:31.87331%;margin-right:2.18978%}.index-bottom-box:last-child{margin-right:0}}
@media (min-width:1350px){.index-bottom-box{-ms-flex-preferred-size:100%;flex-basis:100%;min-width:0;-ms-flex-preferred-size:23.35767%;flex-basis:23.35767%;margin-right:2.18978%}.index-bottom-box:last-child{margin-right:0}}
.index-bottom-box-new{display:none}
@media (min-width:1000px){.index-bottom-box-new{-ms-flex-item-align:stretch;align-self:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-preferred-size:100%;flex-basis:100%;min-width:0;-ms-flex-preferred-size:31.87331%;flex-basis:31.87331%;margin-right:2.18978%}.index-bottom-box-new:last-child{margin-right:0}}
@media (min-width:1350px){.index-bottom-box-new{-ms-flex-preferred-size:100%;flex-basis:100%;min-width:0;-ms-flex-preferred-size:48.90511%;flex-basis:48.90511%;margin-right:2.18978%}.index-bottom-box-new:last-child{margin-right:0}}
.index-bottom-tip:after{content:"";display:block;height:30px;}
.index-md-bg{margin-top:-50px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;}
.index-bottom-c-btn{font-size:10px;width:30px;height:8px;margin-left:6px;}
.index-m3-box-btn{background:-webkit-linear-gradient(315deg,rgba(109,71,217,.92),rgba(249,61,102,.92));background:linear-gradient(135deg,rgba(109,71,217,.92),rgba(249,61,102,.92));}
.index-bottom-btn-bg{background:-webkit-linear-gradient(315deg,rgba(71,114,217,.92),rgba(0,220,175,.92));background:linear-gradient(135deg,rgba(71,114,217,.92),rgba(0,220,175,.92));}
sup{top:-0.5em;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}

</style>

给TA买糖
共{{data.count}}人
人已赞赏
wordpress

仿优设 WordPress 主题 B2 美化添加引导卡片

2020-4-23 12:28:06

wordpress

WordPress 代码实现防止发表重复标题的文章

2020-4-29 12:27:59

⚠️
Golurending上的部份代码及教程来源于互联网,仅供网友学习交流,未经Golurending作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 邮箱codesns#163.com(#-@) 或 点击右侧 私信:管理员 反馈,我们将尽快处理。
2 条回复 A文章作者 M管理员
  1. 牧泽

    站长写的教程太棒了,我做了一些补充,还弄了个效果展示页面,大家可以来看看:

    https://www.npc.ink/15443.html

    ✗吐舌头✗

  2. GOOGLE

    超链接怎么做?

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索