wordpress b2主题幻灯片搜索模块+四栏模块

效果图

自适应的，手机端

我看别人都在卖这些模块，我也模仿一下吧，毕竟都为了生活….

仿站优化装修都可以找我….

css

幻灯片搜索html

<div id="html-box-dhdh" class="html-box"><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" class="mobile-hidden"></div><div id="banner_wave_2" class="mobile-hidden"></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"><script type="text/javascript" src="一言地址/hitokoto/?format=js&charset=utf-8"></script>
<div id="hitokoto"><h2><script>hitokoto()</script></h2></div>

                                             <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="/?s=" data-engine-end="">
                                                                                                 <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" href="/tag/ensemble" target="_blank">音符社</a> <a class="s-video" href="/tag/azarashi-soft" target="_blank">海豹社</a> <a class="s-video" href="/tag/saga-planets" target="_blank">SAGA PLANETS</a> <a class="s-video" href="/tag/kimishima-ao" target="_blank">きみしま青</a>
                                                                                          </div>
                                                                                          
                                                                           </div>
                                                            </div>
                                             </div>
                              </div>
               </div>
</div></div></div></div></div>

四栏html

<div id="home-row-sydhls" class="  home_row home_row_3  module-html  " style="background-color:;">
                    <div class="" style="width:100%"><div class="home-row-left content-area "><div id="html-box-sydhls" class="html-box"><div class="home-section-division header_fixed_from_here">
    <div class="container">
                   <div class="home-division">
                                  <ul>
                                                 <li>
                                                                <div class="item item_3">
                                                                               <a href="/history" target="_blank">
                                                                                              <div class="item-thumb">  <svg class="icon" aria-hidden="true">
    <use xlink:href="#bd-huiyuan"></use>
</svg>
                                                                                              </div>
                                                                                              <h3>网站公告 <span class="go">go<i class="ico-go"></i></span></h3>
                                                                                              <p>历史公告文档！</p>
                                                                               </a>
                                                                </div>
                                                 </li>
                                                 <li>
                                                                <div class="item item_1">
                                                                               <a href="https://bdrapid.acgal.one/" target="_blank">
                                                                                              <div class="item-thumb">  <svg class="icon" aria-hidden="true">
    <use xlink:href="#bd-jiasu"></use>
</svg>
                                                                                              </div>
                                                                                              <h3>在线秒传 <span class="go">go<i class="ico-go"></i></span></h3>
                                                                                              <p>全平台、免插件！</p>
                                                                               </a>
                                                                </div>
                                                 </li>
                                                 <li>
                                                                <div class="item item_2">
                                                                               <a href="https://music.acgal.one" target="_blank">
                                                                                              <div class="item-thumb"> <svg class="icon" aria-hidden="true">
    <use xlink:href="#bd-xunzhang"></use>
</svg>
                                                                                              </div>
                                                                                              <h3>Gal悦音阁 <span class="go">go<i class="ico-go"></i></span></h3>
                                                                                              <p>回味经典歌曲！</p>
                                                                               </a>
                                                                </div>
                                                 </li>
                                                 <li class="li_4">
                                                                <div class="item item_4">
                                                                               <a href="/duplicates" target="_blank">
                                                                                              <div class="item-thumb">  <svg class="icon" aria-hidden="true">
    <use xlink:href="#bd-fujian"></use>
</svg>
                                                                                              </div>
                                                                                              <h3>补档记录 <span class="go">go<i class="ico-go"></i></span></h3>
                                                                                              <p>补档更新进程！</p>
                                                                               </a>
                                                                </div>
                                                 </li>
                                  </ul>
                   </div>
    </div>
</div></div></div></div></div>

幻灯片搜索模块js

部分图片，