7B2美化|首页动态视频搜索模块

1.添加搜索模块

将以下代码放至主题模块中（主题设置-模块管理-自定义代码），自己改动一下里面的视频网址和url主页的路径

<!--动态搜索背景html代码开始-->
<style>
    .poa {
        color: #f4f4f4;
    }
    p.home-banner-linkss.line-one1 {
        width: 80%;
        font-size: 14px;
        height:
            20px;
        line-height: 20px;
        color: #f4f4f4;
        text-shadow: 0 2px 4px rgb(0 0 0 / 27%);
        margin-top: 40px;
        text-align: center;
    }
</style>
<div id="page-wrapper">
    <div class="home-banner por">
        <section class="section">
            <div class="video-wrapper">
                <video autoplay playsinline="" loop muted="" src="视频链接">
                </video>
            </div>
            <div class="video-overlay">
            </div>
        </section>
        <div class="wrapper  poa" style="top: 0;left: 50%;margin-left: -600px;">
            <div class="home-banner-content Onecad_clearfix">
                <div class="slogan-text por fl">
                    <p>佐佐佑佑</p>
                    <a href="" target="_blank">
                    </a>
                    <p class="promote-sub-title line-one">
                        少年自当扶摇上，揽星衔月逐日光。 </p>
                </div>
            </div>
            <div class="home-banner-search por searchv2-top-m">
                <div class="primary-menus" style=" width: 92%; position: unset;transform: translate(1px, 1px);">
                       <div class="cont">
                        <div class="left-cont">
                            <form class="search hidden" id="search_3" action="https://zzyyi.com/?s=" method="get" target="_blank">
                                <input type="text" name="q" class="" placeholder="输入关键词 按回车搜索">
                                <button type="submit" name="" class="btn ">
                                    站内搜索
                                </button>
                            </form>
                            <form class="search" id="search_4" action="https://zzyyi.com/?s=" method="get" target="_blank">
                                <input type="text" name="s" class="s" placeholder="输入关键词 按回车搜索">
                                <button type="submit" name="" class="btn">
                                    站内搜索
                                </button>
                            </form>
                            <a class="hot-top text-notify" href="/tags" target="_blank" tips="标签" direction="bottom">
                                
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    /*首页动态大图搜索开始*/
    (function($) {
        var m = $('.primary-menus');
        if (m.length < 1) return;
        var ul = m.find('.selects');
        if (ul.length < 1) return;
        var lis = ul.children('li');
        if (lis.length < 1) return;
        var s = m.find('.search');
        var sVal = s.find('.s').val();
        lis.on('click', function() {
            var d = $(this).attr('data-target');
            if (d) {
                lis.removeClass('current');
                $(this).addClass('current');
                s.addClass('hidden');
                s.filter('#' + d).removeClass('hidden');
                s.filter('#' + d).find('.s').trigger('focusin');
            }
        });
        s.find('.s').on('focusin', function() {
            if ($(this).val() == sVal) {
                $(this).val('');
            }
        })
        s.find('.s').on('focusout', function() {
            var v = $(this).val();
            if (orz.isEmpty(v)) {
                v = sVal;
            }
            s.find('.s').val(v);
        })
    })(jQuery);
    /*首页动态大图搜索结束*/
</script>
<!-- 动态背景搜索html代码结束 -->

2.CSS美化搜索模块

将下列CSS代码放入WP额外CSS中（WP后台-外观-自定义-额外css），子主题的css也可以

3.引入jquery

在主题设置-常规设置-头部html加入以下代码（header.php文件的</head>标签之前也可以）。这个B2主题好像自带，大家如果上面设置了不生效，那就引用一下，生效就不管了。

<script type='text/javascript' src='https:/你的网址/js/jquery.min.js'></script>