Div+css 搜索框

Div+css,我想制作一个漂亮的搜索框,如下,请哪位高手指点一下?具体怎么做?最好把实例写给我,谢谢!我在线等,2个小时内每5分钟看一次答案。答对马上给分,如果很满意加... Div+css ,我想制作一个漂亮的搜索框,如下,请哪位高手指点一下?具体怎么做?最好把实例写给我,谢谢!我在线等,2个小时内每5分钟看一次答案。答对马上给分,如果很满意加50分,谢谢各位大侠!!!!
我的框框要输入东西的,晕,如果那么简单我就不问了
hd287039535
你的jpg代表什么图片,我的图片要不要切?
psufool
你的服务器还是打不开
leaposts
做好了么?
展开
 我来答
leaposts
推荐于2017-09-20 · TA获得超过150个赞
知道小有建树答主
回答量:150
采纳率:0%
帮助的人:63.2万
展开全部

正在给你做 ,做完了,你看看吧

源代码如下;

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

本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
hd287039535
2010-08-26 · 超过12用户采纳过TA的回答
知道答主
回答量:55
采纳率:0%
帮助的人:80.5万
展开全部
<!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>

你试下把
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友8cccaeb9d
2010-08-26 · 超过20用户采纳过TA的回答
知道答主
回答量:66
采纳率:0%
帮助的人:59.7万
展开全部
你把这个图片当做背景,然后加上连接,不就是你要的漂亮搜索框了吗,还是一模一样的
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式