设置网页上tab按键的切换顺序
一个很容易忽视.却又很重要的用户体验.
特别是在登录页面经常会用到.
就是利用键盘的tab键切换网页中的焦点.有时候两个文本框中间会有忘记密码,提示信息等超链接,如果按tab键就会切换到它们上面.这里就需要用到一个很不长用到的属性了."tabindex",
tabindex的属性值为1到32767.值越小优先级越高..负值会被排除.永远不会切换焦点到负值上.
兼容多浏览器的css透明样式。
filter: Alpha(Opacity=50); /* IE */ -moz-opacity:0.5; /* FF */ opacity:0.5; /* CSS3 */
udate:
上面的代码在新版firefox下失效了.用下面的~
opacity: 0.8; filter: alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8;
层和css模拟ajax浮动框的效果
一个用层跟css做出来的浮动窗效果.虽然不能像ajax那样直接数据交换,但也挺酷的.
ie6.7.8 firefox chrome opera safari 通过测试
不单独写例子了.直接把工作中写的那个放出来.
其中可以引伸出很多好玩的东西,比如说那些浮动广告啥的.就可以永远固定在一个位置.再比如头部导航可以固定.不论滚动条到哪都能看到头部导航.等等.
具体实现方式
CSS代码
* { margin : 0px ; padding : 0px ; list-style-type : none ; } /* 我习惯的全局样式 */
html { height : 100%; overflow : hidden ; border : 0px none #FFFFFF ; } /* 要点 */
body { height : 100%; overflow : hidden ; } /* 要点 */
#body { overflow : auto ; height : 100%; width : 100%; } /* 要点 */
#mask { filter: Alpha(Opacity=50); /*IE*/ -moz-opacity:0.5; /*MOZ , FF*/ opacity:0.5; position : absolute ; left : 0px ; top : 0px ; right right : 0px ; bottom bottom : 0px ; height : 100%; width : 100%; display : none ; background-color : #CCC ; z-index : 10; } /* 要点 */
XML/HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" >
< body >
< div id = "body" >
<!-- 这里放整个网站内容 -->
</ div >
< div id = "tips" >
<!-- 这里放浮动的层啥的 -->
</ div >
</ body >
</ html >
这样做可以很好的实现ajax表面上的那种效果。。连滚动条都封住了。整个屏幕不能滚动。
写HTML邮件的建议及规范
由于工作需要,要做几个html格式的邮件页面.由于各大邮箱服务网站对源码过滤的不同.需要让页面尽量兼容.
通过俺们伟大的百度,搜到了两篇文章:
- 如何编写兼容各主流邮箱的html邮件by 大米 2008.4.28
- email页面代码书写建议及规范 2008.4.30
这里摘录一下重点:
对于纯文本邮件：
- 邮件标题不要超过18个字；
- 每行不要超过34个字。
对于html邮件：
- 邮件标题不要超过18个字。
- html代码和图片尽量不要超过50kb。
- 页面宽度推荐500px，最大不要超过600px。
- 避免使用边缘的、非主流的html技术。
- body和meta之类的标签是可以无视的，因为在很多邮箱系统里它会被过滤
- 不使用css来布局，应该使用表格来布局。
- 不要用外联样式表，不要写<style>标签、不要写class，所有css都用style属性，什么元素需要什么样式就用style写内联的css。
- 不要在style里面写float、position这些style，因为会被过滤。那么如何实现左右布局或者更复杂的布局呢？用table。
- 少用图片，邮箱不会过滤你的img标签，但是系统往往会默认不载入陌生来信的图片，如果用了很多图片的邮件，在片没有载入的情况下，丑陋无比甚至看不清内容，没耐心的用户直接就删除了。图片上务必加上alt。
- 不使用flash、java、javascript、frames、i-frames、activex 以及 dhtml
- style内容里面background可以设置color，但是img会被过滤，就是说不能通过css来设置背景图片了。但是有一个很有意思的元素属性，也叫background，里面可以定义一个图片路径，这是个不错的替代方案，虽然这样功能有限，比如无法定位背景图片了，有总比没有好。例如要给一个单元格加一个背景，必须这样写：
<td background=”http://image1.koubei.com/images/common/logo_koubei.gif”></td> - div模式的邮箱不支持flash，iframe模式的有待验证。
最后提一句，sohu的邮箱很怪异，会在每个文本段后面加一个空格，导致原本正常的排版一行放不下而换行，从而使某些布局错乱。所以，如果你要兼容sohu邮箱的话，遇到一些紧凑的布局就要格外小心了，尽量减少文本段的数量，留足宽度。
图片屏蔽规则
| blocking issue | aol v. 6.0-9.0 | gmail | hotmail | yahoo! | outlook 2000/xp | outlook 2003 | outlook express w/sp2 | outlook express w/o sp2 |
| 外链的图片是否默认被屏蔽 | yes | yes | no | no | no | yes | yes | no |
| 用户能否设置是否屏蔽图片 | yes | no | yes | yes | yes | yes | yes | yes |
| 能不能让用户点击某个按钮就显示邮件中的图片 | yes | yes | yes | no | no | yes | yes | n/a |
| 当发件人在用户的联系人列表里时是否默认显示图片 | yes | no | yes | no | yes | yes | yes | yes |
| 发件人在isp白名单中时能不能默认显示图片(国内好像没这个概念) | yes | n/a | yes | no | n/a | n/a | n/a | n/a |
| 图片被屏蔽时是否显示alt属性 | no | yes | no | no | no | no | no | n/a |
| 预览时显示windows的主题样式 | no | no | no | no | yes | yes | yes | yes |
国内用户常用的foxmail似乎没有屏蔽邮件内图片的功能，我也找不到相关设置的地方。
一旦图片被屏蔽，整个邮件就会变得面目全非，这里有以下一些建议：
- 重要内容尽量避免使用图片，比如标题、链接等；
- 制作一份和邮件内容一样的web页面，然后在邮件顶部写一句话，类似：“如果您无法查看邮件内容，请点击这里查看”；
- 所有图片都要加上alt属性；
- 所有的图片都要定义高和宽；
- 通知收件人把你的发件地址加入白名单。
outlook 2007的限制
由于outlook 2007使用了word的渲染引擎来展现邮件内容，所以很多html属性没法得到支持了，比如：
- 背景图片(这一点很重要！)
- css浮动和定位(这个没啥用)
- 自定义列表项的图像(这个也没啥用)
- flash(反正不放)
- gif动画
- 图片的alt属性(值得注意)
- 表单(反正不放)
上面的信息都是08年上半年做的总结。随着互联网的发展，可能以上信息的正确性会有所改变，不过目前来说注意这些就够了。
比方说我写了一份外联远程css文件的html邮件。发往126跟tom的邮箱。126过滤掉了css。tom就没有。但是通过foxmail接收126这封邮件的时候，外联样式表又有了