仿致美化特色模块 – B2主题WordPress 美化

一款来自致美化特色模块，纯HTML和CSS，只能在B2主题中使用

一款来自致美化特色模块，纯HTML和CSS，只能在B2主题中使用。

可以放在HTML模块中。

代码来源：详情

代码如下

<div class=”post-1 post-list post-item-1″>
<div class=”hidden-line”>
<ul class=”b2_gap”>
<li class=”post-list-item”>
<div class=”item-in yj yy bs”>
<div class=”post-module-thumb” style=”padding-top:56.25%”>
<a href=”https://npc.ink/pc/venom-green-vs/” target=”_blank” class=”thumb-link”><img
class=”post-thumb lazy loaded” data-src=”https://dl.zhutix.net/2018/03/Toxic_0.jpg”
src=”https://dl.zhutix.net/2018/03/Toxic_0.jpg” data-was-processed=”true” loading=”lazy” /></a>
<span class=”fenlj”>电脑主题</span>
</div>
<div class=”post-info”>
<a class=”grid_author_avt”>
<div class=”grid_author_bggo avatar bg-cover”>
<img alt=”” src=”./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_42,w_42″
srcset=”./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_84,w_84 2x”
class=”avatar avatar-30 photo” height=”30″ width=”30″ loading=”lazy” />
</div>
</a>
<h2 style=”text-align:center”> <a href=”https://npc.ink/pc/venom-green-vs/” target=”_blank”>暗绿色毒液
Win10主题</a> </h2>
<div class=”rxcerpt” style=”text-align: center;”>
<a>tag</a>
<a>tag</a>
<a>tag</a>
<a>tag</a>
</div>
<div class=”list-footer”>
<span class=”post-list-meta-avatar”><i class=”b2font b2-time
“></i>9月27日 10:20</span>
<span> <span><i class=”b2font b2-love
“></i>1</span> <span class=”listt”><i class=”b2font b2-xingzhuangcopy
“></i><a href=”https://npc.ink/pc/venom-green-vs/#comments” class=”commentslink”>9</a></span> <span class=”listt”><i
class=”b2font b2-eye”></i>7481</span> </span>
</div>
</div>
</div>
</li>
<li class=”post-list-item”>
<div class=”item-in yj yy bs”>
<div class=”post-module-thumb” style=”padding-top:56.25%”>
<a href=”https://npc.ink/animated/os-master-yi/” target=”_blank” class=”thumb-link”><img
class=”post-thumb lazy loaded” data-src=”https://dl.zhutix.net/2020/09/PsyOps-Master-Yi.gif”
src=”https://dl.zhutix.net/2020/09/PsyOps-Master-Yi.gif” data-was-processed=”true” loading=”lazy” /></a>
<span class=”fenlj”>动态壁纸</span>
</div>
<div class=”post-info”>
<a class=”grid_author_avt”>
<div class=”grid_author_bggo avatar bg-cover”>
<img alt=”” src=”./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_42,w_42″
srcset=”./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_84,w_84 2x”
class=”avatar avatar-30 photo” height=”30″ width=”30″ loading=”lazy” />
</div>
</a>
<h2 style=”text-align:center”> <a href=”https://npc.ink/animated/os-master-yi/” target=”_blank”>英雄联盟
无极剑圣·暗影动态壁纸</a> </h2>
<div class=”rxcerpt” style=”text-align: center;”>
<a>tag</a>
<a>tag</a>
<a>tag</a>
<a>tag</a>
</div>
<div class=”list-footer”>
<span class=”post-list-meta-avatar”><i class=”b2font b2-time
“></i>9月27日 8:00</span>
<span> <span><i class=”b2font b2-love
“></i>1</span> <span class=”listt”><i class=”b2font b2-xingzhuangcopy
“></i><a href=”https://npc.ink/animated/os-master-yi/#respond” class=”commentslink”>0</a></span> <span class=”listt”><i
class=”b2font b2-eye”></i>49</span> </span>
</div>
</div>
</div>
</li>
<li class=”post-list-item”>
<div class=”item-in yj yy bs”>
<div class=”post-module-thumb” style=”padding-top:56.25%”>
<a href=”https://npc.ink/animated/bh3-zgkm/” target=”_blank” class=”thumb-link”><img
class=”post-thumb lazy loaded”
data-src=”https://dl.zhutix.net/2020/09/Zhuge-Kongming-Honkai-Impact-3.gif”
src=”https://dl.zhutix.net/2020/09/Zhuge-Kongming-Honkai-Impact-3.gif” data-was-processed=”true”
loading=”lazy” /></a>
<span class=”fenlj”>动态壁纸</span>
</div>
<div class=”post-info”>
<a class=”grid_author_avt”>
<div class=”grid_author_bggo avatar bg-cover”>
<img alt=”” src=”./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_42,w_42″
srcset=”./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_84,w_84 2x”
class=”avatar avatar-30 photo” height=”30″ width=”30″ loading=”lazy” />
</div>
</a>
<h2 style=”text-align:center”> <a href=”https://npc.ink/animated/bh3-zgkm/” target=”_blank”>崩坏3 诸葛孔明
动态壁纸</a> </h2>
<div class=”rxcerpt” style=”text-align: center;”>
<a>tag</a>
<a>tag</a>
<a>tag</a>
<a>tag</a>
</div>
<div class=”list-footer”>
<span class=”post-list-meta-avatar”><i class=”b2font b2-time
“></i>9月26日 9:20</span>
<span> <span><i class=”b2font b2-love
“></i>1</span> <span class=”listt”><i class=”b2font b2-xingzhuangcopy
“></i><a href=”https://npc.ink/animated/bh3-zgkm/#comments” class=”commentslink”>1</a></span> <span class=”listt”><i
class=”b2font b2-eye”></i>171</span> </span>
</div>
</div>
</div>
</li>
<li class=”post-list-item”>
<div class=”item-in yj yy bs”>
<div class=”post-module-thumb” style=”padding-top:56.25%”>
<a href=”https://npc.ink/animated/yamato-kancolle/” target=”_blank” class=”thumb-link”><img
class=”post-thumb lazy loaded” data-src=”https://dl.zhutix.net/2020/09/Yamato-Kancolle.gif”
src=”https://dl.zhutix.net/2020/09/Yamato-Kancolle.gif” data-was-processed=”true” loading=”lazy” /></a>
<span class=”fenlj”>动态壁纸</span>
</div>
<div class=”post-info”>
<a class=”grid_author_avt”>
<div class=”grid_author_bggo avatar bg-cover”>
<img alt=”” src=”./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_42,w_42″
srcset=”./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_84,w_84 2x”
class=”avatar avatar-30 photo” height=”30″ width=”30″ loading=”lazy” />
</div>
</a>
<h2 style=”text-align:center”> <a href=”https://npc.ink/animated/yamato-kancolle/”
target=”_blank”>舰队Collection:大和动态壁纸</a> </h2>
<div class=”rxcerpt” style=”text-align: center;”>
<a>tag</a>
<a>tag</a>
<a>tag</a>
<a>tag</a>
</div>
<div class=”list-footer”>
<span class=”post-list-meta-avatar”><i class=”b2font b2-time
“></i>9月26日 9:10</span>
<span> <span><i class=”b2font b2-love
“></i>1</span> <span class=”listt”><i class=”b2font b2-xingzhuangcopy
“></i><a href=”https://npc.ink/animated/yamato-kancolle/#comments” class=”commentslink”>1</a></span> <span
class=”listt”><i class=”b2font b2-eye”></i>109</span> </span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<style type=”text/css”>
.post-item-1 ul.b2_gap>li {
width: 25%;
}
.item-in {
margin: 10px !important;
transition: all .3s ease-out;
}
.yy {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
}
.bs {
background-color: rgba(255, 255, 255, 0.9) !important;
}
.yj {
border-radius: 6px !important;
}
.item-in {
overflow: initial;
}
.item-in.yj .post-thumb {
border-radius: 6px 6px 0 0;
}
.post-module-thumb .fenlj {
position: absolute;
border-radius: 5px 5px 0 0;
bottom: -1px;
right: 10px;
z-index: 1;
font-size: 12px;
color: #474747;
line-height: 20px;
padding: 1px 8px 0;
background-color: #FFFFFF;
}
.post-info {
padding: 15px 10px 10px 10px;
}
.grid_author_avt {
position: relative;
z-index: 2;
display: block;
width: 100px;
height: 32px;
margin-top: -29px;
margin-left: -20px;
transform: translateZ(0);
}
.grid_author_avt:after {
content: ”;
position: absolute;
width: 100%;
height: 100%;
background-position: right top;
background-repeat: no-repeat;
background-size: 100px 30px;
background-image: url(https://cdn.ovopd.cn/wp-content/uploads/2020/09/1.svg);
top: -3px;
left: 50%;
transform: translate(-50%, 0);
z-index: -1;
}
.grid_author_bggo {
position: absolute;
margin: auto;
top: 0;
right: 0;
left: 0;
width: 30px;
height: 30px;
border-radius: 50%;
z-index: 2;
}
.bg-cover {
background-size: cover;
background-position: 50% 50%;
}
.grid_author_avt img {
border-radius: 50%;
}
.post-info h2 {
height: 20px;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.list-footer {
margin-top: 0;
font-size: 14px;
color: #999;
padding-top: 13px;
border-top: 0 solid #fafafa;
}
.post-info span {
font-size: 12px;
color: #ccc;
}
.b2_gap>li {
border-bottom: 0 solid #f3f3f3;
border-right: 0 solid #f3f3f3;
box-shadow: 0 0px 0px #f3f3f3;
}
.rxcerpt a {
margin: 0px 0.2em;
}
</style>

左文右图

<div class="jcgj">

<ul class="clearfix">

<li>

<div class="gjysl yy yj bk bs">

<div class="img">

<a href="https://zhutix.com/tools/citie-mei/" target="_blank"> <img class="n-thumb"

src="https://cdn.ovopd.cn/wp-content/uploads/2020/09/Practice-Areas-pic-.png"

style="display: block;" /> </a>

</div>

<h3><a href="https://zhutix.com/tools/citie-mei/" target="_blank">Win10开始菜单磁贴美化小工具</a></h3>

<p class="excerpt">软件介绍：该软件的目的很简单，就是把丑丑的默认磁贴美化一下，让磁贴赏心悦目~ 相比其他同类软件，该软件特点有：支持调色板支持屏幕取色支持自定义背景图支持

动态图片磁贴

支持预览磁贴效果图 …</p>

<div class="list-meta">

<span class="time"><i class="b2font b2-time"></i> 9-14</span>

<span class="views"><i class="b2font b2-eye"></i> 62134</span>

<span class="comments"><i class="b2font b2-eye"></i> <a

href="https://zhutix.com/tools/citie-mei/#comments" class="commentslink">80</a></span>

</div>

</div>

</li>

<li>

<div class="gjysl yy yj bk bs">

<div class="img">

<a href="https://zhutix.com/tools/startisback-plus-pojie/" target="_blank"> <img class="n-thumb"

src="https://dl.zhutix.net/2019/04/sb.jpg?x-oss-process=image/resize,limit_0,m_fill,w_120,h_90"

style="display: block;" /> </a>

</div>

<h3><a href="https://zhutix.com/tools/startisback-plus-pojie/"

target="_blank">Win8/Win10开始菜单程序StartIsBack++

2.9.5</a></h3>

<p class="excerpt">StartIsBack

是一款Win8和Win10开始菜单辅助工具,可以让Win8和Win10能够使用跟Win7中一样的经典开始菜单，此款软件小巧且不需要繁琐的设置，在同类软件中应该是最好的，推荐大家使用。

此版本为官方30天试 …</p>

<div class="list-meta">

<span class="time"><i class="b2font b2-time"></i> 9-3</span>

<span class="views"><i class="b2font b2-eye"></i> 418898</span>

<span class="comments"><i class="b2font b2-eye"></i> <a

href="https://zhutix.com/tools/startisback-plus-pojie/#comments"

class="commentslink">110</a></span>

</div>

</div>

</li>

<li>

<div class="gjysl yy yj bk bs">

<div class="img">

<a href="https://zhutix.com/software/uninstall-tool/" target="_blank"> <img class="n-thumb"

src="https://dl.zhutix.net/2020/09/Uninstall-Tool-1.jpg?x-oss-process=image/resize,limit_0,m_fill,w_120,h_90"

style="display: block;" /> </a>

</div>

<h3><a href="https://zhutix.com/software/uninstall-tool/" target="_blank">Uninstall Tool v3.5.10 绿色版</a>

</h3>

<p class="excerpt">Uninstall Tool 是款可以用来替代“添加/删除程序”的工具，Uninstall Tool

可显示隐藏的安装程序，按名称过滤已安装程序的列表，强行卸载程序，浏览注册表项目，保存安装程序列表，快速小巧，操作简便。功 …</p>

<div class="list-meta">

<span class="time"><i class="b2font b2-time"></i> 9-2</span>

<span class="views"><i class="b2font b2-eye"></i> 1589</span>

<span class="comments"><i class="b2font b2-eye"></i> <a

href="https://zhutix.com/software/uninstall-tool/#comments"

class="commentslink">5</a></span>

</div>

</div>

</li>

</ul>

</div>

<style type="text/css">

.jcgj ul li {

width: 33.333%;

float: left;

display: inline-block;

padding: 10px;

}

.gjysl {

padding: 8px 8px 4px 6px;

position: relative;

height: 90px;

}

.bk {

border: 1px solid #f1f1f1 !important;

}

.yy {

box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);

-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);

-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);

}

