1.利用input制作开关
<input type=”checkbox” name=”hobby”>吃饭
<input type=”checkbox” name=”hobby”>睡觉
<input type=”checkbox” name=”hobby”>打豆豆
以上是常用的input复选框用法。
我们可以利用复选框点击—选中，再点击-不选中的特点制作开关。
开关效果，里面不仅有效果图，也有代码，左上角的html和css可以点击查看喔！！！！
2.利用input制作轮播图
<input type=”radio” name=”gender”>男
<input type=”radio” name=”gender”>女
以上是常用的input单选框用法。
我们可以利用单选框只能选中其中一个制作轮播图。
轮播图效果
由于代码比较长，就粘贴下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
input{
display: none;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 500px;
height: 500px;
margin: 0 auto;
border:5px solid black;
/*超出部分隐藏*/
overflow: hidden;
position: relative;
text-align: center;
}
.list{
/*让ul横着排放超出box*/
width: 400%;
/*利用position：absolute不占位*/
position: absolute;
/*过渡执行时间为1s*/
transition:1s;
}
.list li{
float:left;
width: 500px;
height: 500px;
}
label{
width: 10px;
height: 10px;
border-radius: 50%;
border: 5px solid white;
position: absolute;
bottom:40px;
z-index: 2;
}
/*设置每个圆圈的位置*/
label:nth-of-type(1){
left:180px;
}
label:nth-of-type(2){
left:220px;
}
label:nth-of-type(3){
left:260px;
}
label:nth-of-type(4){
left:300px;
}
input:checked+label{
background:black;
}
/*选中移动ul*/
input:nth-of-type(1):checked~ul{
left:0;
}
input:nth-of-type(2):checked~ul{
left:-100%;
}
input:nth-of-type(3):checked~ul{
left:-200%;
}
input:nth-of-type(4):checked~ul{
left:-300%;
}
</style>
</head>
<body>
<div id="box">
<input checked type="radio" name="pic" id="one">
<label for="one"></label>
<input type="radio" name="pic" id="two">
<label for="two"></label>
<input type="radio" name="pic" id="three">
<label for="three"></label>
<input type="radio" name="pic" id="four">
<label for="four"></label>
<ul class="list">
<li style="background: red;"></li>
<li style="background: blue;"></li>
<li style="background: yellow;"></li>
<li style="background: brown"></li>
</ul>
</div>
</body>
</html>