html+css选项卡

效果展示：
在这里插入图片描述
图片可以选择自己喜欢的，制作选项卡
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
      
        
            margin:0;
            padding:0;
            list-style: none;
        }
        .box{
      
      
            position: relative;
            margin: 0 auto;
            width:500px;
            height:500px;
            text-align: center;
            border:1px solid #0cc;
        }
        .box input{
      
      
            width: 30px;
            height: 30px;
        }
        /* 三个input展示为1行【块级元素】 */
        /* input下的div对.box（父级元素）进行绝对定位 */
        .box div{
      
      
            position: absolute;
            left:0;
            /* 留出input位置 */
            top:30px;
            width: 100%;
            height: 450px;
            /* 先选none，选中后的盒子为block */
            display: none;
            text-align: center;
        }
        input:checked + div{
      
      
            display: block;
        }
        .box img{
      
      
         
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- “name”设置是单选按钮的重要属性，因为它标识单选按钮属于哪个组。 -->
        <input type="radio" name="a"  checked>
        <div>a <img src="./img/a.jpg" center no-repeat></div>
        <input type="radio" name="a" >
        <div>b <img src="./img/b.jpg" center no-repeat></div>
        <input type="radio" name="a" >
        <div>c <img src="./img/c.jpg" center no-repeat></div>
    </div>
</body>

</html>
猜你喜欢
