您现在的位置是：网站首页> 编程资料编程资料
设计一个带选择和提示功能的检索框(分步介绍)设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法
2023-10-28
152人已围观
简介 带选择和提示功能的检索框想必在很多的网站上都有见过吧，接下来为大家分步骤介绍如何设计并实现，感兴趣的朋友可以参考下哈，希望本教程可以帮助到你
好多网站的搜索输入框设计的很漂亮,接下来笔者将逐步介绍如何设置自己的搜索输入框.
设计效果图:
该效果主要采用CSS样式与Javascript进行实现.不得不说CSS样式功能很强大,而且效果很炫,笔者推荐一本书叫《CSS禅意花园》,你可以从中感悟CSS的唯美之处.
我们分步来介绍如何实现.
第一步：如何实现带提示信息的输入框
我们知道输入框在html中使用
我们从其它网站这块应用可以看出,当输入框获得焦点时提示信息就消失了,当输入框失去焦点时输入框中的提示信息就出现了.
所以我们只需要对不同的事件,添加不同的CSS样式,效果就可以完成了.
代码如下:复制代码代码如下:
效果图如下:
接下来我们在这个基础上进行更完美的设计.
第二步:设计带选项的检索框
先写好HTML页面如下,进行相关数据展示,然后再进行CSS样式进行布局复制代码代码如下:
效果图如下:
很丑吧,的确很丑,如果我们看到的那些网站去掉CSS样式,就一个词形容：惨不忍睹.
接下来我们用CSS进行布局,样式设计.CSS代码如下:
复制代码
代码如下:这下我们看一下效果
第三步:整合并完善效果
然后将第一步的效果进行整合.即可得到效果图所示的漂亮的检索框了
