这一次给大家带来的B2主题首页的美化，发现首页在原来幻灯片处添加一个大大搜索框挺好看的。传统的幻灯片已经看腻了，废话不多说，下面是给大家的详细安装教程！

效果图:

这个其实就是参考94设计网修改的，后期还会在完善

第一步：PHP代码

将下面代码放入B2主题目录下的index.php文件，放到<div class="b2-content">这个代码之后即可。注意：放入我给的代码就好，本来的代码不要删哦！

这里调用了我的阿里巴巴矢量图标，你们换成自己的。

<div id="primary-home" class="content-area">
        
        <div class=" home_row home_row_0  module-sliders home_row_bg home_row_bg_img" style="background-color:#fcfcfc;background-image:url(https://s1.ax1x.com/2020/05/25/tpdmCD.jpg);">
                    <div class="wrapper"><div class="home-row-left content-area  " style="width:1440px"><div class="slider-7">
            <div class="slider-7-carousel slider-height" style="width:1300px;max-width:100%;">
            <p class="sousuotopTitle">这里可能有你想要的资料哦！</p>
                   <form action="?s=&amp;post_type=post" class="searchform">
<input type="text" name="s" id="sss" placeholder="搜索相关文章" class="search-keyword">
<input type="hidden" name="post_type" value="post">
<button type="submit" class="search-submit"><i class="xu icon-sousuo3-copy"></i> 搜  索</button>

</form><div class="remensousuo"><div class="sousuocenter"><span><i class="xu icon-iconfonthuo-copy"></i> 热门搜索：</span><ul>
<li><a href="/chanpinxian/youyanji" class="shejipsd">美化</a></li>
<li><a href="/chanpinxian/xiwanji" class="shejixd">主题</a></li>
<li><a href="/chanpinxian/zaoju" class="shejifigma">插件</a></li>
<li><a href="/chanpinxian/zhengkaowei" class="shejisketch">APP源码</a></li>
<li><a href="/chanpinxian/reshuiqi" class="shejisketch">影视源码</a></li>
</ul></div></div>
            </div>
        </div></div></div></div>

第二步：css代码

将CSS代码放进主题全局CSS文件或者放入B2子主题的style.css里面即可

/*大大的搜索框*/

