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

Jaysun

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

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

可以放在HTML模块中。

注意:可能是因为版本升级具体位置会有所改变,如失效需自己调整。


效果图:

1.jpg


代码如下

隐藏内容
评论可见
前往评论

左文右图

1.jpg


代码如下:

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


您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 7 条评论,900人围观)
网友昵称:1875866112
1875866112 V 普通用户 Safari 17.3.1 Apple iPhone 7楼
02-20 来自河南 回复
看看
网友昵称:zx2090
zx2090 V 普通用户 Google Chrome 119.0.0.0 Windows 10 x64 6楼
2023-11-09 来自贵州 回复
文章写的额不错
网友昵称:yixinis
yixinis V 普通用户 Google Chrome 97.0.4692.99 Windows 7 x64 地板
2023-08-14 来自江西 回复
感谢分享,学习学习
网友昵称:xiegang
xiegang V 普通用户 IBrowse r Huawei Browser 凉席
2023-07-10 来自陕西 回复
文章不错,写的很好!
网友昵称:root666
root666 V 普通用户 Google Chrome 113.0.0.0 Windows 10 x64 板凳
2023-07-04 来自伊朗 回复
感谢分享,学习学习~
网友昵称:wang259797
wang259797 V 普通用户 Google Chrome 114.0.0.0 Mac OS X 10.15.7 椅子
2023-06-29 来自上海 回复
感谢分享,学习学习~
网友昵称:小小飞行员
小小飞行员 V 普通用户 115Browser 25.0.6.5 Windows 10 x64 沙发
2023-06-24 来自北京 回复
文章不错,写的很好!

目录[+]

取消
微信二维码
微信二维码
支付宝二维码