威尼人娱乐网站官方网站

建站常识

Welcome to Beijing RuiHeng TianLong Technology Co., Ltd.

CSS搜索框样式

时间:  来源:网站建设企业  编辑:网站制作企业  点击量:
搜索框是大家在浏览各个网站时最常见到的网站功能之一,其实对于从事 网站建设 工作的人员来说,大家不仅仅是要将它的功能优化,对于它的美观度也不可忽视。下面带大家做一个简单的搜索框,大家都mark起来吧! 效果图: 文中所用到的图片: 首先,大家将它分
搜索框是大家在浏览各个网站时最常见到的网站功能之一,其实对于从事网站建设工作的人员来说,大家不仅仅是要将它的功能优化,对于它的美观度也不可忽视。下面带大家做一个简单的搜索框,大家都mark起来吧!
效果图: CSS搜索框样式(图1)
文中所用到的图片:CSS搜索框样式(图2)
首先,大家将它分成左右两边,左侧呢就是大家搜索框,右侧就只有图片,因此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 ? 2010-2021 北京瑞恒天龙科技有限企业  All Rights Reserved  |  威尼人娱乐网站官方网站知名服务商  |  威尼人娱乐网站官方网站 | 京ICP备11004170号-1   京公网安备110107000463号
地址:北京市海淀区永定路长银大厦B座  非工作时间:15810379666  服务热线:400-600-6204 座机:010-89941606 转801/802/803/804  版权所有 盗版必究!

在线咨询
关闭
电话咨询
网站制作电话
400-600-6204
XML 地图 | Sitemap 地图