<!-- 设置多少秒后重新加载页面到链接指定处 -->

    <meta http-equiv="refresh" content="1;url=http://yuanqiao.comxa.com/">

<!-- 让其以本机最新的内核渲染 -->

    <meta name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<marquee direction=up behavior=scroll loop=3 scrollamount=1 scrolldelay=10 align=top bgcolor=#ffffff height=300 width=30% hspace=20 vspace=10 onmouseover=this.stop() onmouseout=this.start()> 此处输入滚动内容 </marquee>

现在让我们来具体分析一下

◎ direction表示滚动的方向，值可以是left，right，up，down，默认为left

◎ behavior表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚动）

◎ loop表示循环的次数，值是正整数，默认为无限循环

◎ scrollamount表示运动速度，值是正整数，默认为6

◎ scrolldelay表示停顿时间，值是正整数，默认为0，单位似乎是毫秒

◎ align表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle

◎ bgcolor表示运动区域的背景色，值是16进制的RGB颜色，默认为白色

◎ height、width表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100%     height为标签内元素的高度

◎ hspace、vspace表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。

◎ onmouseover=this.stop() onmouseout=this.start()表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

<!-- 在head里面添加，可以让所有a链接在新窗口打开 -->

    <base target="_blank" />

<!-- 若某个a标签不想跳转页面，可以这样写 -->

    <a href="#" target="_self"></a>

<!-- 用这个套组合调节火狐，IE8、IE7、IE6很有效果 -->

height:10px;height:20px\9;*height:30px;_height:40px;



<!-- 设置半透明时要这样写css代码以提高兼容性： -->

div{filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;}



<!-- 既不让换行又不让超出外层div的最佳实践， -->

<!-- 1、不用省略号 -->

    a{

        overflow: hidden;

        height: 30px;

        width:80px;

        line-height: 30px;

        display: inline-block;

      }

<!-- 2、使用省略号 -->

    a{

        overflow: hidden;

        text-overflow:ellipsis;

        width:80px;

        white-space: nowrap;

        display: inline-block;

      }



<!-- 透明度 -->

filter: alpha(Opacity=80);

-moz-opacity: 0.8;

-khtml-opacity: 0.8;

opacity: 0.8;



<!-- 可以让文字能选中复制 -->

-webkit-user-select: auto;

-moz-user-select: auto;

user-select: auto



<!-- css圆角： -->

width: 100px;

height: 100px;

background: red;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;



<!-- css阴影 -->

#div1 { width:100px; height:100px; background:#FFC; border-radius:20px; box-shadow:10px 20px 5px #ccc; }

.shadow-style{

  -moz-box-shadow:3px 3px 12px rgba(0,0,0,.7);

  -webkit-box-shadow:3px 3px 12px rgba(0,0,0,.7);

  box-shadow:3px 3px 12px rgba(0,0,0,.7);

}



<!-- CSS实现DIV层背景颜色渐变 -->

