WordPress添加四格小工具

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

目录

    第一步:引入JS

    <script src="https://use.fontawesome.com/865314f53c.js"></script>

    第二步:将下面代码放到需要展示的位置

    <div class="home-first">
            <div class="aibkcontainer hide_sm">
                <div class="row">
                    <div class="col-1-4">
                        <div class="hf-widget hf-widget-1 hf-widget-software">
                            <h3 class="hf-widget-title"> <svg class="libs1yui" aria-hidden="true"><use xlink:href="#sdk-gerenzhongxin_gengxin"></use></svg>
                            <a href="#" target="_blank">个人中心</a><span>七安欢迎你</span>
                                <div class="pages">
                                    <i class="prev"> <svg class="libsyui" aria-hidden="true"><use xlink:href="#sdk-fangxiang-xiangzuo"></use></svg></i>
                                    <i class="next"><svg class="libsyui" aria-hidden="true"><use xlink:href="#sdk-fangxiang-xiangyou"></use></svg></i>
                                </div></h3>
                            <div class="hf-widget-content">
                                <div class="scroll-h">
                                    <ul>
                                        <li><a href="/directmessage" rel="external nofollow" target="_blank"><svg class="libyui" aria-hidden="true"><use xlink:href="#sdk-sixin-icon"></use></svg><span>私信列表</span></a></li>
                                        <li><a href="/mission/today" target="_blank"><svg class="libyui" aria-hidden="true"><use xlink:href="#sdk-daka1"></use></svg><span>签到排行</span></a></li>
                                        <li><a href="/task" target="_blank"><svg class="libyui" aria-hidden="true"><use xlink:href="#sdk-task"></use></svg><span>任务中心</span></a></li>
                                        <li><a href="https://www.67an.com/" target="_blank"><svg class="libyui" aria-hidden="true"><use xlink:href="#sdk-guanfangruzhu"></use></svg><span>官方网址</span></a></li>
                                    </ul>
                            
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-1-4">
                        <div class="hf-widget hf-widget-2">
                            <h3 class="hf-widget-title"> <svg class="libs1yui" aria-hidden="true"><use xlink:href="#sdk-gongsigonggao"></use></svg><a href="#" target="_blank">网站公告</a><span>本站介绍</span> </h3>
                            <div class="hf-widget-content">
                                <div class="no-scroll hf-tags">
                                    <a class="style_orange" href="https://www.67an.com/abouts-user" target="_blank"><span>一些和本站相关的说明</span></a>
                                                       
        
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-1-4">
                        <div class="hf-widget hf-widget-1 hf-widget-hot-cats">
                            <h3 class="hf-widget-title"><svg class="libs1yui" aria-hidden="true"><use xlink:href="#sdk-tese"></use></svg>
                            <a href="#" target="_blank">本站类别</a><span>快速了解本站</span> </h3>
                            <div class="hf-widget-content">
                                <div class="scroll-h">
                                    <ul>
                                        <li><a href="/yz_rj" target="_blank"><svg class="libyui" aria-hidden="true"><use xlink:href="#sdk-baokuan"></use></svg><span>优质软件</span></a></li>
                                        <li><a href="/muyujc" target="_blank"><svg class="libyui" aria-hidden="true"><use xlink:href="#sdk-jiaocheng-5"></use></svg><span>教程技术</span></a></li>
                                        <li><a href="/ad_roid" target="_blank"><svg class="libyui" aria-hidden="true"><use xlink:href="#sdk-anzhuo"></use></svg><span>安卓大全</span></a></li>
                                        <li><a href="/others_sdk" target="_blank"><svg class="libyui" aria-hidden="true"><use xlink:href="#sdk-a-ziyuan412"></use></svg><span>其他</span></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-1-4">
                        <div class="hf-widget hf-widget-4">
                            <h3 class="hf-widget-title"> <svg class="libs1yui" aria-hidden="true"><use xlink:href="#sdk-fuwu"></use></svg><a href="#" target="_blank">快速浏览</a><span>充足准备</span>
                                <div class="pages">
                                    <i class="prev"> <svg class="libsyui" aria-hidden="true"><use xlink:href="#sdk-fangxiang-xiangzuo"></use></svg></i>
                                    <i class="next"> <svg class="libsyui" aria-hidden="true"><use xlink:href="#sdk-fangxiang-xiangyou"></use></svg></i>
                                </div></h3>
                            <div class="hf-widget-content">
                                <div class="scroll-h">
                                    <ul>
                                        <li><h3><a href="/xt_sat" target="_blank"> <i class="icon-time"></i> <span>关于日常系统的一些知识</span><em>系统科技</em></a></h3></li>
                                        <li><h3><a href="/wz_yua" target="_blank"> <i class="icon-time"></i> <span>比较常用的一些源码分享</span><em>源码助手</em></a></h3></li>
                                    </ul>
                                    </div></div></div></div></div></div></div>

    第三步:CSS美化代码

     /*4g*/
     .libs1yui {
        width: 1.3em;
        height: 1.3em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    
        margin-right: 3px;
      }   
    .libsyui {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }    
    .libyui {
        width: 3em;
        height: 3em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    @media screen and (max-width: 768px){
        .home-first .hf-widget-4 .hf-widget-content ul li{padding-left:12px;}
    }
    .home-first {
        margin-bottom: 0px
    }
    
    @media (min-width:1024px) {
        .home-first {
            background: #fcfcfc
        }
    }
    
    .home-first .aibkcontainer {
        padding-top: 0
    }
    
    .home-first .vitara_slide_in {
        margin-top: 15px;
        margin-bottom: 15px;
        border-radius: 3px
    }
    
    @media (min-width:1024px) {
        .home-first .vitara_slide_in {
            margin-top: 0;
            margin-bottom: 0
        }
    }
    
    .home-first .h-images {
        box-sizing: content-box;
        margin: 0;
        padding: 0
    }
    
    .home-first .h-images:after,.home-first .h-images:before {
        clear: both;
        display: block;
        visibility: none;
        height: 0;
        content: "";
        line-height: 0
    }
    
    .home-first .h-images:after {
        display: block;
        margin: 0 -15px;
        height: 0;
        border-bottom: 15px solid #f2f2f2;
        content: ''
    }
    
    @media (min-width:768px) {
        .home-first .h-images:after {
            display: none
        }
    }
    
    @media (min-width:768px) {
        .home-first .h-images {
            display: box;
            display: -ms-flexbox;
            display: flex;
            width: 100%;
            justify-content: space-between
        }
    }
    
    @media (min-width:1024px) {
        .home-first .h-images {
            width: 25%
        }
    }
    
    .home-first .h-images .item-tuwen {
        float: left;
        padding: 0 6.5px;
        width: 50%
    }
    
    @media (min-width:1024px) {
        .home-first .h-images .item-tuwen {
            float: none
        }
    }
    
    @media (min-width:1024px) {
        .home-first .h-images {
            display: block;
            box-sizing: border-box;
            padding: 0 7.3333px
        }
    
        .home-first .h-images .item-tuwen {
            padding: 0;
            width: auto
        }
    }
    
    .home-first .item-tuwen {
        margin-bottom: 15px
    }
    
    @media (min-width:768px) {
        .home-first .item-tuwen {
            margin-bottom: 13px
        }
    }
    
    .home-first .item-tuwen a {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 3px
    }
    
    .home-first .item-tuwen a .thumb {
        padding-top: 57%;
        transition: all .2s;
        transform-origin: center
    }
    
    .home-first .item-tuwen a strong {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        display: block;
        padding: .4em .8em .6em;
        background-image: linear-gradient(to bottom,rgba(0,0,0,.2) 0,rgba(0,0,0,.6) 100%);
        background-repeat: repeat-x;
        box-shadow: 0 -7px 15px rgba(0,0,0,.2);
        color: #fff;
        letter-spacing: .5px;
        font-weight: 700;
        font-size: 9pt;
        line-height: 1.3
    }
    
    @media (min-width:768px) {
        .home-first .item-tuwen a strong {
            letter-spacing: 1px;
            font-size: 14px;
            line-height: 1.4
        }
        
    }
    
    
    .home-first .hf-widget {
        box-sizing: border-box;
        margin-bottom: 15px;
        padding: 14px 17px 0;
        border: 1px solid #f2f2f2;
        background: #fff;
        box-shadow: 8px 8px 9pt  rgba(255, 255, 255, 0);
    }
    
    @media (min-width:768px) {
        .home-first .hf-widget {
            overflow: hidden;
            height: 135px
        }
        
    }
    
    @media (min-width:1024px) {
        .home-first .hf-widget {
            margin-bottom: 0
        }
    }
    
    .home-first .hf-widget [class*=" icon-"]:before,.home-first .hf-widget [class^=icon-]:before {
        margin: 0
    }
    
    .home-first .hf-widget .hf-widget-title {
        margin-bottom: 14px;
        padding: 0 0 10px;
        border-bottom: 1px solid #f2f2f2;
        color: #383838;
        letter-spacing: 1px;
        font-weight: 700;
        font-size: 15px;
        line-height: 20px
    }
    
    .home-first .hf-widget .hf-widget-title a {
        color: #383838
    }
    
    .home-first .hf-widget .hf-widget-title>i {
        margin-right: 2px;
        color: #ff5c00
    }
    
    .home-first .hf-widget .hf-widget-title span {
        margin-left: 10px;
        color: #a7a7a7;
        font-weight: 400;
        font-size: 9pt;
        line-height: 20px
    }
    
    @media (min-width:1024px) {
        .home-first .hf-widget .hf-widget-title span {
            display: none
        }
    }
    
    @media (min-width:1330px) {
        .home-first .hf-widget .hf-widget-title span {
            display: inline
        }
    }
    
    .home-first .hf-widget .hf-widget-title .pages {
        float: right;
        padding-top: 2px
    }
    
    .home-first .hf-widget .hf-widget-title .pages .next,.home-first .hf-widget .hf-widget-title .pages .prev {
        float: left;
        margin: 0;
        padding: 0 2px;
        height: 1pc;
        border: 0px solid #eee;
        color: #ccc;
        font-size: 15px;
        line-height: 15px;
        cursor: pointer
    }
    
    .home-first .hf-widget .hf-widget-title .pages .next:hover,.home-first .hf-widget .hf-widget-title .pages .prev:hover {
        color: #ff5c00
    }
    
    .home-first .hf-widget .hf-widget-title .pages .prev {
        border-right: none
    }
    
    .home-first .hf-widget .hf-tags {
        margin-bottom: -10px
    }
    
    @media (min-width:768px) {
        .home-first .hf-widget .hf-tags {
            overflow: hidden;
            height: 4pc
        }
    }
    
    .home-first .hf-widget .hf-tags a {
        display: inline-block;
        margin: 0 5px 10px;
        padding: 0 5px;
        height: 22px;
        border-radius: 2px;
        background: #f9f9f9;
        color: #888;
        white-space: nowrap;
        font-size: 9pt;
        line-height: 22px;
        word-break: break-all
    }
    
    .home-first .hf-widget .hf-tags a.style_orange,.home-first .hf-widget .hf-tags a:hover {
        background: #ff5c00;
        color: #fff
    }
    
    .home-first .hf-widget-4 .hf-widget-title {
        margin-bottom: 19px
    }
    
    .home-first .hf-widget-4 .hf-widget-content {
        color: #888;
        font-size: 14px
    }
    
    .home-first .hf-widget-4 .hf-widget-content a {
        color: #888
    }
    
    .home-first .hf-widget-4 .hf-widget-content a:hover {
        color: #ff5c00
    }
    
    .home-first .hf-widget-4 .hf-widget-content h3 {
        overflow: hidden;
        height: 22px;
        font-weight: 400;
        font-size: 13px;
        line-height: 22px
    }
    
    .home-first .hf-widget-4 .hf-widget-content em {
        float: right;
        padding: 0 5px;
        height: 22px;
        border-radius: 2px;
        background: #fff5ef;
        color: #ff5c00;
        font-style: normal;
        font-size: 9pt;
        line-height: 22px
    }
    
    .home-first .hf-widget-4 .hf-widget-content ul {
        background: #fff
    }
    
    .home-first .hf-widget-4 .hf-widget-content ul li {
        margin-bottom: 5px
    }
    
    .home-first .hf-widget-4 .hf-widget-content ul li:last-child {
        margin-bottom: 0
    }
    
    .home-first .hf-widget-1 .hf-widget-content a {
        color: #888
    }
    
    .home-first .hf-widget-1 .hf-widget-content a:hover {
        color: #ff5c00
    }
    
    .home-first .hf-widget-1 .hf-widget-content li {
        float: left;
        box-sizing: border-box;
        padding: 0 10px;
        width: 25%;
        text-align: center;
        font-size: 9pt
    }
    
    .home-first .hf-widget-1 .hf-widget-content li .thumb {
        margin: 0 auto 4px;
        padding-top: 36px;
        width: 36px
    }
    
    .home-first .hf-widget-1 .hf-widget-content li span {
        display: block;
        overflow: hidden;
        height: 1pc;
        line-height: 1pc
    }
    
    .home-first .hf-widget-1 .hf-widget-content .scroll-h {
        margin: 0 -10px
    }
    
    .home-first .scroll-h {
        position: relative;
        overflow: hidden;
        height: 56px
    }
    
    .home-first .scroll-h ul {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        transition: all .2s
    }
    
    .home-first .scroll-h ul:after,.home-first .scroll-h ul:before {
        clear: both;
        display: block;
        visibility: none;
        height: 0;
        content: "";
        line-height: 0
    }
    
    .home-first .scroll-h .holdon {
        position: absolute;
        top: 0;
        left: 100%
    }
    
    .home-first .scroll-h .holdon-prev {
        left: -100%
    }
    
    .home-first .hf-widget-hot-cats .hhicon {
        display: inline-block;
        margin-bottom: 5px;
        width: 36px;
        height: 36px;
        border-radius: 100%;
        background: #fff5f0;
        color: #ff5c00;
        text-align: center;
        font-size: 20px;
        line-height: 36px
    }
    
    .home-first .hf-widget-hot-cats .scroll-h li a {
        display: block
    }
    
    .home-first .hf-widget-hot-cats .scroll-h li a:hover .hhicon {
        background: #ff5c00;
        color: #fff
    }
    
    .home-first .thumb {
        position: relative;
        display: block;
        overflow: hidden;
        padding-top: 66.7%;
        width: 100%;
        height: 0;
        background-color: transparent;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        transition: all .2s
    }
    
    .home-first i {
        font-weight: 300
    }
    
    @media screen and (max-width:720px) {
        .home-first .hf-widget-1 .hf-widget-content .scroll-h,.home-first .hf-widget-content {
            margin: 1pc -10px
        }
    }
    
    
    .aibkcontainer {
        position: relative;
        overflow: hidden;
        margin: 0 auto;
        width: 100%
    }
    @media (min-width:768px) {
        .aibkcontainer {
            overflow: visible;
            max-width: 8in
        }
    }
    @media (min-width: 1024px){
    .aibkcontainer {
        max-width: 100%;
    }
    }
    @media (min-width: 1024px){
    .container {
        max-width: 1300px;
    }
    }
    .aibkcontainer:after,.aibkcontainer:before {
        clear: both;
        display: block;
        visibility: none;
        height: 0;
        content: "";
        line-height: 0
    }
    
    .aibkcontainer .row {
        margin: 0 -7.3333px
    }
    
    .aibkcontainer .col-1-4,.aibkcontainer .col-2-4,.aibkcontainer .col-3-4 {
        float: left;
        box-sizing: border-box;
        padding: 0 7.3333px;
        width: 100%
    }
    
    @media (min-width:768px) {
        .aibkcontainer .col-1-4 {
            width: 50%
        }
    }
    
    @media (min-width:1024px) {
        .aibkcontainer .col-1-4 {
            width: 25%
        }
    }
    
    @media (min-width:768px) {
        .aibkcontainer .col-2-4 {
            width: 100%
        }
    }
    
    @media (min-width:1024px) {
        .aibkcontainer .col-2-4 {
            padding-right: 8px;
            width: 50%
        }
    }
    
    @media (min-width:768px) {
        .aibkcontainer .col-3-4 {
            width: 100%
        }
    }
    
    @media (min-width:1024px) {
        .aibkcontainer .col-3-4 {
            padding-right: 8.6666px;
            width: 75%
        }
    }

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

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


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

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

    WordPress侧栏信息统计

    2021-12-5 14:58:30

    WordPress

    WordPress背景滚动图

    2021-12-5 19:10:10

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