html/css如何写出如下搜索框效果,请给出代码

xiaohuahtml搜索代码 搜索框 html css 

首先来张效果图，这是写好的效果

代码如下：

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
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<metacharset= utf-8 >
<metahttp-equiv= X-UA-Compatible content= IE=edge,chrome=1 >
<title>Examples</title>
<metaname= description content=>
<metaname= keywords content=>
<linkhref=rel= stylesheet >
<styletype= text/css >
#box{
width: 380px;
margin: 30px auto;
font-family: Microsoft YaHei ;
font-size: 14px;
}
input{
width: 260px;
border: 1px solid #e2e2e2;
height: 30px;
float: left;
background-image: url(images/search.jpg);
background-repeat: no-repeat;
background-size: 25px;
background-position:5px center;
padding:0 0 0 40px;
}
#search{
width: 78px;
height: 32px;
float: right;
background: black;
color: white;
text-align: center;
line-height: 32px;
cursor: pointer;
}
</style>
</head>
<body>
<divid= box >
<inputtype= text name= search placeholder= 请输入关键字 >
<divid= search >搜索</div>
</div>
</body>
</html>

上面的背景图片也就是那个放大镜需要你自己找下哦
纯手打，采纳吧，谢谢！