搜索框是我们在浏览各个网站时最常见到的网站功能之一，其实对于从事 网站建设 工作的人员来说，我们不仅仅是要将它的功能优化，对于它的美观度也不可忽视。下面带大家做一个简单的搜索框，大家都mark起来吧！ 效果图： 文中所用到的图片： 首先，我们将它分
搜索框是我们在浏览各个网站时最常见到的网站功能之一，其实对于从事
网站建设工作的人员来说，我们不仅仅是要将它的功能优化，对于它的美观度也不可忽视。下面带大家做一个简单的搜索框，大家都mark起来吧！
效果图：
文中所用到的图片：
首先，我们将它分成左右两边，左侧呢就是我们搜索框，右侧就只有图片，因此html布局应该这样写：
<body style="background:#FC9">
<div class="search">
<input name="" type="image" id="sear" src="images/search.jpg"/>右侧的图标
<div class="text"> <input type="text" value="请输入关键字" onfocus="if (value =='请输入关键字'){value =''}" onblur="if (value ==''){value='请输入关键字'}" id="tex" name="textfield" /></div>左侧的搜索框
</div>
</body>
这里body先随便给个颜色，方便看我们搜索框的颜色。
接下来就是CSS样式啦：
<style type="text/css">
.search {width:220px; height:30px; margin-top:45px; margin-left:50%;}
.search #sear {width:40px; height:30px; float:right;}
.text {width:160px; height:28px; float:left; padding-left:15px;}
#tex { width:100%; height:28px; background:#fff; line-height:28px; padding-left:5px; border:none; color:#999;}
</style>
到这里一个搜索框可以说已经完成啦，具体样式可根据自己的需要再进行调整。
