笔记整理

平时遇到的一些可能会有帮助的东西,不定期整理。

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等。

posted @ 2014-11-21 11:21  明日日明日  阅读(112)  评论(0编辑  收藏  举报