Div+css ，我想制作一个漂亮的搜索框，如下，请哪位高手指点一下？具体怎么做？最好把实例写给我，谢谢！
我在线等，2个小时内每5分钟看一次答案。答对马上给分，如果很满意加50分，谢谢各位大侠！！！！...
我在线等，2个小时内每5分钟看一次答案。答对马上给分，如果很满意加50分，谢谢各位大侠！！！！
展开
4个回答
展开全部
这里<input type="button" value="搜索" />
换成 图片按钮就可以了<input type="image" src="图片路径" />
颜色也是自己调吧
-------------------------
<!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> new document </title>
<style type="text/css">
#search {width:400px;margin:0 auto;padding:6px;height:20px;background:#FFCCFF;}
#search .text{float:left;}
#search .text input{border:1px solid #910091;height:18px;}
#search .btn{float:right;}
</style>
</head>
<body>
<div id="search">
<div class="text"><input type="text" value="在这里搜索..." /></div>
<div class="btn"><input type="button" value="搜索" /></div>
</div>
</body>
</html>
换成 图片按钮就可以了<input type="image" src="图片路径" />
颜色也是自己调吧
-------------------------
<!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> new document </title>
<style type="text/css">
#search {width:400px;margin:0 auto;padding:6px;height:20px;background:#FFCCFF;}
#search .text{float:left;}
#search .text input{border:1px solid #910091;height:18px;}
#search .btn{float:right;}
</style>
</head>
<body>
<div id="search">
<div class="text"><input type="text" value="在这里搜索..." /></div>
<div class="btn"><input type="button" value="搜索" /></div>
</div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
只是在三楼的朋友代码上调整了下。
<!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">
#search {width:400px;margin:0 auto;padding:6px;height:20px;background:#FCF;}
#search .text{float:left;}
#search .text input{display:inline; float:left; width:280px; height:18px; line-height:18px; border:1px solid #910091; font-size:12px; background:#e8e8e8;}
#search .btn{display:inline; float:right; width:85px; height:20px; line-height:20px; font-size:12px;}
#search .anniu{width:85px; height:23px; line-height:15px;}
</style>
</head>
<body>
<div id="search">
<div class="text"><input type="text" value="请填写搜索内容..." /></div>
<div class="btn"><input type="button" value="搜 索" class="anniu" /></div>
</div>
</body>
</html>
<!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">
#search {width:400px;margin:0 auto;padding:6px;height:20px;background:#FCF;}
#search .text{float:left;}
#search .text input{display:inline; float:left; width:280px; height:18px; line-height:18px; border:1px solid #910091; font-size:12px; background:#e8e8e8;}
#search .btn{display:inline; float:right; width:85px; height:20px; line-height:20px; font-size:12px;}
#search .anniu{width:85px; height:23px; line-height:15px;}
</style>
</head>
<body>
<div id="search">
<div class="text"><input type="text" value="请填写搜索内容..." /></div>
<div class="btn"><input type="button" value="搜 索" class="anniu" /></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你图是在网上截图的吧，你想做一样的话，把网址截图，截上来，我帮你把css拿下来给你就OK了。
追问
很囧的一件事情，这个是从效果图上截下来的...
追答
那我只能说制作方法了。
因为一般的文本框是没有这个效果的。所以我们要用PS切图，把这个框切出来用着背景。
在添加文本框的时候定义，宽高与你切的图一样大小，然后文本框调用CSS样式， CSS中引用你切好的背景图片。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你参考下google怎么做的，自己动手，丰衣足食！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
