文章
文章

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

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

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

可以放在HTML模块中。

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

代码如下

<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">英雄联盟
                无极剑圣&middot;暗影 动态壁纸</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>

左文右图

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

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

 

给TA打赏
共{{data.count}}人
人已打赏
其他源码

仿致美化长图+宽图排版 - B2美化

2020-10-13 7:28:05

其他源码

添加哔哩哔哩充电样式 - B2美化

2020-10-14 4:40:39

0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

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

  • 扫码打开当前页

返回顶部