label都有哪些作用？并举相应的例子说明
- 表示用户界面某个元素的说明
- 增加命中区域，屏幕阅读可以读出标签，使用辅助技术用户更加容易理解输入哪些数据
- 利用label"模拟"button来解决不同浏览器原生button样式不同的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" id="btn" />
<label for="btn">Button</label>
</body>
<style>
input[type='button'] {
display: none;
}
label {
display: inline-block;
padding: 10px 20px;
background: #456;
color: #fff;
cursor: pointer;
box-shadow: 2px 2px 4px 0 rgba(0,0,0,.3);
border-radius: 2px;
}
</style>
</html>
- 结合checkbox、radio表单元素实现纯CSS状态切换，这样的实例就太多了。比如控制CSS动画播放和停止。下面是一部分代码
<input type="checkbox" id="controller">
<label class="icon" for="controller">
<div class="play"></div>
<div class="pause"></div>
</label>
<div class="animation"></div>
<style>
...
#controller:checked ~ .animation {
animation-play-state: paused;
}
...
</style>
用css创建一个三角形，并简述原理
- border 的认识，我们一般设置border: 2px solid orange;让我们误以为border是一个边框，其实当我们把宽度和告诉设置为0，border设置为数值的时候，我们发现border其实是由4个三角形组成的,因此我们想要哪个三角形，我们就宽度和高度设置为0,设置相应的边框就可以了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class='rect'></div>
</body>
<style>
.rect {
width: 0;
height: 0;
background-color: #fff;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-top: 100px solid rgb(29, 156, 194);
border-bottom: 100px solid transparent
}
</style>
</html>
image.png
写一个去除制表符和换行符的方法
<script>
function getData(target){
return target.replace(/\t|\n|\r/g,"")
}
</script>
网友评论