WEB设计笔记2

设计四要素:亲密性、对齐、重复、对比

色轮的对角为互补色

单色又叫色调

hgroup 标题分组

使用HTML5需要用CSS和JS语句解决兼容性

placeholder:表单显示输入提示

属性选择器:*包含、^开头、$结尾

指定子元素序号:nth-child和nth-last-child

使用border-radius添加圆角

使用border-image添加图片边框

使用* html解决针对IE6或更早版本的兼容性问题

属性选择符:[];子对象选择符:>;相邻选择符:+

overflow:auto解决背景无法撑开

_开头只有IE6能识别

解决高度自适应:overflow:hidden; zoom:1

使用clearfix撑开页面

区块不可使用height属性

以父元素为起始点设置position,父元素也需设置position值

IE6捉迷藏BUG使用position:relative或line-height:1.2解决

li加float后底部有空:a也加上float即可解决

img图片元素下多余空白BUG:img设为块级元素;float:left;垂直对齐

用id代替name做页内链接

无法设置边界时使用display:block

解决冲突可以用id代替important,兼容性更好

如果对象掉下去可以试着设置宽度

使用zoom:1触发ie的hasLayout属性

行内元素使用text-align居中,块级元素使用margin:auto居中

 

WEB设计工具:

JavaScript美化工具 jsbeautifiero

HTML5及CSS3特性支持检测:Modernizr

 

HACK总结:

#test{

color:red;

color:red !important;/ Firefox、IE7支持 */

_color:red; / IE6支持 */

*color:red; / IE6、IE7支持 */

color:red\9; / IE6、IE7、IE8支持 */

color:red\0; / IE8支持 */

}

*html #test /IE6支持 */

*+ html #test /IE7支持*/


发表评论

电子邮件地址不会被公开。 必填项已用*标注