设计一个带选择和提示功能的检索框(分步介绍)

好多网站的搜索输入框设计的很漂亮 , 接下来笔者将逐步介绍如何设置自己的搜索输入框 .

设计效果图 :

该效果主要采用 CSS 样式与 Javascript 进行实现 . 不得不说 CSS 样式功能很强大 , 而且效果很炫 , 笔者推荐一本书叫《 CSS 禅意花园》 , 你可以从中感悟 CSS 的唯美之处 .

我们分步来介绍如何实现 .

第一步：如何实现带提示信息的输入框

我们知道输入框在 ht ML 中使用 <input&nbs p; ty PE = ]text] > 标签定义 , 针对输入框我们常用的事件为触焦 , 和脱焦 .

我们从其它网站这块应用可以看出 , 当输入框获得焦点时提示信息就消失了 , 当输入框失去焦点时输入框中的提示信息就出现了 .

所以我们只需要对不同的事件 , 添加不同的 CSS 样式 , 效果就可以完成了 .

代码如下 :

复制代码

代码如下:

<!DOCTYPE HTML P ub LIC "-//W3C//DTD HTML 4.01 Trans IT ional//EN" "http://HdhCmsTestw3. org /TR/html4/loose.dtd">
<html>
<head>
< ;m eta http-equiv="Content -t ype" content="text/html;charset=gbk">
<title>焦点事件特效-搜索框</title>
<style>
.init{
color:gray;
/*font -s tyle:italic;*/
width:200px;
}
.highlight{
color:black;
/*font-style:normal;*/
width:200px;
}
</style>
<script>
function txt_onfocus(tag){
if(tag.value == tag.defaultValue){
tag.value='';
tag. classname ='highlight';
}
}
function txt_onblur(tag){
if(tag.value==''){
tag.value=tag.defaultValue;
tag.classN am e='init';
}
}
</script>
</head>
<body>
<input type="text" onblur="txt_onblur(this)" onfocus="txt_onfocus(this)" value="关键词" class="init">
<input type="button" value="找找看">
</body>
</html>

效果图如下 :

接下来我们在这个基础上进行更完美的设计.

第二步 : 设计带选项的检索框

先写好 HTML 页面如下 , 进行相关数据展示 , 然后再进行 CSS 样式进行布局

复制代码

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://HdhCmsTestw3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>焦点事件特效-搜索框</title>
</head>
<body>
<div class="se Arch div">
<div class="searchTool">
<form onsubmit="return searchFooterFunc();">
<span class="choose" hoverable="true">
<span class="chooseList">全部</span>
<b></b>
<div class="choosePop">
<ul>
<li><a hr ef=" # " value="0">全部</a></li>
<li><a href="#" value="1">作品</a></li>
<li><a href="#" value="2">经验</a></li>
<li><a href="#" value="3">作者</a></li>
</ul>
</div>
</span>
<input type="text" onblur="txt_onblur(this)" onfocus="txt_onfocus(this)" value="请输入关键词" class="searchTextInit">
<input type="button" value class="search BT n">
</form>
</div>
</div>
</body>
</html>

效果图如下 :

很丑吧, 的确很丑 , 如果我们看到的那些网站去掉 CSS 样式 , 就一个词形容：惨不忍睹 .

接下来我们用 CSS 进行布局 , 样式设计 .CSS 代码如下 :

复制代码

代码如下:

这下我们看一下效果

第三步 : 整合并完善效果

然后将第一步的效果进行整合. 即可得到效果图所示的漂亮的检索框了 .

总结

以上是为你收集整理的设计一个带选择和提示功能的检索框(分步介绍) 全部内容，希望文章能够帮你解决设计一个带选择和提示功能的检索框(分步介绍) 所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于设计一个带选择和提示功能的检索框(分步介绍)的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did204747

更新时间：2023-05-03 阅读：24次