子比主题美化 – 添加一个首页横向滚动图集

效果图

教程开始

进入wordpress后台-外观-小工具–自定义代码

复制下面代码 粘贴进自定义html代码框 保存即可

里面的图片路径可自行替换

<style>
    .item.scroll {
        left: 0px;
        width: 100%;
        height: 420px;
        background-size: auto 100%;
        pointer-events: none;
        background-position: center center;
        background-repeat: no-repeat;
        transition: opacity 0.3s ease 0s;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        font-size: 0;
        background: #000;
        word-wrap: break-word;
        box-sizing: border-box;
        outline: none;
    }
        
    </style>
    <div class="home_row">
        <div class="tengfei_wrapper">
            <div class="home-row-left fa3795 content-area ">
                <div class="">
                    <div id="html-box-sdadsgfd" class="html-box">
                        <div id="html-box-head1" class="html-box">
                            <div class="toptu">
                                <div class="item scroll">
                                    <img class="scroll-image lazyloaded" src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01MEmZoo1QbIms2e8c8_!!2210123621994.jpg"
                                    data-was-processed="true">
                                    <img class="scroll-image lazyloaded" src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01MEmZoo1QbIms2e8c8_!!2210123621994.jpg"
                                    data-was-processed="true">
                                    <div class="sc-1wssj0-17 hVBrzU">
                                        <img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN014IPlfD1QbImrwYDdq_!!2210123621994.png"
                                        class="lazyloaded" data-was-processed="true">
                                    </div>
                                </div>
                            </div>
                            <style type="text/css">
                                .home_row {margin-top: 16px;} .home_row_0 {margin-top: 3px;} .home_row_0
                                .tengfei_wrapper,.home_row_0 .tengfei_wrapper .box {width: 100%!important;box-shadow: none;}
                                .box{box-shadow: none;} .lazy { opacity: 1; } .sc-1wssj0-17 img { width:
                                auto; }
                            </style>
                            <style type="text/css">
                                /*horizontal scroll Style start*/ .item.scroll{left: 0px;width: 100%;height:
                                420px;background-size: auto 100%;pointer-events: none;background-position:
                                center center;background-repeat: no-repeat;transition: opacity 0.3s ease
                                0s;white-space: nowrap;overflow: hidden;position: relative;font-size: 0;background:
                                #000;word-wrap: break-word;box-sizing: border-box;outline: none;} .item.scroll
                                .scroll-image{position: relative;height: 100%;transform: translateX(0px);animation:
                                banner 40s linear infinite;opacity: 0.5;border: 0;-ms-interpolation-mode:
                                bicubic;vertical-align: middle;} .hVBrzU{position: absolute;top: 70px;left:
                                0px;right: 0px;text-align: center;font-size: 16px;white-space: normal;width:
                                100%;margin: auto;} .statics{position: static;margin-top: -76px;padding-left:
                                16px;padding-right: 16px;margin-left: auto;margin-right: auto;margin-bottom:
                                20px;} @media (max-width:767px){.static{display: none}} @media (max-width:767px){.home-course{display:
                                none}.home-subjects{display: none}} .statics .flex{padding: 0;margin: 0;display:
                                flex;} @media (max-width:767px){.statics{display: none}} .statics li.st_one{flex:
                                1;margin-right: 10px;border-radius: 6px;overflow: hidden;position: relative;box-shadow:
                                0 2px 5px rgba(0,0,0,.2);list-style: none;transition: all .3s ease-out;}
                                .statics li.st_one:hover{transform: translateY(5px);} .statics li.st_one:last-child{margin-right:
                                0;} .statics .st_one .card-main{width: 100%;} .statics .active-card-title{position:
                                absolute;bottom: 0;color: #fff;background: -webkit-gradient(linear,left
                                bottom,left top,color-stop(0,rgba(0,0,0,.7)),to(transparent));width: 100%;padding:
                                12px 20px;font-size: 16px;margin: 0;} @media screen and (max-width:900px){.item.scroll{height:
                                200px;margin-top: 0;}} .sc-1wssj0-17 img{display: inline-block;} @-webkit-keyframes
                                banner{from{-webkit-transform: translateX(0);-ms-transform: translateX(0);transform:
                                translateX(0);}to{-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);transform:
                                translateX(-100%);}} @keyframes banner{from{-webkit-transform: translateX(0);-ms-transform:
                                translateX(0);transform: translateX(0);}to{-webkit-transform: translateX(-100%);-ms-transform:
                                translateX(-100%);transform: translateX(-100%);}} .item img{display: inline-block;height:
                                auto;max-width: 100%;vertical-align: middle;} /*horizontal scroll Style
                                end*/
                            </style>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>