层级和轮播图

最新推荐文章于 2024-06-04 15:25:01 发布

嘿！真的。

最新推荐文章于 2024-06-04 15:25:01 发布

阅读量144

点赞数

文章标签： css html 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_59207203/article/details/129428442

版权

一、层级

设置层级

z-index:;样式名设置，样式值是正整数

默认是0

注意：

1、设置层级前提是元素必须开启定位

2、父元素的层级再高也不会盖住子元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>

    <style type="text/css">
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .box2 {
        width: 200px;
        height: 200px;
        /* 设置透明度 */
        /* background-color: rgba(255, 255, 0,0); */
        background-color: yellow;
        /* 
        设置透明度
        opacity: ;，样式值：0-1之间，0表示透明，1表示不透明
        */
        /* opacity: 0; */
        position: relative;
        left: 100px;
        bottom: 100px;
        /* 设置层级 
         z-index:;样式名设置，样式值是正整数
            默认是0
         注意：
           1、设置层级前提是元素必须开启定位
           2、父元素的层级再高也不会盖住子元素
        */
        z-index: 99;
      }
      .box3 {
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
        position: relative;
        left: 200px;
        top: -200px;
        z-index: 2;
      }

      .box4 {
        width: 200px;
        height: 200px;
        background-color: orange;
        position: relative;
        z-index: 999;
      }

      .box5 {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: relative;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>

    <!-- <div class="box4">
      4
      <div class="box5">5</div>
    </div> -->
  </body>
</html>

二、透明效果

opacity、transparent、rgba(r,g,b,a)设置透明，几者的区别是什么

1、属性、属性值

opacity是样式名，transparent、rgba(r,g,b,a)是设置样式值

2、设置范围

opacity相对于给元素整体蒙上一层玻璃

transparent、rgba(r,g,b,a)必须跟在特定的样式名后，例如

背景色，边框色

3、继承问题

opacity是通过样式进行设置的，所以有一定的继承性

transparent、rgba(r,g,b,a)没有继承的，给谁设置，谁会生效

<!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>
    <!-- 面试题：
        opacity、transparent、rgba(r,g,b,a)设置透明，几者的区别是什么
        1、属性、属性值
        opacity是样式名，transparent、rgba(r,g,b,a)是设置样式值
        2、设置范围
         opacity相对于给元素整体蒙上一层玻璃
         transparent、rgba(r,g,b,a)必须跟在特定的样式名后，例如
           背景色，边框色
        3、继承问题
        opacity是通过样式进行设置的，所以有一定的继承性
        transparent、rgba(r,g,b,a)没有继承的，给谁设置，谁会生效
-->
    <style>
      .box1 {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        /* background-color: transparent; */
        /* background-color: rgba(255, 0, 0, 0); */
        opacity: 0;
      }
      p{
        height: 50px;
      }
    </style>
  </head>
  <body>
    <!-- <div class="box1"></div> -->
    <!-- 用opacity设置透明度 -->
    <p style="background-color: red; opacity: 0.5">
      这是一个p标签，颜色red，opacity值为0.6
      <span style="background-color: green"> 这是一个span标签，颜色green，opacity未设置 </span>
    </p>
    <!-- 用rgba设置透明度 -->
    <p style="background-color: rgba(255, 0, 0, 0.5)">
      3）这是一个p标签，颜色red，透明度为0.5
      <span style="background-color: green">（这是一个span标签，颜色green，透明度未设置）</span>
    </p>
  </body>
</html>

三、轮播图

<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>

四、用插件做轮播图

<!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>
    <!-- 第一步：准备好swiper的js、css文件
        第二步：在html文件中引入对应的js、css
    -->
    <link rel="stylesheet" href="./swiper/swiper-bundle.css" />
    <style>
      .swiper {
        width: 600px;
        height: 500px;
        margin: 0 auto;
      }
      img {
        width: 100%;
        height: 100%;
      }
      .swiper-button-prev{
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 
     swiper插件  轮播图（会引用，会修改即可）
    -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./img/1.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="./img/2.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="./img/3.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="./img/4.jpg" alt="" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    <!-- 引入js -->
    <script src="./swiper/swiper-bundle.js"></script>
    <script>
      var mySwiper = new Swiper(".swiper", {
        // direction: "horizontal", // 水平切换选项
        loop: true, // 循环模式选项
        // autoplay:true,//设置自动播放
        autoplay: {
          delay: 1000, //设置自动切换的时间
        },
        effect: "cube",
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>
</html>