代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<
meta
charset="UTF-8">
<
title
>Document</
title
>
<
style
type="text/css">
*{
margin:0;padding:0;list-style: none;text-decoration: none;
}
body{
background: #ccc;
}
#container{
background-image: url(backgroundImage.jpg);width: 1613px;height: 700px;margin:0 auto;
}
#logo{
float: left;margin:-5px 5px 0 0;
}
form{
background: white;float: left;
}
#search-input{
outline:none;width:500px;height: 50px;line-height: 50px;float: left;border:0;
}
#search-button{
background-image: url(search.jpg);background-repeat: no-repeat;width:40px;height: 30px;float: left;border:0;margin:8px;
}
#wrapper{
position: absolute;top:200px; left: 300px;
}
</
style
>
<
div
id="container">
<
div
id="wrapper">
<
div
id="logo"> <
img
src="必應.png" alt="tupian" id="logo"> </
div
>
<
form
action="https://cn.bing.com/search" target="_self" method="get">
<
input
type="text" id="search-input" name="q" placeholder="請輸入要搜索的內容：" autofocus="">
<
input
type="submit" id="search-button" value="">
</
form
>
</
div
>
</
div
>
|
這樣便可以得到如下界面：
當然這里最重要的是form表單了，其中action的值是什么呢？
在input中怎么設置name呢？ 我們可以在必應搜索中隨便搜索一些東西，比如搜索，可以看到：
於是，我們在action中輸入https://cn.bing.com/search
將第一個input的name設置為“q”即可。
值得注意的是：在提交按鈕中的type要設置為submit即可自動實現搜索而不需要使用javascript代碼。
同樣的，如果我們需要使用百度，即需要在百度中搜索任意內容：
於是，我們需要將action的值設置為https://www.baidu.com/s 將第一個input的name值設置為wd即可。
注： 我們也可以使用js原生的方法 focus()使其獲得焦點。
如： document.querySelector("input").focus() 那么第一個input元素就自動獲取焦點了。