/*隐藏*/
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;}