如何用html+css制作一个如图的搜素框

html-css016

如何用html+css制作一个如图的搜素框,第1张

<style>

.schbox{float:leftwidth:100%padding:6px 0pxtext-align:leftline-height:22pxcolor:#000000}

.schbox span{float:leftwidth:80pxtext-align:rightfont-weight:bold}

</style>

<form method="post" action="search.asp">

<div class="schbox"><span>关键字:</span><input type="text" style="width=100pxheight=20px" name="text"></input></div>

<div class="schbox"><span>价格:</span><input type="text" style="width=40pxheight=20px" name="money1"></input>

到<input type="text" style="width="40pxheight=20px" name="money2"></input></div>

<div class="schbox"><span> </span><button type="submit" name="submit">搜索</button></div>

</form>

<!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>

你试下把