前端的小技巧

1、表格圆角不能用用的问题

border-collapse: separate;

//注:  border-collapse: collapse; 会和 border-radius冲突!!!!

 2、左右的小箭头

.l_bottom_74 .slideTxtBox3 .bd ul .js_d_time .js_table2 td.js_bg1 .js_link1:before{
    width: 0;
    height: 0;
    content: '';
    display: inline-block;
    border: 15px solid transparent;
    border-right: 15px solid rgba(0,0,0,0.3);
    position: absolute;
    left: 0%;
    top:50%;
    margin-left: -30px;
    -webkit-transform: translate(0%,-50%);
    -moz-transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
    transform: translate(0%,-50%);
}

:after        右箭头

:before     左箭头

 3、css3绝对定位的居中： 

{
position: absolute;
top: 50%; 
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

高度是百分比，文字如何居中

给父级添加 display:table;

给子级添加
display:table-cell;
vertical-align:middle;

select去掉默认样式

appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*剩下的背景可以自定义*/

去掉复选框默认样式

.c_table .table2 tr td .che1 input{
    float:left;
    width:18px;
    height:17px;
    border:0;
    outline:none;
    margin-right:5px;
    background:url(images/min_ico4.png) no-repeat;
    appearance: none;
    -o-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
.c_table .table2 tr td .che1 input:checked{
    background:url(images/min_ico3.png) no-repeat;
    border:0;
    outline:none;
}

input  placeholder   颜色

input::input-placeholder { color: #fff;}
input::-webkit-input-placeholder{ color: #fff;}
input:-moz-placeholder { color: #fff;}
input::-moz-placeholder { color: #fff;}
input::-ms-input-placeholder { color: #fff;}