轮播图的三种写法

最新推荐文章于 2023-04-30 10:56:20 发布

呆码王子

最新推荐文章于 2023-04-30 10:56:20 发布

阅读量85

点赞数 1

分类专栏： HTML 文章标签：前端 html css Powered by 金山文档

本文链接：https://blog.csdn.net/L123456llljdjdbd/article/details/129429700

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

css锚点实现tab栏切换

<!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>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
        text-decoration: none;
      }
      .box {
        width: 500px;
        height: 500px;
        background-color: #bfa;
        margin: 0 auto;
      }
      .title{
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: blue;
      }
      .title>a{
        color: #fff;
        display: inline-block;
        width: 80px;
        height: 50px;
        background-color: #ccc;
        text-align: center;
      }
      .title>a:hover{
        background-color: #999;
      }
      .content{
        height: 450px;
        width: 100%;
        background-color: pink;
        overflow: hidden;
      }
      .content>div{
        width: 100%;
        height: 100%;
        font-size: 50px;
        line-height: 450px;
        text-align: center;
      }

    </style>
  </head>
  <body>
    <div class="box">
      <div class="title">
        <a href="#box1">页面1</a>
        <a href="#box2">页面2</a>
        <a href="#box3">页面3</a>
      </div>
      <div class="content">
        <div id="box1">box1</div>
        <div id="box2">box2</div>
        <div id="box3">box3</div>
      </div>
    </div>
  </body>
</html>

target实现tab栏切换

target选择器称为目标选择器，

用来匹配文档(页面)的url的某个标志符的目标元素

<!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>
      *{
        padding: 0;
        margin: 0;
        text-decoration: none;
        list-style: none;
      }
      ul{
        width: 400px;
        height: 400px;
        background-color: pink;
        margin: 50px auto;
        position: relative;
      }
      li a{
        float: left;
        width: 30%;
        height: 40px;
        line-height: 40px;
        border: 1px solid black;
      }
      li>.content{
        width: 100%;
        height: 360px;
        background-color: brown;
        position: absolute;
        top: 41px;
        font-size: 50px;
        color: #fff;
        line-height: 360px;
        text-align: center;
        visibility: hidden;
      }
      #content1:target{
        visibility: visible;
      }
      #content2:target{
        visibility: visible;
      }
      #content3:target{
        visibility: visible;
      }
    </style>
  </head>
  <body>
    <!-- 
① 每个a标签的href属性须与其兄弟节点.content元素的id值一致
② .content元素与a标签的顺序不能更改，否则选不中a -->
    <ul>
      <li>
        <a href="#content1">选项一</a>
        <div class="content" id="content1">选项一内容</div>
      </li>
      <li>
        <a href="#content2">选项二</a>
        <div class="content" id="content2">选项二内容</div>
      </li>
      <li>
        <a href="#content3">选项三</a>
        <div class="content" id="content3">选项三内容</div>
      </li>
    </ul>
  </body>
</html>

lable实现tab栏切换

<label>标签的作用是为鼠标用户改进了可用性，

当用户点击<label>标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；

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

<!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>
      * {
        padding: 0;
        margin: 0;
        text-decoration: none;
        list-style: none;
      }
      ul {
        width: 400px;
        height: 400px;
        margin: 0 auto;
        background-color: pink;
        position: relative;
      }
      input {
        display: none;
      }
      label {
        float: left;
        width: 100px;
        height: 40px;
        border: 1px solid red;
      }
      .box1 {
        position: absolute;
        width: 100%;
        height: 358px;
        background-color: #bfa;
        top: 41px;
        font-size: 50px;
        text-align: center;
        line-height: 358px;
        color: #fff;
        visibility: hidden;
      }
      input:checked ~ .box1 {
        visibility: visible;
      }
    </style>
  </head>
  <body>
    <ul>      
      <li>
        <input type="radio" name="tab" id="tab1" checked />
        <label for="tab1">选项一</label>
        <div class="box1">选项一内容</div>
      </li>
      <li>
        <input type="radio" name="tab" id="tab2" />
        <label for="tab2">选项二</label>
        <div class="box1">选项二内容</div>
      </li>
      <li>
        <input type="radio" name="tab" id="tab3" />
        <label for="tab3">选项三</label>
        <div class="box1">选项三内容</div>
      </li>
    </ul>
  </body>
</html>

呆码王子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图的三种写法

当用户点击标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；< label> 标签的 for 属性应当与相关元素的 id 属性相同。用来匹配文档(页面)的url的某个标志符的目标元素。标签的作用是为鼠标用户改进了可用性，
复制链接

扫一扫