.home .site-header{margin-bottom:0 !important;}
.header .wrapper{background:none;
height: 72px;
}
.site-header{height: 72px;}
.home .home_row_0 .content-area{border-radius:6px}
.home .content-area{border:0 !important}
.home .action .top-style-blur{background:#672d2d2e;height:72px}
.home .top-style-blur{background:#00000012;height:72px}
.top-style-blur{background:#383838;height:72px}
.home .b2-content{margin-top:-73px;}
.top-menu-ul > li.depth-0:first-child > a{color:#fff}
.top-menu ul li.depth-0 > a{color:#fff}
.home_row_bg, .home_row_bg_img{margin:0;padding:60px 0}
/*.home_row_0 .wrapper{padding:0 15px}*/
.site.up .site-header-in{transform: translate(0,-70px);}
.post-list-cats{background:none}
.picked.post-load-button span:hover{color:#fff}
.slider-7 .search-keyword{   margin:0 auto;
    width: 600px;
    color: #FFF;
    font-size: 16px;
    overflow: hidden;
    height: 54px;
    line-height: 32px;
    border-radius: 4px;
    box-shadow: none;
    padding-left: 19px;
        background: #ffffff38;
    border: 1px solid #ffffff14;}
.slider-7 .searchform{   width: 750px;

    border-radius: 6px;
    margin: 0 auto;}

.slider-7{padding:60px 0}
.slider-7 .searchform input::-webkit-input-placeholder{color:#eee}

.slider-7 .search-submit{    display: block;border-radius: 4px;background: #fd6360;
    width: 120px;
    height: 54px;
    position: relative;
border: 1px solid #ffffff14;
    font-size:18px;
    right: 6px;}
    
.slider-7 .search-submit:hover{background:#f53224;color:#fff}    
.slider-7 .ri-search-line{position:relative;top:3px;font-size:18px;margin-right:5px}
.slider-7 .sousuotopTitle{text-align:center;font-size:25px;color:#eee;margin-bottom:40px;}  
.slider-7 .sousuotopTitle:before{    content: "//";
    font-weight: 900;
    position: relative;
    left: -17px;
    opacity: .5;}
    
    .slider-7 .sousuotopTitle:after {
    content: "//";
    font-weight: 900;
    position: relative;
    left: 17px;
    opacity: .5;
}
.login-box-content{background:#fff}    
.header-login-button .empty {color:#fff;} 
.header-login-button .empty i{position:relative;top:2px;margin-right:2px}

.login-button .header-login-button button{font-size:14px;
    background: #ff5757;}    
 .header-user{top:21px;}  
 .login-box-content{  
 	    background: #fd6360;
 	background-image: url(https://s1.ax1x.com/2020/05/25/tpdmCD.jpg);
    background-position: 145px bottom;
    background-repeat: no-repeat;}
.sheji_com_login {width: 400px;
    height:auto;

    float: left;
   }   
.login-box-content .login-box-top{    width: 400px;
    float: left;background: #fff;}    
    
 .modal-content{width:800px}   
.sheji_com_login .wxlogin-sidebar{
     padding: 50px 50px 0;}
   
.sheji_com_login .wxlogin-sidebar h2 {
    font-size: 22px;
    margin-bottom: 30px;
    color:#fff;
}    
.sheji_com_login .wxlogin-sidebar ul li{    
     display: block;
    margin-bottom: 10px;
    font-size: 15px;
    color:#fff;
}  
    
p.module-desc {
    border-left: 0px solid #fb5f3c;
    padding-left: 0px;
}
.sheji_com_login .wxlogin-sidebar ul li i{
    margin-right: 10px;
    opacity: .52;
    position: relative;
    top:2px;
}
.login-title span{padding:10px 10px;font-size:16px;color:#252525;}
.login-title span b{color:#252525;}
.login-box-content .login-box-top{padding:36px 24px}
.header .ri-medal-line{    color: #ffd2ab;
    font-size: 18px;
    position: relative;
    top: 3px;
    margin-right: 3px;}

.shejihot{    display: block;
    width: 14px;
    height: 16px;
    background: url(https://s1.ax1x.com/2020/05/25/tpdmCD.jpg) no-repeat;
    position: relative;
    top: -3px;
    margin-left: 6px;
    background-size: contain;}
.remensousuo{margin:0 auto;height:80px;padding-top:30px;   color:#fff;    display: flex;font-size: 14px;}
.remensousuo .sousuocenter{       margin: 0 auto;
    padding: 0 60px;
    line-height: 40px;
    border-radius: 73px;
    position: relative;
    height: 40px;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    background: rgba(0, 0, 0, 0.26);
}
.home_row_bg_img::after{background: #bf4d4936;}
.remensousuo span{float:left;color:#e6e6e6;    position: relative;top: 1px;}
.remensousuo span .ri-fire-fill{    background: #fff3;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    color: #fff;
    display: block;
    float: left;
    position: relative;
    top: 12px;
    margin-right: 7px;
}

.remensousuo span .ri-fire-fill:before {
    content: "ecf4";
    position: relative;
    top: -12px;
}
.remensousuo li a:hover{color:#f44336}
.remensousuo ul{margin:0 auto;float:left}
.remensousuo li {float:left;margin-right:20px;}
.remensousuo li a {float:left;color:#e6e6e6;    padding: 0px 9px;}
/*.remensousuo li .shejipsd{background: url(https://img.94kan.cn/2020/04/165c14e9643e9a.png) no-repeat;background-size: contain;}
.remensousuo li .shejisketch{background: url(https://img.94kan.cn/2020/04/16549ef5679a34.png) no-repeat;background-size: contain;}
.remensousuo li .shejixd{background: url(https://img.94kan.cn/2020/04/163e49e457c593.png) no-repeat;background-size: contain;}
.remensousuo li .shejifigma{background: url(https://img.94kan.cn/2020/04/1797362e59ec44.png) no-repeat;background-size: contain;}
.remensousuo li .shejisketch{background: url(https://img.94kan.cn/2020/04/16549ef5679a34.png) no-repeat;background-size: contain;}*/
.login-social-button .login-qq {
    color: #ff7a09;
}

完成以上操作就好了，可能还需要修改一些样式，比如搜索边上有个一个阿里巴巴矢量图标，需要换成自己的哦，具体自己搭建好后看一下。