前端常用特效功能

 /*隐藏*/
  overflow: hidden;

  vertical-align: middle;/*图片居中*/

 /*延迟*/
   transition: 0.6s;

/*动画*/
@keyframes myRotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(180deg);
    }
}
#last .rotate{
    animation: myRotate 1s;
}
//1秒内旋转180度

/*弹性盒子模型*/
div{
    /* 左浮 */
    display: flex;
    /* 左右平均 */
    justify-content: space-between;
}
//效果类float但不需要去除浮动

  /*图片透明度*/
    opacity: 0.8;
    /*延迟渐变*/
    transition: 0.5s;
    /*鼠标指针变小手*/
    cursor: pointer;

    /* 左浮 */
    display: flex;
    /* 左右均衡 */
    justify-content: space-between;
    /* 弹性换行，如果超过一行就换行 */
    flex-wrap: wrap;

   /*内部挤压元素定位*/
     padding:10px 16px ;
     padding-right: 20px;
     /*让外部盒子大小不大*/
     box-sizing: border-box;

/*投影，参数属性百度*/
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);

/*竖线*/
.nav-yule:after,.nav-video:after{
    content:"";
    display: block;/*变成块元素*/
    height: 20px;
    border-right: #e5e5ee 1px solid;
    float: right;
    margin-top:25px;
}

/*红色横线*/
#aa,#bb {
    display: block;/*变成块元素*/
    background: red;
    height: 3px;
    width: 100%;
    position: absolute;
    top:0px;
}

*点*/
.nav-child ul li:before{
    content: "";
    width: 2px;
    height: 2px;
    background: #fdd000;
    display:inline-block;/*变成块元素*/
    float: left;/*向左浮动*/
    margin-top: 9px;
    margin-right: 12px
}

/*第一行和第7行大写*/
.new-list ul li:first-child a,.new-list ul li:nth-child(7) a{
    font-size: 18px;
    font-weight: bolder;
}

/*圆角竖线*/
.yule-news-title::before{
    content:"";
    display: block;/*变快*/
    width: 4px;
    height: 14px;
    background: #fdd000;
    border-radius: 3px;/*变圆角*/
    float: left;
    margin-top: 4px;
    margin-right: 5px;
    
}

字体间距
letter-spacing: 2px;

背景变色
 .yuan{
            width: 60px;
            height:60px;
            background-color: #FFFFFF;
            border-radius: 50%;
            margin-left:8px;
            text-align: center;
            position: relative;
            font-size: 12px;
            margin-top: 5px;
            float: left;
			border: 1px;
            border-style: solid;
			border-color: rgba(255,255,255,0);
        }
        .yuan:hover{
            background-color: #0066FF;
            color:#FFFFFF;
            border: 1px;
            border-style: solid;

        }

表单聚焦判定

<table>
                        <tr>
                            <td class="right">
                                银行卡号码
                            </td>
                            <td colspan="2">
                                <input type="text" id="cardNum" maxlength="20" onblur="textValidate()" style="outline : none; border: 1px solid #A9A9A9;">
                                <span id="first" class="errorDiv"></span>
                            </td>
        
                        </tr>
</table>

/js模块***************************/
 function textValidate() {
                var cardNum = document.getElementById("cardNum");
                var first = document.getElementById("first");
                first.innerText = "";
                if (cardNum.value.length == 0) {
                    first.innerText = "请输入银行卡号！";
                    // cardNum.style.borderColor = "red";
                    cardNum.style.border = "1px solid red";
                    return false;
                }
                var rule = /\d{12,19}/;
                if (!rule.test(cardNum.value)) {
                    first.innerText = "请输入正确的卡号！";
                    cardNum.style.border = "1px solid red";
                    return false;
                }
    
                if(rule.test(cardNum.value)){
                    cardNum.style.border = "1px solid #A9A9A9";
                    return true;
                }
            }
            /css模块*********************************************/
            .errorDiv{
    color: red;
    font-size: 12px;
    
}

onfocus：事件在对象获得焦点时发生。

即当鼠标点击时，触发的事件，

onblur： 事件会在对象失去焦点时发生

即当鼠标点击另一处时所触发的事件

平铺
display: flex;
    flex-direction: row;
    flex-wrap: wrap;

加在父元素里能去清除子元素的浮动对后面元素的影响
overflow: hidden;

消除滚动跳出现页面左右影响

html{overflow-y:scroll;}