B2主题-B2美化炫酷的视频动态首页搜索区块

释放双眼，带上耳机，听听看~！

本文是《B2主题美化（共19篇）》专题的第 14 篇。阅读本文前，建议先阅读前面的文章：

效果：

B2主题-B2美化炫酷的视频动态首页搜索区块

初次看到这个首页搜索的时候随口一句”卧槽，好几把炫酷”脱口而出！毕竟雀实炫酷。

事情起初是群里某位小伙伴发了一个网站，说这玩意炫酷，能不能搬到wordpress B2 主题上，答案是肯定的。目前还没看到别人发过。

废话不多说上代码：

<!--首页视频区块-->
<div id="page-wrapper">

    <div class="home-banner por">
        <section class="section">
            <div class="video-wrapper"> <video
                    poster="/wp-content/themes/b2child/Custom/mp4sousou/images/2f518848202a4.webp" autoplay="autoplay"
                    playsinline="" loop="loop" muted="" src="https://momeis.net.net/mp4/565077702-1-2081651417972617.mp4"
                    __idm_id__="2285569"></video> </div>
            <div class="video-overlay"></div>
        </section>
        <div class="layout-center poa" style="width: 1200px;top: 0;left: 50%;margin-left: -600px;">
            <div class="home-banner-content clearfix">
                <div class="slogan-text por fl">
                    <p>欢迎您的到来-墨梅博客</p><a href="/shipin-sp/all-def-all-all-all-1-all-all-0-1.html" target="_blank"><i
                            class="iblock poa corner"></i></a>
                    <p class="promote-sub-title line-one">已发布 <span
                            style="width: 70px;display: inline-block;overflow: hidden;line-height: 34px;vertical-align: -9px;margin-right: -30px;"><em
                                id="goal-works" value="5351266">
                                <ps style="color: #26d6c8;">
                                    <?php $count_posts = wp_count_posts(); echo $published_posts = $count_posts->publish;?>
                                    </script>
                                    <ps>
                            </em></span>篇文章内容，运行了<ps style="color: #26d6c8;">
                            <script>// <![CDATA[
                                BirthDay = new Date("11 25,2013");
                                today = new Date();
                                timeold = (today.getTime() - BirthDay.getTime());
                                sectimeold = timeold / 1000
                                secondsold = Math.floor(sectimeold);
                                msPerDay = 24 * 60 * 60 * 1000
                                e_daysold = timeold / msPerDay
                                daysold = Math.floor(e_daysold);
                                document.write(daysold);
                // ]]></script>

                        </ps>天</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="search-types-cycles poa">
                        <ul class="selects">
                            <li data-target="search_1">百度 </li>
                            <li data-target="search_2">Bing </li>
                            <li data-target="search_3" class="current">站内搜索 </li>
                            <li data-target="search_4">360 </li>
                            <li data-target="search_5">哔哩哔哩 </li>
                            <li data-target="search_6">头条搜索 </li>
                            <li data-target="search_8">知乎 </li>
                        </ul>
                    </div>
                    <div class="cont">
                        <div class="left-cont">
                            <form class="search hidden" id="search_1" action="https://www.baidu.com/s?wd=" method="get"
                                target="_blank"> <input type="text" name="wd" class="s" placeholder="请输入关键词"> <button
                                    type="submit" name="" class="btn">百度搜索</button> </form>
                            <form class="search hidden" id="search_2" action="https://cn.bing.com/search?q="
                                method="get" target="_blank"> <input type="text" name="q" class="s"
                                    placeholder="请输入关键词"> <button type="submit" name="" class="btn">Bing搜索</button>
                            </form>
                            <form class="search" id="search_3" action="https://momeis.net/?s=" method="get"
                                target="_blank"> <input type="text" name="s" class="s" placeholder="请输入关键词"> <button
                                    type="submit" name="" class="btn">站内搜索</button> </form>
                            <form class="search hidden" id="search_4" action="https://www.so.com/s?q=" method="get"
                                target="_blank"> <input type="text" name="query" class="s" placeholder="请输入关键词"> <button
                                    type="submit" name="" class="btn">360搜索</button> </form>
                            <form class="search hidden" id="search_5" action="https://search.bilibili.com/all?keyword="
                                method="get" target="_blank"> <input type="text" name="q" class="s"
                                    placeholder="请输入关键词">
                                <button type="submit" name="" class="btn">哔哩哔哩</button>
                            </form>
                            <form class="search hidden" id="search_6"
                                action="https://so.toutiao.com/search?dvpf=pc&source=input&keyword=" method="get"
                                target="_blank"> <input type="text" name="q" class="s" placeholder="请输入关键词"> <button
                                    type="submit" name="" class="btn">头条搜索</button> </form>
                            <form class="search hidden" id="search_8" action="https://www.zhihu.com/search?q="
                                method="get" target="_blank">
                                <input type="text" name="q" class="s" placeholder="请输入关键词"> <button type="submit"
                                    name="" class="btn">知乎搜索</button>
                            </form> <a class="hot-top text-notify" href="/collectionser/jss_jsc" target="_blank"
                                tips="教程分享" direction="bottom"> <img
                                    src="/wp-content/themes/b2child/Custom/mp4sousou/images/rank.svg" class="icon-rank"
                                    height="15"> 热门教程</a>
                        </div>
                    </div>
                </div>
                <p class="home-banner-links line-one">热搜词：<a href="https://momeis.net/?s=wordpress" target="_blank"
                        class="iblock">wordpress</a><a href="https://momeis.net/?s=CSS样式" target="_blank"
                        class="iblock">CSS样式</a><a href="https://momeis.net/?s=时间" target="_blank"
                        class="iblock">时间</a><a href="https://momeis.net/?s=笔记" target="_blank" class="iblock">笔记</a><a
                        href="https://momeis.net/?s=倒计时" target="_blank" class="iblock">倒计时</a><a
                        href="https://momeis.net/?s=系统" target="_blank" class="iblock"> 系统</a><a
                        href="https://momeis.net/?s=科技" target="_blank" class="iblock">科技</a><a
                        href="https://momeis.net/?s=歌曲" target="_blank" class="iblock">歌曲</a><a
                        href="https://momeis.net/?s=科技" target="_blank" class="iblock">科技</a><a
                        href="https://momeis.net/?s=美化" target="_blank" class="iblock">美化</a><a
                        href="https://momeis.net/?s=风景" target="_blank" class="iblock">风景</a>
                    
            </div>
        </div> <!-- 头部快速链接导航 -->
        <div class="top-navs poa">
            <div class="layout-center clearfix" style="width: 1200px;">
                <div class="top-navs-l fl">
                    <div class="top-navs-l-item fl">
                        <p class="top-navs-l-title"><a href="https://momeis.net/collectionser/jss_jsc" target="_blank"
                                class="block"> <svg class="icon-dhs" aria-hidden="true">
                                    <use xlink:href="#icon-jiaocheng-3"></use>
                                </svg>
                                <!--<img src="static/picture/ae.png" alt="AE模板">--> 技术教程
                            </a></p>
                        <p class="top-navs-l-links"><a href="https://momeis.net/?s=Wordpress" class="fl"
                                target="_blank">Wp</a><a href="https://momeis.net/?s=%E6%98%93%E8%AF%AD%E8%A8%80"
                                class="fl" target="_blank">易语言</a></p>
                    </div>
                    <div class="top-navs-l-item fl">
                        <p class="top-navs-l-title"><a href="/shipin/38.html" target="_blank" class="block">
                                <svg class="icon-dhs" aria-hidden="true">
                                    <use xlink:href="#icon-keji"></use>
                                </svg> <!-- <img src="static/picture/pr.png" alt="Pr模板"> --> 系统科技</a></p>
                        <p class="top-navs-l-links"><a href="https://momeis.net/?s=win10" class="fl"
                                target="_blank">win10</a><a href="https://momeis.net/?s=win11" class="fl"
                                target="_blank">win11</a></p>
                    </div>
                    <div class="top-navs-l-item fl">
                        <p class="top-navs-l-title"><a href="https://momeis.net/?s=安卓" target="_blank" class="block">
                                <svg class="icon-dhs" aria-hidden="true">
                                    <use xlink:href="#icon-anzhuo"></use>
                                </svg>安卓之家</a></p>
                        <p class="top-navs-l-links"><a href="https://momeis.net/?s=读书" class="fl"
                                target="_blank">读书</a><a href="https://momeis.net/?s=科技" class="fl"
                                target="_blank">科技</a></p>
                    </div>
                    <div class="top-navs-l-item fl">
                        <p class="top-navs-l-title"><a href="https://momeis.net/comments" target="_blank" class="block">
                                <svg class="icon-dhs" aria-hidden="true">
                                    <use xlink:href="#icon-wentifankui"></use>
                                </svg>问题反馈</a></p>
                        <p class="top-navs-l-links"><a href="https://momeis.net/comments/#" class="fl"
                                target="_blank">图片问题</a><a href="https://momeis.net/comments/#" class="fl"
                                target="_blank">链接问题</a></p>
                    </div>
                    <div class="top-navs-l-item fl">
                        <p class="top-navs-l-title"><a href="https://momeis.net/links" target="_blank" class="block">
                                <svg class="icon-dhs" aria-hidden="true">
                                    <use xlink:href="#icon-youqinglianjie"></use>
                                </svg>友情链接</a></p>
                        <p class="top-navs-l-links"><a href="https://momeis.net/link-register" class="fl"
                                target="_blank">友链申请</a><a href="https://nav.sdklib.com/" class="fl"
                                target="_blank">菜鸟导航</a></p>
                    </div>
                </div>
                <div class="top-navs-m fl"> <a href="https://momeis.net/collectionser/z_rj" target="_blank"
                        class="fl">软件世界</a> <a href="https://momeis.net/collectionser/other_ss" target="_blank"
                        class="fl">其他</a> <a href="https://b2.sdklib.com/" target="_blank" class="fl">子主题</a> <a
                        href="https://momeis.net/weiyu" target="_blank" class="fl">微YU说说</a> </div>
                <div class="top-navs-r fl clearfix"> <a class="fl" rel="nofollow" target="_blank"
                        href="https://momeis.net/collectionser" title="点击访问专题中心"> <svg class="icon-dhs"
                            aria-hidden="true">
                            <use xlink:href="#icon-zhuanti"></use>
                        </svg>
                        <p>专题中心</p>
                    </a> <a class="fl" target="_blank" href="https://momeis.net/wordpress_history_download"
                        title="点击进入wp下载中心"> <svg class="icon-dhs" aria-hidden="true">
                            <use xlink:href="#icon-xiazai"></use>
                        </svg>
                        <p>WP下载</p>
                    </a> </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

CSS 文件比较多就直接打包了。关于阿里icon图标引用教程：请移步：