瑞恒网络为企业量身打造北京网站建设、网站制作、企业网站制作、网站设计等一系列专业服务!

CSS搜索框样式

时间:2016-02-19  来源:网站建设公司  作者:网站制作公司  点击:
搜索框是我们在浏览各个网站时最常见到的网站功能之一,其实对于从事 网站建设 工作的人员来说,我们不仅仅是要将它的功能优化,对于它的美观度也不可忽视。下面带大家做一个简单的搜索框,大家都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>
到这里一个搜索框可以说已经完成啦,具体样式可根据自己的需要再进行调整。

本文TAG标签:
返回关闭本页
上一篇:jQuery鼠标滑过时,弹出登录框   下一篇:JQuery实例-标签页效果
推荐阅读
Copyright © 2006-2013 北京瑞恒天龙科技有限公司  All Rights Reserved  |  北京网站建设知名服务商  |  北京网站制作 | 京ICP备11004170号   京公网安备110107000463号
地址:北京市海淀区永定路长银大厦B座4层4B09  非工作时间:15810379666  服务热线:400-600-6204 座机:010-89941606 转801/802/803/804  版权所有 盗版必究!
在线咨询
关闭
电话咨询
网站制作电话
400-600-6204