繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程:制作对用户友好的站内搜索表单
- CSS样式表
- css对边框的属性控制和链接的伪类选择器
- css对于颜色和文本属性的控制
- HTML和CSS的关键:盒子模型(Box model)
- CSS网页布局全精通
- css教程:css指令,兼容,注释,selector
- DIV+CSS网页布局的基础知识整理
- 门户网站构建CSS框架的规则
- 8个优秀的CSS实现数据图表的应用实例
- CSS3 有关的问题
- css实用技巧及必须得注意的事项
- CSS在网页放置注意的两个问题
- 学习CSS值得去的几个英文网站
- IE与FF不兼容网页布局CSS问题
- CSS教程:完美的绝对底部
- CSS样式表渐进增强的应用
- CSS3五个技巧给你的网站带来出色的效果
- CSS实例:CSS的10个方法和技巧
- 相对完美的CSS绝对底部
- CSS3中的5个有趣的新技术
- Webjx收集的30个CSS导航及菜单教程
CSS样式表 中的 CSS教程:制作对用户友好的站内搜索表单
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-09 浏览: 78 ::
收藏到网摘: n/a
站内搜索功能是网站必不可少的，它可以帮助浏览者搜索指定的或感兴趣的内容。搜索是由文本框和按钮组成，默认的情况下，在各个浏览器的效果不一样，甚至计算机系统主题的不同，也会使他们的效果不一样。这对访问者显然不友好。为了使搜索更友好，我们对它进行“加工”，让它在各种环境下都显示一致的效果，而且还给访问者提示。
搜索功能的 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>
<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;
}
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代码：
window.onload = function(){
var wordinput = document.getElementById("keyword");
wordinput.onfocus = function(){
this.value = "";
this.style.color = "#000"
}
wordinput.onblur = function(){
if(this.value == ""){
this.value = "请输入关键字";
this.style.color = "#bbb"
}
}
}
var wordinput = document.getElementById("keyword");
wordinput.onfocus = function(){
this.value = "";
this.style.color = "#000"
}
wordinput.onblur = function(){
if(this.value == ""){
this.value = "请输入关键字";
this.style.color = "#bbb"
}
}
}
相关解释：
onfocus —— 元素聚焦时触发的事件
onblur —— 元素失去焦点时触发的事件
评论 (0) All
