label实现轮播点击图效果

1、先了解label与input的联系

    用户名： 密码：


    
    用户名
    

标签的作用是为鼠标用户改进了可用性，
当用户点击标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；
< label> 标签的 for 属性应当与相关元素的 id 属性相同。

2、实现效果

先看结构html

    

      
      选项一
      
选项一的内容
    
    

      
      选项二
      
选项二的内容
    
    

      
      选项三
      
选项三的内容
    
  

 再看样式

 * {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    ul {
      width: 400px;
      height: 300px;
      border: 10px solid red;
      margin: 50px auto;
      position: relative;
    }

    ul label {
      float: left;
      width: 100px;
      height: 40px;
      border: 1px solid black;
    }

    ul input {
      display: none;
    }

    ul div {
      width: 100%;
      height: 260px;
      background-color: pink;
      position: absolute;
      top: 40px;
      opacity: 0;
    }

    input:checked~div {
      opacity: 1;
    }