云優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;}
前臺展現樣式
請立即點擊咨詢我們或撥打咨詢熱線: 18031152740,我們會詳細為你一一解答你心中的疑難。業務經理在線