.change{

  width:100%;

  height:600px;

  FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=red,endColorStr=#f6f6f8); /*IE*/

  background:-moz-linear-gradient(top,#f8c4cb,#f6f6f8);/*火狐*/

  background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/

}

#div1 {

  width:200px; height:200px; border:1px solid #333;

  background:-moz-linear-gradient(top, #FFFFFF, #f8f8f8);

  background:-webkit-linear-gradient(top, #FFFFFF, #f8f8f8);

  background:-ms-linear-gradient(top, #FFFFFF, #f8f8f8);

  background:linear-gradient(top, #FFFFFF, #f8f8f8);

  -ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#f8f8f8)";

  +background:#f9f9f9;

}



<!-- 需要固定位置定位时： -->

position:fixed; 相对于浏览器窗口绝对定位。

_position:absolute; 只有IE6能识别, IE6不支持fixed, 所以针对IE6使用absolute绝对定



<!-- 关于固定定位ie6不支持的兼容做法 -->

.div1{

  position: fixed;

  top:100px;

  _position: absolute;

  _top: 100px;

  _top: expression(eval(document.documentElement.scrollTop+ (parseInt(this.currentStyle.marginTop, 10)||100)));

  background: blue;

  height:100px;

  width:100px;

}



<!-- 使用slick时使用这个属性可以让选不中的文字可以选中（放到外层css里面）： -->

-webkit-user-select: auto;

-moz-user-select: auto;

user-select: auto;



<!-- 使用最小高度兼容代码 -->

.box2{*height:auto !important;*height:150px; min-height: 150px;}



<!-- 找出第几个或者第几个的倍数的li: -->

ul.menu li:nth-child(2n)

<!-- ie下要写成这样 -->

ul.menu>li + li + li



<!-- ie的条件判断语句 -->

<!-- NOT运算符。这是摆立即在前面的功能，操作员，或子表达式扭转布尔表达式的意义。 -->

[if !IE]

<!-- 小于运算符。如果第一个参数小于第二个参数，则返回true。 -->

[if lt IE 5.5]

<!-- 小于或等于运算。如果第一个参数是小于或等于第二个参数，则返回true。 -->

[if lte IE 6]

<!-- 大于运算符。如果第一个参数大于第二个参数，则返回true。 -->

[if gt IE 5]

<!-- 大于或等于运算。如果第一个参数是大于或等于第二个参数，则返回true。 -->

[if gte IE 7]

<!-- 子表达式运营商。在与布尔运算符用于创建更复杂的表达式。 -->

[if !(IE 7)]

<!-- AND运算符。如果所有的子表达式计算结果为true，返回true -->

[if (gt IE 5)&(lt IE 7)]

<!-- OR运算符。返回true，如果子表达式计算结果为true。 -->

| [if (IE 6)|(IE 7)]



css兼容性总结：

1、写文本时一定要设行高

2、简单页面制作时尽量使用first-child,避免使用last-child(ie8不兼容)

    解决方案：可以引入一个js插件，便可支持css大多数属性

3、盒模型（ie7不兼容）

   解决方案：多使用一层div外层div设padding/border/margin内层设宽高。

4、尽量避免使用inline-block(ie7不兼容)

5、html页面要引入DOCTYPE

6、使用table时兼容ie7上下留白bug解决方案

    td img{float:left;}

7、在ie6、ie7中不兼容css的 z-index

   可以给需要设置z-index元素的父元素设置z-index值 (父强则子强)

   通常使用为：给其父元素都设置relative,然后给每个父元素设置不同的z-index即可实现

8、关于ie不支持hover父元素显示子元素的问题或背景不支持透明

    可以给父元素添加宽高背景background:url(http://placehold.it/0x0);即可实现

9、引入外部css或js文件时通常后面加上参数（日期或版本号）,

   这样以后改版时同时改变参数即可达到清除浏览器缓存问题，避免样式混乱

   例如:<link rel="stylesheet" href="style.css?v=20140103">

10、IE6-7下浮动元素margin-bottom值失效的问题 所以建议用padding

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="renderer" content="webkit">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <title>Document</title>

  <link rel="stylesheet" href="http://cdn.bootcss.com/normalize/3.0.2/normalize.min.css" />

  <link rel="stylesheet" href="css/reset.css">

  <link rel="stylesheet" href="css/slick.css">

  <link rel="stylesheet" href="css/style.css">

  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" async="async"></script>

  <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>

  <script src="js/slick.js" async="async"></script>

  <!-- 让浏览器兼容css3的部分代码 -->

  <!--[if lt IE 9]>

    <script src="http://www.91jmw.com/styles/js/polyfills/selectivizr-min.js"></script>

  <![endif]-->

  <!-- 兼容ie8以下的盒模型 -->

  <!--[if lt IE 8]>

    <style>

      *{*behavior: url(css/boxsizing.htc);}

    </style>

  <![endif]-->

</head>

<body>

  <script src="js/script.js" defer="defer"></script>

</body>

</html>