网页输入框的样式触发的效果

天天无忧house

天天无忧house

2016-02-19 14:58

今天图老师小编要向大家分享个网页输入框的样式触发的效果教程,过程简单易学,相信聪明的你一定能轻松get!
这个例子主要学习两个参数onblur和onFocus.因为这两个参数以前很少遇到,baidu一下明白了,onblur是控件在失去焦点的时候触发的事件,而onFocus就是成为输入焦点的时候触发的事件,这两个参数都可以和className结合直接调用样式表类名
  
  !DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
  
  "http://www.w3.org/TR/html4/loose.dtd"
  
  html
  
  head
  
  metahttp-equiv="Content-Type"content="text/html;charset=gb2312"
  
  title/title
  
  /head
  
  body
  
  styletype="text/css"
  
  .input1{
  
  font-family:verdana;background-color:#EEEEEE;border-bottom:#FFFFFF1pxsolid;border-left:#CCCCCC1pxsolid;border-right:#FFFFFF1pxsolid;border-top:#CCCCCC1pxsolid;font-size:12px;
  
  }
  
  .input1-bor{
  
  font-family:verdana;background-color:#F0F8FF;font-size:12px;
  
  border:1pxsolid#333333;}
  
  /style
  
  tablecellspacing=2cellpadding=0width=300border=0
  
  tr
  
  tdfontclass="en1"姓名:/font/td
  
  tdinputsize=40name=nameclass="input1"onblur="this.className='input1'"onfocus="this.className='input1-bor'"
  
  /td
  
  /tr
  
  tr
  
  tdfontclass="en1"邮箱:/font/td
  
  tdinputsize=40name=emailclass="input1"onblur="this.className='input1'"onfocus="this.className='input1-bor'"/td
  
  /tr
  
  tr
  
  tdfontclass="en1"网址:/font/td
  
  tdinputsize=40name=urlclass="input1"onblur="this.className='input1'"onfocus="this.className='input1-bor'"
  
  /td
  
  /tr
  
  tr
  
  tdfontclass="en1"主题:/font/td
  
  tdinputsize=40name=subjectclass="input1"onblur="this.className='input1'"onfocus="this.className='input1-bor'"
  
  /td
  
  /tr
  
  tr
  
  tdfontclass="en1"内容:/font/td
  
  tdtextareaname=messagerows=5cols=35class="input1"onblur="this.className='input1'"onfocus="this.className='input1-bor'"/textarea/td/tr/table
  
  /body
  
  /html
  
展开更多 50%)
分享

猜你喜欢

网页输入框的样式触发效果

Web开发
网页输入框的样式触发效果

网页输入框的样式触发的效果

Web开发
网页输入框的样式触发的效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS实例:横线样式的输入框

Html CSS布局 Div+CSS XHTML
CSS实例:横线样式的输入框

Javascript对网页输入框的字数限制

Web开发
Javascript对网页输入框的字数限制

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

网页设计关于表单输入框的技巧代码

Web开发
网页设计关于表单输入框的技巧代码

YUI网页布局:自适应宽度的输入框

Web开发
YUI网页布局:自适应宽度的输入框

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

wps中如何设置水印

wps中如何设置水印

光标乱跑是怎么回事

光标乱跑是怎么回事
下拉加载更多内容 ↓