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; 
width: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;
    width: ;
    height: ;
    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-width: 800px){
  .el-col-sm-{width: %;}
  .el-col-sm-{width: 33.33333%;}
  .el-col-sm-{width: %;}
}
@media only screen and (min-width: 800px) and (max-width: 1440px){
  .el-col-md-{width: %;}
  .el-col-md-{width: 33.33333%;}
  .el-col-md-{width: %;}
}
@media only screen and (min-width: 1440px){
  .el-col-lg-{width: %;}
  .el-col-lg-{width: 33.33333%;}
  .el-col-lg-{width: %;}
}