WordPress美化 – 94设计素材网大气搜索框区块

这是一款来自94设计的大气搜索框区块,是一款带有搜索功能的区块,理论上支持所有主题的搜索功能。

实现代码

 <!--载入CSS样式--> 
  <link href="style.css" rel="stylesheet" type="text/css" /> 
  
  
  <div class="page-section-content"> 
   <div class="page-section-background"> 
   </div> 
   <div class="n-box"> 
    <!--文本--> 
    <div class="n-text"> 
     <h1 class="index-title"> 
      <!--分类统计--> Npcink </h1> 
     <h2 class="index-subtitle"> 
      <!--副标题--> // 开通会员,海量UI设计源文件随心下载 // </h2> 
    </div>
    <!--.n-text--> 
    <!--搜索--> 
    <div class="n-search"> 
     <form method="get" id="searchform" action="?php echo esc_url( home_url() ) ?>"> 
      <div class="container"> 
       <div id="searchs"> 
        <input type="text" placeholder="搜索素材" name="s" id="s" class="searchInput" /> 
        <input class="n-button" type="submit" onclick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';" value="搜索" /> 
       </div> 
      </div> 
     </form> 
    </div>
    <!--.n-search--> 
    <div class="remensousuo">
     <div class="sousuocenter">
      <span>热门搜索:</span>
      <ul> 
       <li><a href="https://www.npc.ink/6663.html" class="shejipsd">psd素材</a></li> 
       <li><a href="https://www.npc.ink/6663.html" class="shejixd">xd素材</a></li> 
       <li><a href="https://www.npc.ink/6663.html" class="shejifigma">figma素材</a></li> 
       <li><a href="https://www.npc.ink/6663.html" class="shejisketch">sketch素材</a></li> 
       <li><a href="https://www.npc.ink/6663.html" class="shejisketch">ai素材</a></li> 
      </ul>
     </div>
    </div> 
   </div>
   <!--.n-box--> 
  </div>
  <!--.page-section-content--> 
  <style type="text/css" media="screen">


</style> 
  <script type="text/javascript">
    $(document).ready(function(){
    // 当鼠标聚焦在搜索框
    $('#s').focus(
    function() {
    if($(this).val() == '输入关键字') {
    $(this).val('').css({color:"#454545"});
    }
    }
    // 当鼠标在搜索框失去焦点
    ).blur(
    function(){
    if($(this).val() == '') {
    $(this).val('输入关键字').css({color:"#333333"});
    }
    }
    );
    });
</script> 

如何使用

复制代码到需要的地方,例如古登堡的HTML区块或是小工具里面的“自定义HTML”,另外,记得看代码注释哦(。・∀・)ノ

人已赞赏
WordPress美化

B2主题美化:代码高亮美化

2020-10-24 0:00:00

WordPress美化

WordPress美化 - 鼠标点击烟花特效

2020-10-26 0:00:00

⚠️
恩月阁文章由星九进行编写或整理,部分内容来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
若无意中侵害到您的权益,请发送邮件至 xingjiu@nuue.cn 或点击右侧 私信:星九 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索