CSS实例教程:制做对客户友善的站内检索表单

日期:2021-03-15 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑


站内检索作用是网站必不能少的,它能够协助访问者检索特定的或感兴趣爱好的內容。检索是由文字框和按钮构成,默认设置的状况下,在各个访问器的实际效果不1样,乃至测算机系统软件主题的不一样,也会使她们的实际效果不1样。
站内检索作用是网站必不能少的,它能够协助访问者检索特定的或感兴趣爱好的內容。检索是由文字框和按钮构成,默认设置的状况下,在各个访问器的实际效果不1样,乃至测算机系统软件主题的不一样,也会使她们的实际效果不1样。这对浏览者明显不友善。以便使检索更友善,大家对它开展“生产加工”,让它在各种各样自然环境下都显示信息1致的实际效果,并且还给浏览者提醒。
检索作用的 XHTML 编码1般以下: <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编码: 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"
}
}
}
有关解释:
onfocus —— 元素聚焦时开启的恶性事件
onblur —— 元素丧失聚焦点时开启的恶性事件
上一篇:CSS新手入门:XHTML文本文档构造树 返回下一篇:没有了