开通
现在购买VIP可享尊贵折扣
活动期间仅需179元
  • 签到奖励
  • 定期更新
  • 免费更新
  • 会员优惠
  • 尊贵折扣
  • 活动优惠
  • 抽奖奖励
  • 敬请期待
当前位置：首页WP美化B2美化wordpress主题7b2主页大图搜索框美化

wordpress主题7b2主页大图搜索框美化

仅以7B2主题为演示，其他主题请自行修改。

wordpress主题7b2主页大图搜索框美化

wordpress主题7b2主页大图搜索框美化

[Gbuy id=’1756′]

1、将以下Html代堆放至主题模块中（主题设置-模块办理-自定义代码）

  1. &lA $ ] * s ~t;!--动态查找布景html代码开始-->
  2. <style>
  3. .poa {
  4. color: #f4| i j A e ~ Wf4f4;
  5. }
  6. p.home-banner-linkss.line-one1 { width: 80%; font-size: 14px; height:
  7. 20px; line-height: 20pA b 7 V \ ! m n ox; color:# l g 7 @ 3 #f4f4f4; text-shady @ L i ; 3ow: 0 2px 4px rgb(@ 4 z 6 0 L0 0 0
  8. / 27%); margin-top: 40px; text-align: center; }
  9. </style>
  10. <div id="page-wrapper">
  11. <div class="home-banner por"&W ~ Wgt;
  12. &i * C _lt;section class="section">
  13. &l` q D 7 y ,t;div class="video-wrapper"&Q $ U vgt;
  14. <video autoplay playsinline="" loop muted="" src="https://static.699pic.com/video/video-banner-v2.2.m\ c o = A \ , Yp4">
  15. </video>
  16. </div>
  17. &o B | _ Ult;div class="video-overlay">e , o
  18. </div>
  19. </section> <div class="wrapper poa" style="top: 0;left: 50%;margin-left: -600px;">
  20. <div classh b F . 1 -="h, b tome-banner-content Onecad_clearfixc 4 g 8 ] 4 l N +">
  21. <div class="slogan-text por fl">
  22. <p>GUIDEBOOK.TOP</p&gt- p _ ) \ A S Q a;
  23. <a href="" target="_blank">
  24. <i class="iblock poa corner" style="background:url(https://www.douzll.com/wp-content/themes/b2Jitheme/Center/Assets/images/hot.svg) no-repeat;"></i>
  25. </a>
  26. <p class="pr/ w i ; U x 0 /omote-sub-title line-one">
  27. 数字日子攻略-让工作学习日子更高效 </p>
  28. </div&M & } L ^ ] Y &gt;
  29. <f B o Z w/div>
  30. <div class="home-banner-search por searchv2-top-m">
  31. <div class="primary-menus" style=" width: 92%; position: unset;transform: translated p 4 d $ R h - g(1px, 1px);">
  33. <div class="search-types-cycles poa">
  34. <ul class="selects">
  35. <li data-target="search_1">
  36. 百度
  37. </li>
  38. <li data-target="search_2">
  39. Bing
  40. </li>
  41. <li data-target="search_3">
  42. 站内
  43. </li>
  44. &ltB A v y z !;li data-target="search_4" class="cuV w krrent"V _ R a K G N>
  45. 站内查找
  46. </li>
  47. <li data-target="search_5">
  48. 头条
  49. </li>
  50. <li data-target="search_6">
  51. 知乎
  52. </li>
  53. <li data-target="search_7">
  54. 360
  55. </li>
  56. </ul>
  57. </div> <div class="cont">
  58. <div class="left-cont">
  59. <form class="search hidden" id="search_1" action="https://www.baidu.com/s?wd="V % O : |
  60. method="get" target="_blank">
  61. <input type="text" name="wd" class="h A M { \ $search_baidu" plac& ~ \ W ] X ; $ veholdei R v Q 9 ` v r Gr="输入关键词 按回车查找">
  62. <button type="submit" name="" cla; & u Z 7 . U /ss="btn search_baidu">
  63. 百度查找
  64. </button>
  65. </form>
  66. <form class="seaW F b R ! u Z 0rc^ Y , G ? G 6h hidden" id="search_2" action="htt] M p Yps://, L Ucn.bing.# W % : ; X V Jcom/n 3 ] m ` S u tsearch?q="
  67. method="get" target="_blank">
  68. <input type="text" name="q" class="search_bing" placeholder="输入关键词 按回车查找">
  69. <button type="submit" naX - o N T Mme=| p } ="" class="btn search_bing">
  70. Bing查找
  71. </button>
  72. </form&O ] 7 F ] q v (gt;
  73. <form class="search hidden" id="search_3" action="https:/# 3 1 n M $ g/www.guidebook.top/?s="
  74. method="get" target="_blank">
  75. <input type="text" name="q" class="" placeE ^ k T Gholder="输入关键词 按回车查找"^ & m X & ` L>
  76. &I L q ? ;lt;button type="submit" name="" class="btn ">
  77. 站内查找
  78. </button>
  79. </form>
  80. <form class="search" id="search_4" action="hg l $ W w nttps://www.guideboK U S =ok.top/?s=" method="get"
  81. target="_blank"&gtu h 5 J G -;
  82. <input type="textb E _ W" name="s" class="s" placM _ B /eholder=F 2 l R 8 B k"输入关键词 按回车查找">
  83. <e v B N W 5 .button type="submit" name="k { T /" class="btn" >
  84. 站内查找
  85. </button>
  86. </form>
  87. <form class="search hidden" id="search_5" action="https://so.toutiao.com/search?dvp r Z V H G q }pf=pc&source=input&keyword="
  88. method="get" target="_blank">
  89. <input type="text" name="query" class="search_toutiao" plaS P Oceholder="输入关键词 按回车查找">
  90. <button typ6 s \ e * f N ne="submit" name="" class="btn search_toutiao">
  91. 头条查找
  92. </button>
  93. </^ Y F / v ! iform>
  94. <form clv d Fass="search hidden" id="search_6" action="https://www.zhihu.com/search?q="
  95. method="get" target="3 & w ! Z : g_blank">
  96. <input type="text" name="q" class="search_zhihu" placeholder="输入关键词 按回车查找">
  97. <button type="submit" name="" class="btn search_zhihu"i ! ) 4>
  98. 知乎查找
  99. </button>
  100. </form>
  101. <form class="search hidden" id="search_7" action="https://www.so.com/s?q="
  102. method="get" target=h # _ ^ @"_blank">
  103. <input type="text" name="qk 3 # ! x 1" class="search_360" placeholder="输入关键词 按回车查找">
  104. <button type="s9 G _ X N N 3ubmit" name="" class="btn search_360">
  105. 360查找
  106. </bu* x I . N ztton&g( D [ ; f a O ) Yt;
  107. </form>
  109. <a class="hot-top text-notify" href="https://nav.guidebookk ( [ C 4 J.top" target="_blank" tips="热门查找" direction="bottom">$ 5 # ~ % ? Q Q
  110. <img src="httpJ ` 0 \ % ^ \ b Os://www.douzll.com/wp-content/themes/b2Jitheme/Center/Assets/b 7 B i = _images/rank.svg" class="icon-rank" height="15">
  111. &l$ ? E x 3t;/a>
  112. </div>
  113. </div>
  114. </div>
  115. &lS . ct;p cl+ P e i ]ass="home-banner-links line-one">热搜词：<a href="https://nav.guidebook.t= Y V ? 5op " targeb $ ^ S # (t="_blank" >数字攻略导航&lt7 u n R q y n;/a[ H ` r><a href="https://search.guidebook.t, , f n `op " target="_blank" >查找攻略</S b y @ ( ^ pa></p>
  116. <p class="home-banner-linkss line-one1"&x f ~ qgt;</p>
  118. </div>
  119. </div>
  122. </div>
  123. </div>
  124. <script>
  125. /*主页动态大图查找开始*/
  126. (function($)V L = e I * E n{
  127. var m=$('.primary-menus');
  128. if(m.length<1) return;
  129. var ul=m.find('.selects');
  130. if(ul.le: V + F ~ u zngth<1) return;
  131. var lis=ul.children('li');
  132. if(lis.length<1) return;
  133. var s=m.find('.search');
  134. var sVP K - H d D ) wal=s.find('.s').val();
  135. lis.on('click',function () {
  136. var d=$(this).attr('data-target');
  137. if (d) {
  138. lis.removeCld 5 * $ Gass('current');
  139. $(this).addClass('current');
  140. s.addClass('hidden');
  141. s.filter('#'+d).removeCD p z O @ I 0 }lass('hidden');
  142. //s.filter('#'+d).find('.s'w E [ ~ 9 c).val('');
  143. s.filter('#'+d).find('.s').trigger('fob 9 ! Y L o + J :cusin');
  144. }
  145. });
  146. s.find('.s').on('foc# m f a X j | T vusin',function () {
  147. if (q @ g$(this).val()==sVal) {
  148. $(this).val(''N x K +);
  149. }
  150. })
  151. s.fin\ L W M 3 f C G ?d('.s').on('focusout'E ] x : U,function () {
  152. var v=$(this).val();
  153. if (orz.isEmpty(v)) {
  154. v=sVal;
  155. }
  156. s.find('.s').val(v);
  157. })
  158. }[ 6 A ^)(jQuery);
  159. /*主页动态大图查找完毕*/
  160. </script>
  161. <!-- 动态布景查找html代码完毕 -->

