css3

伪类选择器

伪类选择器，不用再使用js来控制奇偶不同了

tr:nth-child(even){
　　background-color: white;
}
tr:nth-child(odd){
　　background-color: yello;
}

此时用传统的hover将失效

tr:hover{
   background-color: blue;  
}

使用以下方式替代：

table tbody tr:nth-child(even):hover,
table tbody tr:nth-child(odd):hover{
    background-color: blue;

 }

 三角箭头

三角箭头，设置10px的border,左右都是透明的，上部是白色10px，因边框在角上是对角展示的，加上10px的margin-top就形成了下三角。

.arrow-down{ 
margin-top：10px; 
0;
height:0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fff;
}

 同样的左箭头：

    position: absolute;
    margin: 0px 10px 0px 0px;
     0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #e01818;

响应式设计：

页面添加适应设备：
<meta name="viewport" content="width=device-width,initial-scale=1.0">


/** 屏幕分辨率大小 **/
@media only screen and (max- 800px){
  .el-col-sm-6{ 25%;}
  .el-col-sm-8{ 33.33333%;}
  .el-col-sm-12{ 50%;}
}
@media only screen and (min- 800px) and (max- 1440px){
  .el-col-md-6{ 25%;}
  .el-col-md-8{ 33.33333%;}
  .el-col-md-12{ 50%;}
}
@media only screen and (min- 1440px){
  .el-col-lg-6{ 25%;}
  .el-col-lg-8{ 33.33333%;}
  .el-col-lg-12{ 50%;}
}