Div+css 搜索框
发布网友
发布时间：2022-04-25 19:42
共3个回答
热心网友
时间：2022-04-20 21:12
正在给你做 ，做完了，你看看吧
源代码如下;
<!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/html; charset=gb2312" />
<title>DIV+CSS搜索框</title>
<style type="text/css">
<!--
#search{
margin:0 auto;
padding:0px;
width:172px;
height:33px;
background-color:#303030;
background-image:url('searchbg.gif');
background-repeat:no-repeat;
background-position:left top;
}
#search form{
width:133px;
height:33px;
}
#search .txt{
width:120px;
height:14px;
margin:6px 0px 0px 10px;
}
#btn{
width:38px;
height:32px;
float:left;
margin-top:1px;
}
//-->
#btn a{
text-decoration:none;
}
</style>
</head>
<body>
<div id="search">
<div id="searchtxt" style="width:134px; height:33px; float:left">
<form action="#" method="get" name="searchForm" onsubmit="">
<label>
<input type="text" class="txt" />
</label>
</form>
</div>
<div id="btn"><a href="javascript:document.searchform.submit();"><span><img src="btn.gif" style="border:0" alt="搜索一下"/></span></a></div>
</div>
</body>
</html>
PS:
图片 search.gif就是楼主提供的图片。把原图上的白色放大镜抠掉，就行了
没再FF下调试，在IE7下调试成功。 a标记里的javascript是必须要有的。 （忘记是不是那样写了。囧）
要是不明白，可以QQ上M我，719823124
热心网友
时间：2022-04-20 22:30
<!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/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#dv1
{margin:0px auto; width:200px; height:80px}
#dv2
{
background:url(91529822cd5685b7d7cae2f9.jpg);
width;160px; 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:100px;height:20px" />
</label>
</div><div id="dv3"><a href="#" ><img src="aaa.jpg" style="border:0px"/></a></div>
</div> </form>
</body>
</html>
你试下把
热心网友
时间：2022-04-21 00:04
你把这个图片当做背景，然后加上连接，不就是你要的漂亮搜索框了吗，还是一模一样的