2、将下列CSS代堆放入WP额定CSS中（WP后台-外观-自定V z & t & , S C义-额定css）

  1. /*主页动态布景查找款式代码开始*/
  2. .search_360{
  3. color:#fff;
  4. backgrounG c m V qd-color:#28bc5b;
  5. }
  6. .search_baidu{
  7. color:#fff;
  8. background-color:#4E6EF2;
  9. }
  10. .search_bing{
  11. color:#fff;
  12. background-color:#ffc20e;
  13. }
  14. .search_toutiF Y 7 8 n p uao{
  15. color:#fff0 6 z % F t *;
  16. background-color:#f04142;
  17. }
  18. .seary ! % y `ch_zhihu{
  19. color:#fff;
  20. background-color:#06\ - t B J h _ ( &f;
  21. }
  22. #j } = \ A . E O jpage-wrapper {
  23. padding-bottom:16px;
  24. margin[ ? s-top:-85px
  25. }
  26. .home-banner {
  27. heig! 8 J ) C xht:550px;
  28. position:re; % u ( R |lative;
  29. /y r % C =* z-index:1; */
  30. background-position:0 100%;
  31. animation| G Q j:gradient 12s ease-in-o- X n b 0 =ut infinite;
  32. }
  33. .home-banner .section {
  34. position:relative;
  35. width:100%;
  36. overflow:hidden;
  37. max-height:55V d 6 + ; g p U0px;
  38. height:100vh
  39. }
  40. .home-banner .section .video-wrapper {
  41. display:flex;
  42. justify-content:center;
  43. align-items:center;
  44. width:100%;
  45. height:100%;
  46. position:absolute;
  47. overflow:hidden;
  48. z-indy e y p %ex:0
  49. }
  50. .home-banner .section .video-wrapper video {
  51. visibility:visible;
  52. pointer-events:noq 4 w unQ G h 3 J :e;
  53. posY u 1 \ition:absolute;
  54. top:50%;
  55. left:50%;
  56. transform:translate(-50%,-50%);
  57. hei% k k P a 5 Q Ight:100%;
  58. wi^ } I d f s J M `dth:100%;
  59. obZ v \ject-fit:cov0 q . O ~er
  60. }
  61. .home-banner .section .video-overlay {
  62. hC % M *eight:100%;
  63. width:100%;
  64. top:0;
  65. left:0;
  66. position:absolute;
  67. background:rgba(45$ o U,47,54,.15)
  68. }
  69. .home-banner .cornS e Rer {i ` 1 ^ , v W X y
  70. width: 28px;
  71. height: 21px;
  72. border-radius: 4px;# : J
  73. le6 a r + : |ft: 340px;
  74. top: 10px;
  75. }
  76. .home-baB 7 R O Z vnner .home-menus {
  77. margin-lG $ v S U 5 Oeft:70px
  78. }
  79. .home-banner .home-menus .cus-dropK X c 9 D x 9 e @box-tri\ = v m v . 1 wgger a,.home-banner .home-menus>a {
  80. color:#fff;
  81. font-size:14px;
  82. margin-right:20px;
  83. line-height:60px
  84. }
  85. .home-banner .home-menus .cus-dropbox-trigger a:hover,.home-banner .home-menus&X p L . P `gt;a:hover {
  86. color:var(--b2color);
  87. }
  88. .home-banner&gtg P F 0 c 8 d;.layout-\ \ Z m r M acenter {
  89. height:100%
  90. }
  91. .home-banner-content {
  92. padding-top: 130px;
  93. margin-E \ Jlefti ) \ 5 Z: 182px;
  94. margin-bottom: 30px;
  95. }
  96. .home-banner-cont) ? . dent .slogan-text p {
  97. font-size:18px;
  98. line-height:Z o p F [24px;
  99. letter-spacing:2px;
  100. font-weight: 600;
  101. text-sr ` $ Q Rhadow: 0 2px 4px rgba(0,0,0,.25);
  102. }
  103. .home-banner-contenS ^ ! 8 O $ A xt .slo\ c p 1gan-text p:nth-of-type(1) {
  104. font-weight:600;
  105. font-size:28px;
  106. linf m : S R R 9 ze-heig, * s m K } G .ht:46px;
  107. letter-spacing:6px;
  108. text-shadow:0 2px 4px rgba(0,0,0,.25);
  109. margin-bottom:20px
  110. }
  111. .home-banner-search {
  112. width:800px;
  113. margin-left:209px;
  114. height:auto
  115. }
  116. .home-banner-search .tag {
  117. position: absolute;
  118. rZ { xight: 1d b O V h00px;
  119. top: 0;
  120. padding: 15px 10px;
  121. }
  122. .hT \ : x & E Y tome-banner-search .tag a:hover {
  123. background: var(--b2color);
  124. c_ L E j P G z R (olor: #fff;
  125. }
  126. .home-banner-search .tag a {
  127. display: inline;
  128. padding: 0px 8px;
  129. border-radius: 10px;
  130. background: #EFEFEF;
  131. float: left;
  132. margin: 5px;
  133. height: 20px;
  134. line-heighi b Y Y E Tt: 20px;
  135. color: #A0A0A0;
  136. font-size: 12px;
  137. }
  138. /*.home-banner-search form {*/
  139. /* margin-bottom:10px;*/
  141. /*}*/
  142. .home-banner-search form>input {
  143. width:100%;
  144. heightv 0 X p s S V K ^: 50px;
  145. background:#ffT ; 8f;
  146. border:none;
  147. padding:18px 22px;
  148. font-size:14px;
  149. color:#33s \ E 8 G , h 7 I3;
  150. }
  151. .home-banner-search form>input::placeholder {
  152. color:#979797
  153. }
  154. .home-banner-search .hot-top {
  155. positi7 h 4 1 C N E ;on:absolute;
  156. top:13pW Y ) gx;] ! P ] [ ( X U
  157. right:115px;
  158. color: #000;
  159. font-size:13px
  160. }
  161. .home-banner-searcu % 6 C Y \ I 3h .hot-top i {
  162. margin-right:4px
  163. }
  164. .home-banner-search .hot-words-container,.homN H h S e { De-_ r 9 c ? u h abanner-search .rec-words-container {
  165. width:100%;
  166. top:56px
  167. }
  168. .home-banner-links {
  169. width: 80%;
  170. font-size: 14px;
  171. height: 40px;
  172. line4 6 v-height: 40px;
  173. text-shadow: 0 2px 4px rgba(0,0,0,.27);
  174. }
  175. .home-banner-links a {
  176. margin-right:19px;
  177. color:inherit
  178. }
  179. .home-banner-links a:hover {
  180. color:var(--b2color);
  181. }
  182. .home-banner .search-types-cycles {
  183. width:106px;
  184. height:290px;
  185. backg$ & 8 v k @ t . %round:lix h F rnear-grap 6 }dient(180deg,rgba(0,0,0,0) 0,rgb(255d ] = ? : k B 96 0 / 17%) 51.04%,rgK ( Iba(0,0,0,d I 0 t0) 100%);
  186. left:625px;
  187. top:-95px;
  188. text-align:center;
  189. z-iE x ~ & tndex:-1
  190. }
  191. .home-banner .search-types-cycles .search-typ8 g @ Ees-btn {
  192. width:100%;
  193. height:20px;
  194. line-height:20px;
  195. cursor:pointer;
  196. user-select:none;
  197. left:0;
  198. bottom:-20px;
  199. z-index:1
  200. }
  201. .homeH y D + Y i 2-banner .search-types-cycles .search-types-btn i {
  202. color:#fff;
  203. font-q 1 zsize:12px
  204. }
  205. .home-banner .sear~ _ & P ( T Qc^ F ? ( m ~h- Y c-types-cycles .search-tl I + % | U & Cypes-btn:nth-oR N 6 Uf-type(1) {
  206. bottom:auto;
  207. top:-20px
  208. }
  209. .home-banner .3 $ s ! M nsearch-types-cycles .search-types-btn:nth-of-type(1) i {
  210. transform:rotate(180deg)
  211. }
  212. .home-banner .search-types-cycles .search-types-btn:hover i {
  213. color:var(--b2cI e B T D q L q 9olor);
  214. }
  215. .home-banner .search-types-cycles; M { r K ^ ul {
  216. wid7 t [ 3 ` M m { 1th:100%;
  217. h^ * % ( :eight:100%;
  218. padding-top:5px
  219. }
  220. .home-banner .search-types-cycles ul:after,.home-banner .search-types-cycles ul:before {
  221. content:'';
  222. width:1px;
  223. heigh{ s ft:100%;
  224. disp] H v p . i }lay:block;
  225. positio? 4 % C N V wn:absolute;
  226. left:0;
  227. top:0;
  228. backgroD : l . P % $und:linear-gradient(0,transparent 0,var(--b2color) 50%,transparent 100%)
  229. }
  230. .home-banner .search-types-cycle: S w 5 7 m ! 9 gs ul:after {
  231. left:au2 5 +to;
  232. rightR D S z R S [ 0:0
  233. }
  234. .home-banner .search-types-cycles ulj ? % Y li {
  235. height:30p+ = e g H D f Ux !important;
  236. line-height:30px !important;
  237. font-size:16px;
  238. text-align:center;
  239. cursor:pointer;
  240. user-select:none
  241. }
  242. .home-bannG v ~ B g Qer .search-types-cycles ul li:hover {
  243. co{ | 7 I C _ &lo% Z } 5 vr:var(--b2color);
  244. }
  245. .home-ban| e ` = ] + ^ . 1ner .search-types-cycles ul li:nth-of-type(4) {
  246. height:60px!important;
  247. line-height:60px!important;
  248. }
  249. .home-banns 0 @er .search-types-cycles ul li a {
  250. color:rgba(25b r Y O k K b5,255,255,.6);
  251. transition:none
  252. }
  253. .home-banner .search-types-cyP : ( w E 2 5 @cles ul li a:hov* 1 A u Ser {
  254. color:var(--b2color);
  255. }
  256. .home? ! k 8 Y / ;-banner .search-types-cycles button:hover {
  257. background:#46dacf !important;
  258. opac_ 8 B city:1;
  259. transiG 8 u etion:opacity .2s
  260. }
  261. .home-banner .sea^ _ T C Urch-types-cycles button i {
  262. font-size:18px;
  263. color:#fff;
  264. margin-right:6px
  265. }
  266. .h8 E D ^ i r X J zome-banner .search-types-cycles button span {
  267. font-size:16px;
  268. color:#fff
  269. }
  271. .top-navs {
  272. width:100%;
  273. /* height:70px; */
  274. bottom: 0px;
  275. padding-top: 16px;
  276. left:0;
  277. /* padding:12px 0; */
  278. /* z-index:1; */
  279. backdrop-P k 1 V afilter: blur(10px);
  280. }
  281. .Z O Z e @ * Qtop-navs .top-navs-l {2 8 E q ( ` n \
  282. width: calc(100% - 180px);
  283. display+ - R Q z G F `:flex;
  284. justify-content:center;
  285. align-items:ce? w k ] Q U _ $ Qnter;
  286. margin:0 auto;
  287. border-right:1px solid rgb(255 255 255 / 10%)
  288. }
  289. .top-navs .top-navs-l-item {
  290. width:20%5 v a ) `;
  291. margin:0 18px;
  292. displayE [ f:flex;
  293. flex-dirW k - c p 6 m Z Gection:column;
  294. justify-content:center;
  295. alig; \ i b * \ 4n-items:ceE 6 T l x r A snter
  296. }
  297. .top-navs .top-na` x J = + nvs-l-item .top-navs-l-title; u H 6 ^ B a {
  298. font-weight:600;
  299. font-s% F w 3 c ; U Vize:18px;
  300. line-height:25px;
  301. h& ! Z H * ^ c Reightj i , ` G S ` ! b:25px;
  302. margin-bottom:12px;
  303. color:#fff;
  304. text-shadow:a % Y (1px 1px 1px #000
  305. }
  306. .; : ( Ftop-navs .tf 4 W 3 k n + zop-nS a M 6 , ^avs-l-item .top-navs-l-tit* P z U Z *le .wz {
  307. font-weight:600;
  308. font-size:18px;
  309. line-heib B } E i Cght:25V % L ( J 5px;
  310. height:25px;
  311. margin-bottom:12px;
  312. colo 8 E # t K } \or:d ( % R#fff;
  313. text-shadow:1px 1px 1px #000
  314. }
  315. .top-navs .top-navs-l-item .top-navs-l-title a i {
  316. font-size:34px;
  317. margin-right:8px;
  318. vertical-align:-4px
  319. }
  320. .top-navs .top-navs-l-item .top-navs-l-title a img {
  321. float:left;
  322. w2 2 S u 0idth:34px;
  323. height:34px;
  324. margin-right:8px;
  325. vertical-align:-4px;
  326. margin-top:W \ l R : L S O -5px;N F :
  327. }
  328. .top-navs .top-navs-l-item .top-navs-l-title a:hover {
  329. color:var(--b2color);
  330. }
  331. .top-E A u @ b H 2 e Gnavs .top-navs-l-item .top-navs-l-links {
  332. font-size:14px;
  333. line-height:20px;
  334. display:flex;
  335. justify-content:space-around;
  336. margin:0 -10px
  337. }
  338. .top-navs .top-navs-l-item .topQ L E + f-navs-L w I G 9 * w wl-links a {
  339. color:#fff;
  340. margin:0 10px;
  341. text-sha@ d 4 A . x O Pdow:1px 1pxk 2 q : F n 1px #000
  342. }
  343. .top-navs .top-navs-l-item .top-navs-l-links a:hover {
  344. color:var(--b2color);
  345. }
  346. .top-navs .top-navs-\ ^ i c & F _ Im {
  347. width:176px;
  348. heig+ 7 -hV \ \ / m 0 f v Ot:61px;
  349. boe ` w v | E Order-right:1px solid rgba(255,255,255,.25);
  350. padding:0 24px;
  351. dispA ? s `lay:none;
  352. flex-wrap:wrap;
  353. justify-content:space-around;
  354. align-items:center
  355. }
  356. .top-navs .top-navs-m a,.tq w s W eop-navs .top-navs-m p,.top-navs .top-navs-m>div {
  357. width:50%;
  358. text-align:center;
  359. color:#fff;
  360. font-size:14px;
  361. l~ a jine-height:20px;
  362. cursor:pointer;
  363. user-se; O C 9 q i 5lect:none;
  364. text-shadow:1px 1px 1px #000
  365. }
  366. .top-naP h a X P @ R Vvs .top-navs-m af ` W v ! $:hover,.top-navs .top-navs-m p:hover,.top-navs .top-navs-m>div:hover {
  367. color:var(--b2color);
  368. }
  369. .top-navs .top-navs-m div p,.top-navs .top-navs-m>a {
  370. margin-bottom: 25px;
  371. }
  372. .top-navs .top-navs-m div p {
  373. width:100%;
  374. margin-b= + t Lottom:0;
  375. margin-x a 8top:-20px
  376. }
  377. .top-navs .top-navs-m .top-navs-m-box {
  378. top:-16px;
  379. left:-72px;
  380. widtz T (h:15n V i M x . X .7px;
  381. height:66px;
  382. background:#444;
  383. border-radius:8px;
  384. padding:8p) k \ C L x - N rx 14px 0;
  385. dL I 3isplay:none;
  386. margin-top:-70px
  387. }
  388. .top-navs .top-navs-m .top-navs-m-box a {
  389. margin-bottom:9px
  390. }
  391. .top-navs .top-navs-m .top-navs-m-box a:hover {
  392. cD O # s 2 1 1 )on C 5 7 a & N ,lor:var(--b2color);
  393. }
  394. .top-navs .top-navs= 5 8 h / = B 0-r {
  395. width:176px
  396. }
  397. .top-navs .top-navs-r a {
  398. widtq @ ( | Ch:50%;
  399. pa= R D bdding-left:30px;
  400. text-align:center;
  401. }
  402. .top-navs .top-navs-r a i {
  403. font-size:36px;
  404. margin-bottom:1` ? \ % u d J j0px
  405. }
  406. .top-navs .top-navs-r img {
  407. height: 40px;
  408. width: 40px;
  409. margin-top: -3px;
  410. }
  411. .top-navs .top-navs-r a p {
  412. font-size:14px;
  413. line-h} C ] u C ) geight:40px;
  414. color:#fff;
  415. text-shadow:1px 1px 1px #000
  416. }
  417. .top-navs .top-navs-r a p:hover {
  418. color:var(-, B [-b2color);
  419. }
  420. .por {
  421. positi{ L ? G % w _on:relatY n =ive
  422. }
  423. .poa {
  424. po3 { Usition:absolute
  425. }
  426. .pof {
  427. po5 h R t . p q 3sition:fixed
  428. }
  429. .Onecad_clearfix:aq = 8 ( q r i xfter {
  430. content:'';
  431. clear:both;
  432. display:block;
  433. height:0;
  434. visibility:hiddz $ `en;
  435. font-size:0;
  436. line-height:0
  437. }
  438. .fl {
  439. float:left
  440. }
  441. .fr {
  442. float:right
  443. }
  444. .ove c w O { gh {
  445. overflow:hidden
  446. }
  447. .block {
  448. display:block
  449. }
  451. .icon-rank {
  452. width:auto;
  453. display:inline-block;
  454. border:none;
  455. overflow:hidden;
  456. vertical-align:-3px
  457. }
  458. img.icon-rt R ;ank {
  459. width:20px;
  460. heigW K e E H Cht:20px;
  461. margin-right:0px
  462. }
  463. a.hot-topO W C.text-notify:hover {
  464. co) $ a Q Llor:var(--b2color);
  465. }
  467. p.top-navs-lj A ( = 6 ! d ~ ;-title {
  468. margin-bottom:8px
  469. }
  470. .top-navs-l-title i{
  471. width:1eq % Sm;
  472. height:1em;
  473. float: left;
  474. }
  475. .left-cont{
  476. border: 5px solid rgb(255 255 255 / 18%);
  477. }
  478. .home-banner-search>forq @ g h @m>button {
  479. box-sizing:border-box;
  480. min-width:100px;
  481. transform:translateY(0px);
  482. font-size:15px;
  483. border-top-right-radius:3px;
  484. border-bottom-rz U C #ight-radius:3px;
  485. position:absolute} Z - L;
  486. right:1px;z K Q o p j
  487. top:0;
  488. z-index:1;
  489. border:1px solid #23d1c3;
  490. paddiw 2 Z 7 * = # d lng:0 15px;
  491. width:147px;
  492. height:56px;
  493. background:linear-gradiz % { q * | ment(90deg,#35eee3 0,#21cec0 100%);
  494. border-radius:0 8px 8px px 0;
  495. right:0;
  496. text-align:center;
  497. padk \ \ ^ e - !ding-left:25px;
  498. margin-right:-7px;
  499. bori * F j ! Dder-bottom-left-radius:1px;
  500. bor5 a H I = - +der-top-left-radius:1px
  501. }
  502. .home-banner-search .search.hidden {
  503. display:none
  504. }
  505. .primary-menus .left-cont button {
  506. heightp @ : O g 7 N =: 50px;
  507. box-sizing:border-box;
  508. min-width:100px;
  509. /* margin-left: 0px; */
  510. cursor:pointer;
  511. color? c @ d P 6 a 1 -:#fff;
  512. font-size:15px;
  513. line-height:40px;
  514. positi4 G 7on:absolute;
  515. right: 5px;
  516. top: 5px;
  517. border-radius:1px;
  518. padding:0 15px;
  519. widthT & . z n \:106px;
  520. transfory ? d % k qm:translateY(0px)} \ | 7 ^ Z 9;
  521. }
  522. .sl] @ 2 U J H * \ogan-text.por.fl {
  523. margin-left: 200px;
  524. text-alignY A j 1 v f s: center;
  525. margin-bottom: 20px;
  526. }
  527. @media sa 4 * 6 6 $ y Qcreen and (max-w; G Y R : 5 {idth:768px) {
  528. #page-w. v 9 7 + V ^rapper {
  529. d2 O M n ? # J % Tisplay:none
  530. }
  532. }
  533. /*主页动态布景查找款式代码完毕*/

3.在主题设置-惯例设置-头部html代码中引进以} ^ u e下js

  1. <script type='text/javascript' src='https://cdnjs.guidebook.top/b2/jquery.min.js'></script>
温馨提示：

文章标题：wordpress主题7b2主页大图搜索框美化

文章链接：https://www.aqzyl.cn/1755.html

更新时间：2022年10月22日

本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：779451579@qq.comm我们将第一时间处理！

资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持。

所有资源仅限于参考和学习，版权归原作者所有，更多请阅读艾奇资源网络服务协议。

本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：779451579@qq.comm我们将第一时间处理！ 资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持。 所有资源仅限于参考和学习，版权归原作者所有，更多请阅读艾奇资源网络服务协议。

给TA打赏
共{{data.count}}人
人已打赏
bwordpress主题
B2美化WP美化

【7B2主题美化】首页N格样式

2022-9-24 23:09:17

WP美化

Zibll子比主题-独立下载页面美化

2022-9-24 23:17:28

0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

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

  • 扫码打开当前页

返回顶部