做网站开发我们肯定少不了一种最基本的功能,就是搜索框,那么搜索框样式也能让一个网站看起来更加美观上档次。现在我们就教大家一种如何把搜索框做的很美观的方法。

效果图:

1511924193345644.jpg

实现这种效果有两种方法:一是整体处理一个背景,以透明gif图的方式定位到搜索框,或者切分开,这种方法加载快,而且灵活性更高。

文中用到的图片

1511924247772720.gif

1511924251902153.gif

CSS美化的漂亮搜索框

body{ font: normal 100% 'Arial','Helvetica','Verdana',sans-serif; color: #333; }

p { padding: 12px 0; margin: 0; font-size: .8em; line-height: 1.5; }

form { margin: 0; } #search_box

{ width: 201px; height: 31px; background: url(http://files.jb51.net/demoimg/200912/bg_search_box.gif); } #search_box #s

{ float: left; padding: 0; margin: 6px 0 0 6px; border: 0; width: 159px; background: none; font-size: .8em; }

#search_box #go { float: right; margin: 3px 4px 0 0; }

提示:您可以先修改部分代码再运行

以上就是我们用css实现的搜索框,简单美观,当然大家可以按照以上的方法去制作一个自己喜欢的搜索框。

相关推荐:

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