图标字体、层级、轮播图

图标字体（iconfont）

    网页中会有很多小的图片，例如，购物车，小箭头，定位等，
    这些内容可以直接用图片代替，但图片一般都是比较大的，而且修改起来也不方便
    所以可以直接使用图标字体，把它们就当成字体，可以用字体相关的样式，去修改
    图标字体，例如可以改变大小，颜色。

  图标字体在一些大的框架系统里，或者一些大的网站，很多大牛都已经归纳好，那我们
  直接使用即可，使用的方式方法大同小异。
     使用图标库
      第一步：选择你需要的图标
      第二步：将你选中图标对应的css文件引入到你的html文件当中
            css文件可以线上版本，也可以下载下来，引入线下版本
      第三步：在结构中可以通过不同的使用方式，显示在页面中

 <!-- 引入线上版本  跟上面的线下版本引入一个就可以了-->
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3798616_spb5avfsmj.css" />
    <!-- 引入线下版本  下载下来，如果没有网也是可以生效的 -->
    <link rel="stylesheet" href="./font_3797640_f35uft3b4bi/iconfont.css">


<!-- 第一种方式  转义字符形式  &实体的名字;  
        注意：一定要加公有的iconfont类名
    -->
    <i class="iconfont ss">&#xe6bc;</i>
    <span class="iconfont s1">&#xe601;</span>

    <!-- 第二种方式  类名形式 （常用）-->
     <i class="iconfont icon-shangjiantou s2"></i>
     <i class="iconfont icon-24gf-cartFull7 ss"></i>

层级

如果希望一个元素盖住另一个元素，那么我们就可以提高元素的层级
使用z-index样式，样式值：是一个正整数，值越大，层级越高，越能够显示在最上面
注意点：
    1、z-index，默认值是0
    2、z-index的使用前提是必须开启定位
    3、父元素的层级再高，也不会盖住子元素
知识点2:opacity  设置元素的透明度
          样式值：0-1之间，0是透明，1是不透明
       rgba也可以设置透明度
       transparent 可以设置透明效果

轮播图

 <!--swiper官网：
     https://www.swiper.com.cn/index.html -->
    <!-- 第一步 1引入swiper里面的css文件 -->
    <link rel="stylesheet" href="./swiper/swiper-bundle.css" />
    <style>
      /* 第三步：修改轮播图swiper的大小  （可选） */

如果要更改轮播图的样式，
          第一种方式可以直接选中对应的类名，进行修改
          第二种方式：直接css文件修改

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

<!-- 第一步 1引入swiper里面的css文件 -->
    <link rel="stylesheet" href="./swiper/swiper-bundle.css" />
    <style>
      /* 第三步：修改轮播图swiper的大小  （可选） */
      .swiper {
        width: 590px;
        height: 480px;
        margin: 50px auto;
      }
      /*  
        如果要更改轮播图的样式，
          第一种方式可以直接选中对应的类名，进行修改
          第二种方式：直接css文件修改（不推荐使用）
       */