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: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #e01818;

响应式设计：

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


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

 

转载于:https://www.cnblogs.com/DennyZhao/p/9593557.html