1. css做表单的验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.inputVal{
height: 32px;
line-height: 32px;
outline: none;
border-radius: 5px;
border: 2px solid #eeeeee;
padding-left: 10px;
}
.inputVal:invalid{
border: 2px solid red;
}
.inputVal:valid {
border: 2px solid cyan;
}
.inputVal:invalid+ span::after {
content: '×';
}
.inputVal:valid + span::after {
content: '√';
}
</style>
</head>
<body>
<input class="inputVal" type="email"><span></span>
</body>
</html>
验证失败
验证通过
随笔记录:
获取url中的hash值 location.hash
行内元素span, 不可以设置高度,但是可设置line-height
我们可以基于transform改变样式的尽量不要使用传统的样式属性, 因为transform开启了浏览器的硬件加速功能,性能会更好些
网友评论