云優cms搜索框代碼已測試

云優cms建站，產品列表需要增加搜索功能，我們今天就來寫一下具體的代碼

后臺搜索模板search_index.html中在搜索位置加上以下代碼即可

//搜索框代碼

<div class="search">

  <div class="container">

    <div class="fr">

      <form action="<yunu:url name='search'/>" method="post">

        <input type="hidden" name="cid" value="4">

        <input type="text" name="key" id="input1" value="" placeholder="請輸入搜索關鍵詞">

        <button type="submit" class="btn"></button>

      </form>

    </div>

  </div>

</div>

//搜索框css代碼

    .search{height: 70px; border-bottom: 1px solid #e2e2e2;}

    .search i{margin-right: 10px; display: inline-block; vertical-align: top; width: 17px; height: 68px; background: url(../images/daohangdw.png) no-repeat center;}

    .search .fl{line-height: 70px; float: left; display: inline;}

    .search .fl span{color:#333; font-weight: bold;}

    .search .fr{width:320px;height: 70px; float: right; display: inline;}

    .search .fr input{width: 220px;height: 36px;border: 1px solid #eee;margin-top: 15px;padding-left: 3px; border-radius: 6px 0 0 6px; padding-left: 15px;}

    .search .fr button{width:75px;height: 40px;background: url(../images/search.jpg) no-repeat;border: none;position: relative;left: -10px;top:14px;}

前臺展現樣式