当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS sprite实例教程:li:hover修改密码

CSS样式表
网页页面原结构和CSS写法导致浏览器兼容问题
CSS经验:ul列表不正确使用的趋势
Styleneat帮助你容易阅读和更新CSS文件
CSS的内容注释和作者及文件版本注释
网页设计制作教程:CSS书写格式
将CSS按照层叠式结构化重新组织与构建
CSS教程之CSS盒模型
CSS 框架BlueTrip特性
IE7和FF浏览器中右下角图片广告
CSS实例:通过定义渐变边框给图片加阴影
网页选项卡TAB设计原则和应用案例教程
8个设计规范的表格Table CSS样式应用
CSS制作的背景动态变化的网页导航
网页选项卡TAB设计原则和应用案例教程
使用CSS给图片添加阴影的方法
WEBJX收集20个高质量的免费CSS模板
13个网页页面浏览器兼容性验证工具
11个用CSS样式表制作网页按钮的教材
CSS3属性使网站设计增强同时不消弱可用性
清理无用的CSS样式的几个有用工具

CSS样式表 中的 CSS sprite实例教程:li:hover修改密码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-03   浏览: 151 ::
收藏到网摘: n/a

Codemoz! 会员信息修改的部分用到了这个效果,说难不难。要点是li:hover(IE6下使用JS模拟),CSS sprite。效果见下图:

HTML部分:

<ol id="need">
  <li><label class="old_password">原始密码:</label> <input name='' type='password' id='' /></li>
  <li><label class="new_password">新的密码:</label> <input name='' type='password' id='' /><dfn>(密码长度为6~20字节。不想修改请留空)</dfn></li>
  <li><label class="rePassword">重复密码:</label> <input name='' type='password' id='' /></li>
  <li><label class="email">邮箱设置:</label> <input name='' type='text' id='' /><dfn>(Codemoz! 承诺绝不会给您发送任何垃圾邮件。)</dfn></li>
</ol>

 CSS部分:

/*demo所用元素值*/
#need {margin: 20px auto 0;width: 610px;}
#need li {height: 26px;width: 600px;font: 12px/26px Arial, Helvetica, sans-serif;background: #FFD;border-bottom: 1px dashed #E0E0E0;display: block;cursor: text;padding: 7px 0px 7px 10px!important;padding: 5px 0px 5px 10px;}
#need li:hover,#need li.hover {background: #FFE8E8;}
#need input {line-height: 14px;background: #FFF;height: 14px;width: 200px;border: 1px solid #E0E0E0;vertical-align: middle;padding: 6px;}
#need label {background: url(../images/icon_sprite.gif) no-repeat;padding-left: 30px;}
#need label.old_password {background-position: 0 -277px;}
#need label.new_password {background-position: 0 -1576px;}
#need label.rePassword {background-position: 0 -1638px;}
#need label.email {background-position: 0 -429px;}
#need dfn {display: none;}
#need li:hover dfn, #need li.hover dfn {display:inline;margin-left: 7px;color: #676767;}

 JS部分:

function suckerfish(type, tag, parentId) {
 if (window.attachEvent) {
  window.attachEvent("onload", function() {
   var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
   type(sfEls);
  });
 }
}

hover = function(sfEls) {
 for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
   this.className+=" hover";
  }
  sfEls[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp(" hover\\b"), "");
  }
 }
}
suckerfish(hover, "li");

 HTML部分采用了一个大家可能平时不是很常用的标签:<dfn>,<dfn>标签是W3C推荐使用的语义标签,它隶属于文本组件中的短语元素,用来定义一个定义项目,起到解释说明的作用。

 <dfn>允许被放置在以下父元素中:

a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, span, strong, sub, sup, td, th, tt, var

 当<dfn>标签被用作父元素时,它的内部容许放置以下子元素标签:

a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var

 上面的DEMO下载地址请点击这里: LI:HOVER