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