CSS教程:制作对用户友好的站内搜索表单

2016-02-19 23:56 11 1 收藏

最近很多朋友喜欢上设计，但是大家却不知道如何去做,别担心有图老师给你解答，史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - Web开发】

站内搜索功能是网站必不可少的，它可以帮助浏览者搜索指定的或感兴趣的内容。搜索是由文本框和按钮组成，默认的情况下，在各个浏览器的效果不一样，甚至计算机系统主题的不同，也会使他们的效果不一样。这对访问者显然不友好。为了使搜索更友好，我们对它进行加工，让它在各种环境下都显示一致的效果，而且还给访问者提示。

搜索功能的 XHTML 代码一般如下：

form id="form1" name="form1" method="post" action=""
label
input type="text" name="keyword" id="keyword" /
/label
label
input type="submit" name="put-in" id="put-in" value="搜索" /
/label
/form

默认情况下，在各个浏览中的效果如下图：

给它加上样式：

*{
margin:0;
padding:0;
}
form{
position:relative;
margin:20px;
}
input{
position:absolute;
border:1px solid #00CCFF;
background:#fff;
}
#keyword{
width:150px;
height:24px;
padding-left:2px;
line-height:24px;
color:#bbb;
}
#put-in{
width:50px;
height:26px;
left:150px;
}

加上样式之后，在各个浏览器中的效果都如下图：

我们再给它添加提示：在 XHTML 代码中，给文本框加上默认的文字 value="请输入关键字" ，然后再加上 javascript 代码，使用户用鼠标点击文本框时，默认的文本消失，能够直接输入关键字。

javascript代码：

相关解释：

onfocus 元素聚焦时触发的事件

onblur 元素失去焦点时触发的事件

来源:http://www.tulaoshi.com/n/20160219/1630886.html

上一篇：电脑只能上qq不能打开网页怎么回事简单设置解决方法
下一篇： CSS教程(3)：通过实例学习CSS背景

看过《CSS教程:制作对用户友好的站内搜索表单》的人还看了以下文章更多>>

用ASP建立站内信息搜索系统

标签： Web开发

假如你拥有一个庞大的网站，内容又多，那么来访者往往很难找到自己所需要的东东，这时候你就需要一个站内搜索来帮助来访者更快的找到索要的资料了！现在你就可以用asp轻易的实现这种功能，何况现在支持asp的站点这么多，利用这个搜索引擎可以搜索到你的主页里面任何一个文件或者软件资料，它可以精确到每个字！说了这么多你是不是怦然心动...

CSS制作的三款漂亮的网页表单

标签： Web开发

CSS制作的三款漂亮的网页表单，点击这里学习更多CSS教程和CSS视频教程。漂亮表单，三个颜色演示CSS文件下载地址：http://www.webjx.com/files/soft/piaoliangbiaodan.rar

集合制作对称图形

标签： PS PS教程

用CSS制作具有亲和力的表单

标签： Web开发

对于表单，很常用。但是在web standard建站的时候，他的排版往往让人遗忘，到了真正用到的时候就发现让人头疼，当然我也遇到过。我现在要介绍一个用fieldset/label标签制作漂亮而且具体亲和力的表单的方法。基本的xhtml h3已注册用户登录/h3 form action="" method="post" name="apLogin" fieldset legend用户...

CSS教程:网页表单设计技巧

标签： Web开发

输入框( Input )应当符合逻辑地划分为小组，这样大脑就可以很好的处理大堆区域间的关系。– 《HTML权威指南》 Web 应用程序总是利用表单来处理数据录入和配置，但并不是所有的表单都保持一致。输入区域的对齐方式，各自的标签(label)，操作方式，以及周围的视觉元素都会或多或少影响用户的行为。表单布局考虑到...

查看更多精彩>>