B2主题 - 首页背景自动换图搜索框

温馨提示:本文最后更新于2024-03-28 17:10:20,某些文章具有时效性,若有错误或已失效,请在下方留言。

一款B2主题首页的背景自动换图搜索框的设计,然后将提供的HTML、CSS和JavaScript代码放到模块管理中的自定义中,以实现铺满窗口或同宽的效果。

图片[1] - B2主题 - 首页背景自动换图搜索框

html代码

代码放到模块管理-自定义-铺满窗口或者同宽

<div class="" style="width:100%"><div class="home-row-left content-area "><div id="html-box-shou-suo" class="html-box"><style type="text/css">
.mg-b {
  margin-bottom: -0px;
}
</style>
<div id="home-row-shyetop" class="  home_row home_row_0  module-html  " style="background-color:;">
    <div class="" style="width:100%">
        <div class="home-row-left content-area ">
            <div id="html-box-shyetop" class="html-box">
                <div id="banner_wave_1"></div>
                <div id="banner_wave_2"></div>
                <div class="user-banner mian-bgcolor wow bounceInUp animated"
                    style="visibility: visible; animation-name: bounceInUp;">
                    <div class="container xs-1">
                        <div class="ubanner-ctn col80">
                            <h2></h2>
                            <div id="main-wrap-box">
                                <div id="main-wrap">
                                    <div id="content-wrap">
                                        <form action="" method="GET" target="_blank" id="searchForm">
                                            <input id="search" type="text" placeholder="请输入关键词搜索" autocomplete="off"
                                                autofocus="">
                                            <div id="search-type"> <span id="search-type-name">站内搜索</span>
                                                <div id="search-type-icon" style="transform: rotate(0deg);"></div>
                                                <ul id="search-type-menu" style="display: none;">
                                                    <li data-engine-start="https://www.xiaohulizyw.com/?s="
                                                        data-engine-end=""><img
                                                            src="/img/fe99049cf99d5.png"><span>站内搜索</span>
                                                    </li>
                                                </ul>
                                            </div>
                                            <input type="submit" id="search-btn" value="">
                                        </form>
                                        <div class="searchTag"> <span><i class="b2font b2-hot"></i>热门推荐:</span> <a
                                                class="s-video" title="小狐狸资源屋-分享互联网资源"
                                                href="https://www.xiaohulizyw.com/?s=美化" rel="external nofollow"  target="_blank">美化</a> <a
                                                class="s-video" title="小狐狸资源屋-分享互联网资源"
                                                href="https://www.xiaohulizyw.com/?s=Xposed" rel="external nofollow"  target="_blank">Xposed</a> <a
                                                class="s-video" title="小狐狸资源屋-分享互联网资源"
                                                href="https://www.xiaohulizyw.com/?s=青龙" rel="external nofollow"  target="_blank">青龙</a> <a
                                                class="s-video" title="小狐狸资源屋-分享互联网资源"
                                                href="https://www.xiaohulizyw.com?s=教程" rel="external nofollow"  target="_blank">教程</a>
                                            <a class="s-video" title="小狐狸资源屋-分享互联网资源"
                                                href="www.xiaohulizyw.com/post-category/webcode/wzym" rel="external nofollow"  target="_blank">建站源码</a> <a
                                                class="s-video" title="小狐狸资源屋-分享互联网资源"
                                                href="https://www.xiaohulizyw.com/?s=wordpress" rel="external nofollow" 
                                                target="_blank">wordpress</a>
                                        </div>
                                        <div id="movie-wrap">
                                            <a id="movie-img-a" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank"></a>
                                            <a id="movie-information" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank"></a>
                                            <a id="movie-name" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div></div>
    </div>
</div>
<link rel="stylesheet" href="/css/sousou.css" rel="external nofollow" >
<script type="text/javascript" src="/css/sousou.js"></script>

CSS代码

JS代码

© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 共2条

请登录后发表评论