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

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

效果:

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图标引用教程:请移步
下载权限
查看
  • 免费下载
    评论并刷新后下载
    登录后下载
  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余

给TA打赏
共{{data.count}}人
人已打赏
站长资源

[Windows] 最简单的方式给机顶盒添加roo

2022-5-7 9:44:39

站长资源

你是魂天帝,你会让萧炎活到第几章

2022-5-7 14:56:57

免责声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员,邮箱momeis6@qq.com 根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,网站会员捐赠是您喜欢本站而产生的赞助支持行为,仅为维持服务器的开支与维护,全凭自愿无任何强求。本站部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源大部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

3 条回复 A文章作者 M管理员
  1. 别让至尊宝心动i

    最后呢,在这片沙漠之中,至少我能知道还会有一个,珍爱这朵花儿的人。有一个人就足够了。

  2. 刘大先生

    66666666666666支持

  3. yixinis

    523g从不v

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索