搜索栏代码（html5搜索栏代码）

本篇文章给大家谈谈搜索栏代码，以及html5搜索栏代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、搜索页面全代码
• 2、html搜索栏代码
• 3、html制作一个搜索框，代码是什么？
• 4、搜索框的代码怎么写

搜索页面全代码

参考资料：

vue实现搜索历史

!doctype html

html

head

meta charset="utf-8"

title/title

meta name="viewport"

content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /

link href="css/mui.css" rel="stylesheet" /

style type="text/css"

body {

background-color: #FFFFFF;

}

/style

/head

body

div id="app"

header class="mui-bar mui-bar-nav"

a onclick="javascript:history.back(-1);"

class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"/a

h1 class="mui-title"搜索内容/h1

/header

div style="height: 50px;"/div

div style="display: flex;margin: 10px auto 0px auto;margin-left: 20px;"

div style="width: 80%;position: relative;"

!-- 搜索按钮 --

input type="submit" value=""

style="border: none;background-color: transparent;background-image:url(images/ss.png);width: 25px;height: 25px;position: absolute;left: 15px;top: 7px;background-size: 100% 100%;"

!-- 搜索文本 --

input v-model="input"

style="border: none;border-radius: 20px;width: 100%;background-color: #DCDCDC;padding-left: 20%;"

type="text" placeholder="请输入你想要的"

/div

div

button style="border: none;height: 40px;color: #FF0000;font-size: 17px;"

@click="handleSearchResult(input)"搜索/button

/div

/div

div

div

style="display: flex;justify-content: space-between;width: 85%;margin: 0 auto;align-items: center;font-size: 15px;"

div热门搜索/div

/div

div style="display: flex;width: 85%;flex-wrap: wrap;margin: 0 auto;margin-top: 2%;"

div style="width: auto;background-color: #FFE5E5;color: #FF0000;padding: 2%;border-radius: 10px;font-size: 14px;margin: 2% 2% 0px 0px;"

v-for="(i,index) in rmlist" :key="index"{{i}}/div

/div

/div

div style="margin-top: 20px;"

div

style="display: flex;justify-content: space-between;width: 85%;margin: 0 auto;align-items: center;font-size: 15px;"

div历史搜索/div

div style="color: #FF0000;" @click="clearHistory"清空/div

/div

div style="display: flex;width: 85%;flex-wrap: wrap;margin: 0 auto;margin-top: 2%;"

div v-if="historyList.length == 0" style="color: #CCCCCC;font-size: 12px;"暂无搜索记录/div

div v-else v-for="(historyItem, index) in historyList" :key="index"

@click="handleSearchResult(historyItem)"

style="width: auto;background-color: #FFE5E5;color: #FF0000;padding: 2%;border-radius: 10px;font-size: 14px;margin: 2% 2% 0px 0px;"

{{historyItem}}

/div

/div

/div

/div

script src=""/script

script type="text/javascript"

var vm = new Vue({

el: '#app',

data: {

input: '',

historyList: [],

rmlist: ['男装', '女装', '休闲裤', '鸿星尔克', '蔬菜']

},

mounted() {

if (localStorage.getItem('localHistory') !== null) {

this.historyList = localStorage.getItem('localHistory').split('|')

}

},

methods: {

handleSearchResult (val) {

      if (val === '') {

        alert('请输入搜索内容！')

        return

      }

      this.setlocalHistory(val) // 将搜索值加入本地localStorage

      this.historyList = localStorage.getItem('localHistory').split('|') // 从本地localStorage取出搜索历史并展示

      this.input = '' // 清空输入框

      // alert(`跳转至 ${val} 搜索结果页`) // 跳转至搜索结果页

    },

  setlocalHistory (val) {

      val = val.trim()

      let localHistory = localStorage.getItem('localHistory')

      if (localHistory === null) {

        localStorage.setItem('localHistory', val) // 若未设置过则直接设置本地存储

      }else {

        let localHistoryArray = localHistory.split('|').filter(item = item != val) // 删除搜索历史中与本次输出重复项

        if (localHistoryArray.length 0) {

          localHistory = val + '|' + localHistoryArray.join('|') // 新增记录

        }

        if (localHistory.split('|').length 10) { // 最大历史搜索记录10条

          localHistoryArray = localHistory.split('|')

          localHistoryArray.pop() // 删除最旧一项

          localHistory = localHistoryArray.join('|')

        }

        localStorage.setItem('localHistory', localHistory) // 存入本地

      }

    },

clearHistory () {

      localStorage.removeItem('localHistory') // 清空搜索历史

      this.historyList = []

    }

}

})

/script

script src="js/mui.js"/script

script type="text/javascript"

mui.init()

/script

/body

/html

html搜索栏代码

style

*{outline:none;}

.b2{margin:60px 0 5px 0;position:relative;border:0px solid red; }

.b2 .b2_s{margin-left: 10px;outline: 0;border:1px solid #f60;padding:6px;padding-left:15px;color:#999;max-width:70%;min-width:50%;border-radius:20px;}

.b2 .b2_s:onfocus{border:1px solid #f60;outline: 0; }

.b2 .btn{color: #fff;background-color: #428bca;border-color: #357ebd;display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: normal;text-align: center;white-space: nowrap;vertical-align: middle;cursor: pointer;border: 1px solid transparent;border-radius: 4px;}

.b2 .btn_1{margin-top:-2px;border-bottom-right-radius: 0;border-top-right-radius: 0;margin-right: -6px;height:31px;}

.b2 .btn_2{border-bottom-left-radius: 0;border-top-left-radius: 0;margin-left: -1px;padding:6px 6px;border-bottom-right-radius: 4px;border-top-right-radius: 4px;}

.b2 .b2_b2_u{position: absolute;top:23px;overflow:hidden;display:none;z-index:10;background:#fff;border: 1px solid #ccc;border: 1px solid rgba(0,0,0,0.15);box-shadow: 0 6px 12px rgba(0,0,0,0.175); -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);padding:5px 10px;border-radius: 3px;}

/style

div class="b2" id="b2"

input class="b2_s" type="text" id="h_search" placeholder="请输入书名等信息.."

button id="b2_btn1" class="btn btn_1"搜索/button

button id="b2_btn2" class="btn btn_1 btn_2"span class="icon-cog2"/span/button

/div

我用的，截取

html制作一个搜索框，代码是什么？

1、打开Hbuilder编辑器，创建一个input框和button按钮，将它们横排摆放在一起：

2、首先给input框添加“#7FCC0B”颜色的边框，设置宽度和高度即可，给button按钮设置白色的字体和“#7FCC0B”的背景颜色即可完成：

3、按crtl+s，在软件的右侧即可看到最终的效果。以上就是用html制作搜索框的演示：

搜索框的代码怎么写

首先把搜索宽切片下来再CSS样式里面用为背景

body

form action="" method="get"

div class="kuan"input name="" type="text" //div!--搜索框--

div class="an"input name="" type="button" //div!--搜索按钮--

/form

/body

CSS样式根据实际自己调整

style type="text/css"

.kuan input{ width:330px; height:60px; background:background:url(../img/kuan_01.jpg) no-repeat; border:none; float:left}

.an input{ width:120px; height:60px; background:background:url(../img/an_02.jpg) no-repeat;border:none; float:left}

/style

关于搜索栏代码和html5搜索栏代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。