用div+css作搜索框
日期：2014-05-17 浏览次数：20817 次
用div+css做搜索框
怎么把这个图片做成搜索框，用div+css
------解决方案--------------------
效果图，由于我没有背景图片，LZ将背景修改一下。我先设置为black。
![]()
我已经将搜索框ps过了，LZ可以使用。
![]()
代码贴上
------解决方案--------------------
那就把后面的放大镜那块 绑定一个OnClick事件，
方法就多了去了，在图片上设置热点，活着把图片剪下来 做button span a 。。。的背景
简单的就在 放大镜上面放置一个 相对定位的 a标签，
------解决方案--------------------
怎么把这个图片做成搜索框，用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>
------解决方案--------------------
那就把后面的放大镜那块 绑定一个OnClick事件，
方法就多了去了，在图片上设置热点，活着把图片剪下来 做button span a 。。。的背景
简单的就在 放大镜上面放置一个 相对定位的 a标签，
------解决方案--------------------
<!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="s
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
