用css做轮播图

香香爱编程

于 2023-10-24 16:14:57 发布

阅读量71

点赞数

本文链接：https://blog.csdn.net/2302_79245293/article/details/134014981

版权

本文介绍了如何使用CSS和HTML创建一个简单的轮播图效果，通过input框和label的配合，当用户点击label时，对应的div内容会显示出来，利用了CSS的选择器和`:checked`伪类来控制div的透明度。

摘要由CSDN通过智能技术生成

用css做轮播图

点击出现内容

样式：

 <style>
      * {
        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;
      }
    </style>

盒子：用input框与label相联系（label作用是：当用户点击<label>标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上

< label> 标签的 for 属性应当与相关元素的 id 属性相同。

<body>
    <ul>
      <li>
        <input type="radio" id="content1" checked name="inp1" />
        <label for="content1">选项一</label>
        <div>选项一的内容</div>
      </li>
      <li>
        <input type="radio" id="content2" name="inp1" />
        <label for="content2">选项二</label>
        <div>选项二的内容</div>
      </li>
      <li>
        <input type="radio" id="content3" name="inp1" />
        <label for="content3">选项三</label>
        <div>选项三的内容</div>
      </li>
    </ul>
  </body>