javascript 学习笔记

第一天    浏览器兼容性

2016-7-2   20:44

一、全局css样式设置

1、清除所有标记的内外边距

*{
 margin:0px;
 poadding:0px;
}

2、去除项目符号或编号前面的符号

ul,ol,li{list-style:none;}

3、全局链接效果

a:link,a:visited{color:#444;text-decoration:none;}
a:hover{color:blue}

4、网页中所有文字大小颜色

body{
 font-size:12px;
 font-family:Arial,宋体;
 color:#333;
 background-color:white;
 text-align:center; //ie5.5下首页居中
}

5、去除图片的链接边框线

img{border:0;}

6、全局的类样式

例如：

.float_f{
 float:left;
}
.float_r{
 float:right;
}
//清除浮动
.clear{
 clear:both;  
}
//用于div之间的外边距  尽量不要用外边距  部分浏览器不兼容
.hei_both10{  
 height:10px;
 clear:both;
}
.red{
 color:red;
}
.c_333{
 color:#333;
}
.c_666{
 color:#666;
}
.c_999{
 color:#999;
}
.blue{
 color:blue;
}
.white{
 color:white;
}
.f_yh{
 font-family:'微软雅黑';
}
//隐藏
.none{
 display:none;  
}
//显示
.block{
 display:block;
}

//  例如:font-size:12px!important; 优先使用该css
//  ie5.5 首页居中 body{text-align:center;}

//居中
.m_auto{
 margin:0px auto;
}
.box{
 width:1200px;
 margin:0px auto;
 text-align:left;
}
 

7.单行文本上下居中

例如：

h1{
 height:30px;
 line-height:30px;
}

8.左右margin会加倍（ie6以下;float:left时 ）

//将块元素变行内元素
//例如：
.div{
 width:200px;
 margin:50px;
 float:left;
 display:inline;
}

 

9.css hack

针对不同浏览器，书写不同的css的过程，成为'CSS HACK' 。

这些符号实在css属性前面加的，用于分辨不同浏览器版本。

 (1) “ * ” IE6,IE7都识别，其他浏览器不识别  如.box{*background-color:red;}

 (2) “_” 只有IE6识别  例如.box{_background-color:red;}

 (3) 图片使用背景图

 (4) 当全局a设置后，如果后面想更改a标签状态信息。例如：a:hover{background:url(...)}

但是在部分浏览器中无效，这时要同时设置a:link{}  以及a:visited{}  那么a:hover{}才会生效

  

转载于:https://my.oschina.net/xiaojunx/blog/704649