平时遇到的一些可能会有帮助的东西,不定期整理。
1、CSS Hack
!important
#content {
height:960px !important;
height:900px;
}
该代码IE6不识别提升优先级的!important指令,所以IE6下读的是height:900px;这个属性。
*
#content {
height:960px;
*height:900px;
}
该代码IE6/IE7能识别属性前面加星号的元素,按照后面的优先级高于前面的,所以IE6和IE7读的是height:900px;这个属性。
2、提升用户体验
如果网页有华丽的图片背景,为了避免加载时从默认背景直接到图片背景出现的突兀感,按照背景加载顺序,先在html下给一个单像素重复的和图片相近的单色背景,这样先加载html背景,再加载body背景,最终背景的出现有过度,体验比较好。
3、img引入时设置宽高,避免将来图片变化样式不统一。
4、类和id命名规则(非原创。这是以前在博客里看到的,当时写在纸上了,现在找不到原博客了。)
[模块前缀]_类型_(作用|状态)n_[位置]n
说明:(必选)、[可选]、后面的n指可能有n个。
模块前缀:模块定义使用的前缀。
例:弹出pop;公共global、gb;标题title、tit;提示hint;菜单menu;信息info;预览pvw;导航nav。
类型:定义类的内容类型,如输入框、文本、段落等。
例:按钮btn;文本tx;段落p;图标icon;颜色color、c;背景bg。
作用:定义类的作用,对于类的补充。
例:设置set;添加add;删除del;操作op;密码pw;导入inc。
状态:定义类的状态,对于类的补充。
例:成功suc;失败lost;透明tran。
位置:定位类所使用的位置,如导航、首页等等,尽量避免左、右这样的词。
例:内容cont;导航nav等。