HTML中的图标及轮播图的做法-CSDN博客

本文链接：https://blog.csdn.net/qq_47849733/article/details/128104805

图标

第一种方式转义字符形式 &实体的名字;

注意：一定要加公有的iconfont类名

<i class="iconfont ss">&#xe8d6;</i>
    <span class="iconfont s1">&#xe601;</span>

第二种方式类名形式（常用）

<i class="iconfont icon-shangjiantou s2"></i>
     <i class="iconfont icon-24gf-cartFull7 ss"></i>

图标字体（iconfont）

网页中会有很多小的图片，例如，购物车，小箭头，定位等，

这些内容可以直接用图片代替，但图片一般都是比较大的，而且修改起来也不方便

所以可以直接使用图标字体，把它们就当成字体，可以用字体相关的样式，去修改

图标字体，例如可以改变大小，颜色。

图标字体在一些大的框架系统里，或者一些大的网站，很多大牛都已经归纳好，那我们

直接使用即可，使用的方式方法大同小异。

目前只要掌握一到两个网站即可

阿里巴巴矢量图标库 https://www.iconfont.cn/

使用图标库

第一步：选择你需要的图标

第二步：将你选中图标对应的css文件引入到你的html文件当中

css文件可以线上版本，也可以下载下来，引入线下版本

第三步：在结构中可以通过不同的使用方式，显示在页面中

层级

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不具有继承

轮播图

手写轮播图两种写法（结合js）

1、float

2、定位方法

3、 swiper插件一种写法

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