学习分享(10)
发布日期:2024-02-05 23:46:28 浏览次数:5 分类:技术文章

本文共 1964 字,大约阅读时间需要 6 分钟。

知识点1:z-index

如果希望一个元素盖住另一个元素,那么我们就可以提高元素的层级

使用z-index样式,样式值:是一个正整数,值越大,层级越高,越能够显示在最上面

注意点:

    1、z-index,默认值是0

    2、z-index的使用前提是必须开启定位

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

知识点2:opacity  设置元素的透明度

          样式值:0-1之间,0是透明,1是不透明

       rgba也可以设置透明度

       transparent 可以设置透明效果

      

    1、  opacity是样式名,通过样式值的不同设置透明效果

  rgba、transparent是样式值,必须跟在特定的样式名后,才可以设置透明效果

  2、opacity可以给任何元素设置透明效果,就像在元素前面加一个模糊镜子一样

  rgba、transparent只能给背景色,颜色等特定的元素设定

  3、opacity具有继承性,rgba、transparent不具有继承

    -->

<!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官网:

     https://www.swiper.com.cn/index.html -->

    <!-- 第一步 1引入swiper里面的css文件 -->

    <link rel="stylesheet" href="./swiper/swiper-bundle.css" />

    <style>

      /* 第三步:修改轮播图swiper的大小  (可选) */

      .swiper {

        width: 590px;

        height: 480px;

        margin: 50px auto;

      }

      /*  

        如果要更改轮播图的样式,

          第一种方式可以直接选中对应的类名,进行修改

          第二种方式:直接css文件修改(不推荐使用)

       */

      .swiper-pagination-bullet{

        background-color: turquoise;

        width: 20px;

        height: 20px;

      }

    </style>

  </head>

  <body>

    <!-- 第二步:写html的结构 -->

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

      <!-- 如果需要分页器  小圆点  -->

      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮  上一张  下一张 -->

      <div class="swiper-button-prev"></div>

      <div class="swiper-button-next"></div>

    </div>

    <!-- 第一步 2引入对应的js文件 -->

    <script src="./swiper/swiper-bundle.js"></script>

    <!-- 第四步:初始化swiper -->

    <script>

      var mySwiper = new Swiper(".swiper", {

        // autoplay: {//设置自动切换,可以更改切换时间

          // delay: 2000,

        // },

        loop: true, // 循环模式选项

        effect: 'cards',//设置切换的方式

        // 如果需要分页器

        pagination: {

          el: ".swiper-pagination",

          clickable :true,//设置小圆点点击切换图片

        },

        // 如果需要前进后退按钮

        navigation: {

          nextEl: ".swiper-button-next",

          prevEl: ".swiper-button-prev",

        },

      });

    </script>

  </body>

</html>

转载地址:https://blog.csdn.net/qq_18219159/article/details/128106209 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:学习分享(11)
下一篇:学习分享之旅启程!

发表评论

最新留言

很好
[***.229.124.182]2024年02月29日 08时17分17秒