width:300px
height:30px
background-image: url(../images/search.gif)/*这是这个搜索框的背景*/
background-repeat: no-repeat
background-position: 50%
margin-top: 10px
margin-right: 0px
margin-bottom: 0px
margin-left: 15px
padding: 0px
overflow: hidden
clear: both
}
.search input/*用来去掉搜索框里的文本框和按钮的背景和边框，并设置并列排放*/{
border:none
background:none
float:left
}
.search_box/文本框样式/{
width:150px
height:26px
line-height:26px
padding:0px
color:#999999
text-align:left
margin-top: 2px
margin-right: 15px
margin-bottom: 0px
margin-left: 10px
float: left
}
.search_button/*按钮样式*/{
width:45px
height:27px
cursor:pointer
color:#000000
font-size: 14px
}
具体样式可根据自己的需要调整。
希望对你有所帮助。
<input name="" type="text" style="background:设置搜索框背景"/><input name="" type="button" style="background:设置按钮背景"/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#dv1
{margin:0px autowidth:200pxheight:80px}
#dv2
{
background:url(91529822cd5685b7d7cae2f9.jpg)
width160px height:33px
float:left
width: 174px
overflow: hidden
text-align:center
left: 459px
top: 13px
}
#dv3
{
width:34px
height:33px
float:left
position:absolute
left: 497px
top: 16px
overflow: hidden
}
</style>
</head>
<body><form id="form1" name="form1" method="post" action="">
<div id="dv1"><div id="dv2">
<label>
<input type="text" name="textfield" style="width:100pxheight:20px" />
</label>
</div><div id="dv3"><a href="#" ><img src="aaa.jpg" style="border:0px"/></a></div>
</div> </form>
</body>
</html>
你试下把
