这一次给大家带来的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=&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; }
完成以上操作就好了,可能还需要修改一些样式,比如搜索边上有个一个阿里巴巴矢量图标,需要换成自己的哦,具体自己搭建好后看一下。