.bs {

background-color: rgba(255, 255, 255, 0.9) !important;

}

.yj {

border-radius: 6px !important;

}

/*1*/

.jcgj ul li .img {

position: absolute;

top: 0;

left: 0;

overflow: hidden;

}

.jcgj ul li img {

width: 120px;

height: 89px;

transition: all .3s ease-out 0s;

border-radius: 0px 6px 6px 0px;

object-fit: cover;

background: #f0f0f0;

display: block;

font-size: 0;

}

/*2*/

.jcgj ul li h3 {

font-size: 16px;

margin-bottom: 8px;

font-weight: normal;

}

.jcgj ul li h3 a {

line-height: 20px;

overflow: hidden;

-o-text-overflow: ellipsis;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 1;

-webkit-box-orient: vertical;

height: 20px;

}

/*3*/

.jcgj ul li .excerpt {

color: #AAB2BD;

font-size: 12px;

line-height: 20px;

overflow: hidden;

-o-text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 1;

-webkit-box-orient: vertical;

height: 20px;

white-space: nowrap;

text-overflow: ellipsis;

list-style-type: none;

}

/*4*/

.jcgj ul li .list-meta {

color: #8a92a9;

font-size: 13px;

position: absolute;

bottom: 3px;

left: 130px;

max-height: 24px;

overflow: hidden;

}

.jcgj ul li .list-meta span {

margin-right: 10px;

}

.jcgj ul li .list-meta i {

font-size: 14px;

}

/*变换方向*

/*图片*/

.jcgj ul li .img {

right: 0;

left: auto;

}

/*描述文本*/

.jcgj ul li .excerpt {

left: 6px;

position: absolute;

max-width: 20em;

}

/*详细信息*/

.jcgj ul li .list-meta {

left: 6px;

padding: 0.4em 0 0 0;

}

/*移动端响应式*/

@media screen and (max-width: 768px) {

.jcgj ul li {

width: 100% !important;

padding: 10px 0px !important;

}

}

</style>

声明：
1.本网站资源来源于网络收集，如有侵权，请联系站长进行删除处理。请发送邮件至：chensi2024@foxmail.com，我们将第一时间处理！
2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持本站资源售价只是赞助，收取费用仅维持本站的日常运营所需。
3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读网站声明。
4.如下载链接失效，请在当前页留言或私信管理员，24小时必处理结束！
5.本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解。
6.本站提供的资源仅限用于学习交流和研究目的。不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险以及产生法律纠纷与本站无关，您必须在下载后的24个小时之内，从您的电脑/手机中彻底删除。