用div+css作搜索框_Java Web开发

用div+css做搜索框

怎么把这个图片做成搜索框，用div+css效果图，由于我没有背景图片，LZ将背景修改一下。我先设置为black。

我已经将搜索框ps过了，LZ可以使用。

代码贴上


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <style>
    body{
		background-color:black;
	}
	.search{
		background:url('search.gif');
		width:286px;
		height:42px;
	}
	input{
		position:relative;
		background-color:transparent;
		border:0px;
		font-size:17x;
		font-weight:bold;
		color:white;
		top:10px;
		left:17px;
	    width:210px;
		height:20px;
	}
  </style>
 </HEAD>
 <BODY>
  <div class="search">
    <input type="input" name="search"/>
  </div>
 </BODY>
</HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <TITLE> New Document </TITLE>
    <style>
        body{
            background-color:black;
        }
        .search{
            background:url('search.gif');
            width:286px;
            height:42px;
        }

        .search a{ display: block; height: 42px; width: 50px; float: right;}
        input{
            position:relative;
            background-color:transparent;
            border:0px;
            font-size:17x;
            font-weight:bold;
            color:white;
            top:10px;
            left:17px;
            width:210px;
            height:20px;
        }

    </style>
</HEAD>
<BODY>
<div class="search">
    <input type="input" name="search"/> <a href="javascript:alert('HelloWorld')"></a>那就把后面的放大镜那块 绑定一个OnClick事件，
方法就多了去了，在图片上设置热点，活着把图片剪下来 做button span a 。。。的背景

简单的就在 放大镜上面放置一个 相对定位的 a标签，