![在這裏插入圖片描述]()
一.效果圖
![[外鏈圖片轉存失敗(img-K2Xq9KN0-1567155234826)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1567154923651.png)]]()
二.相關代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>搜索框實例</title>
<style type="text/css">
#search
{
position:relative;
padding-top:3px;
height:35px;
width:330px;
background:url(image/search.jpg) no-repeat;
}
#input
{
left:2px;
position:absolute;
font-size:20px;
width:240px;
height:25px;
border:0;
background:none;
}
#go
{
position:absolute;
left:258px;
width:70px;
height:30px;
cursor:pointer;
border:0;
background:none;
}
#search2
{
position:relative;
padding-top:3px;
height:35px;
width:330px;
}
#input2
{
left:2px;
position:absolute;
font-size:20px;
width:240px;
height:25px;
border:0;
background:#FFFFFF;
border:1px solid #CCCCCC;
}
#go2
{
font-size:14px;
color:#FFFFFF;
position:absolute;
left:258px;
width:70px;
height:30px;
cursor:pointer;
border:0;
background:#4876FF;
border:1px solid;
border-radius:5px;
}
</style>
</head>
<body>
方案一：使用背景圖片製作的搜索框
<div id="search">
<input type="text" id="input" />
<input type="button" id="go" />
</div>
方案二：純CSS實現的搜索框
<div id="search2">
<input type="text" id="input2" />
<input type="button" id="go2" value="搜 索" />
</div>
</body>
</html>
三.素材
![在這裏插入圖片描述]()
![[外鏈圖片轉存失敗(img-K2Xq9KN0-1567155234826)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1567154923651.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20190830165550935.png)
