清风细雨楼

设计一个带选择和提示功能的检索框(分步介绍)
网页制作 2024/12/23 佚名
3 1
清风细雨楼 Design By www.eepep.com

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

设计效果图:

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

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

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

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

我们知道输入框在html中使用<input type=”text” >标签定义,针对输入框我们常用的事件为触焦,和脱焦.

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

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

代码如下:

复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>焦点事件特效-搜索框</title>
<style>
.init{
color:gray;
/*font-style: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.className='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://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>焦点事件特效-搜索框</title>
</head>
<body>
<div class="searchdiv">
<div class="searchTool">
<form onsubmit="return searchFooterFunc();">
<span class="choose" hoverable="true">
<span class="chooseList">全部</span>
<b></b>
<div class="choosePop">
<ul>
<li><a href="#" 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="searchBtn">
</form>
</div>
</div>
</body>
</html>

效果图如下:

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

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

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

复制代码代码如下:
<style>
body, button, input, select, textarea {
font: 12px/1.6 Verdana, Helvetica, sans-serif;
}
.searchdiv{
height:38px;
padding:8px 0 0 0;
background:#ffba00;
border-top:1px solid #3e3e3e;
border-bottom:1px solid #3e3e3e;
text-align:center
}
/*.footerSearch .searchBar{margin:0 auto;}*/
.searchTool{
width:360px;
height:32px;
line-height:32px;
margin:0px auto 0 auto;
text-align:left;
background:#fff;
}
.choose{
float:left;
cursor:pointer;
height:32px;
width:52px;
display:inline-block;
position:relative;
line-height:32px;
font-size:12px;
text-align:center;
padding-right:10px;
}
/*下拉箭头样式*/
.choose b{
position:absolute;
right:8px;
top:14px;
width:0;
height:0;
border-width:4px 4px;
border-style:solid;
border-color:#868686 #fff #fff;
font-size:0;line-height:0;
}

.searchTextInit{
height:32px;
line-height:32px;
border:0;
border-left:1px solid #eca128;
padding:0 8px;
font-size:12px;
color:#333;
color:gray;
width:250px;
background:#fff;
float:left
}
.searchTextInput{
height:32px;
line-height:32px;
border:0;
border-left:1px solid #eca128;
padding:0 8px; /*上 右 下 左*/
font-size:12px;
color:black;
width:250px;
background:#fff;
float:left
}
.searchBtn{
float:left;
height:24px;
width:24px;
background:#fff
url(images/bs.png) no-repeat center 0px;
cursor:pointer;
border:0;
margin:4px 0 0 4px;
}
.searchBtn:hover{
background:#fff url(images/bs.png)
no-repeat center -24px;
}
.choose ul{
border-bottom:1px solid #eca128;
list-style:none;
width:64px;
padding:0px;
}

.choose:hover b{border-color:#868686 #fff #fff;}

.choose:hover .choosePop{
display:inline-block;
}

.choosePop{
display:none;
width:64px;
position:absolute;
left:-1px;
top:20px;
}
/*鼠标离开列表上效果*/
.choosePop ul li a:link,.choosePop ul li a:visited{
color:#666;
background:#fff;
}
/*鼠标移动到列表上效果*/
.choosePop ul li a:hover,.choosePop ul li a:active{
color:#2d2d2d;
background:#ffba00;
}
.choosePop ul li{
border-left:1px solid #eca128;
border-right:1px solid #eca128;
line-height:24px;
}
.choosePop ul li a{
display:block;
font-size:12px;
text-decoration:none;
}

</style>

这下我们看一下效果

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

第三步:整合并完善效果

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

清风细雨楼 Design By www.eepep.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
清风细雨楼 Design By www.eepep.com
www.eepep.com 清风细雨楼
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
清风细雨楼 Design By www.eepep.com