11月29日：swiper和图标

瑞妖儿

于 2022-11-29 20:37:59 发布

阅读量337

点赞数

分类专栏： css 文章标签： css html css3 前端

本文链接：https://blog.csdn.net/qq_46111433/article/details/128104749

版权

本文主要探讨了前端开发中图标字体的使用，包括其优点和使用技巧。接着，介绍了CSS中的层级概念以及如何实现透明效果。在轮播图的实现上，文章分别讲解了基于定位和float的方法，并重点解析了使用Swiper库创建轮播图的详细步骤。

摘要由CSDN通过智能技术生成

一、图标字体

<!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>
    <!-- 引入线上版本  跟上面的线下版本引入一个就可以了-->
    <!-- <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3797640_42r1d8h61fk.css" /> -->
    <!-- 引入线下版本  下载下来，如果没有网也是可以生效的 -->
    <link rel="stylesheet" href="./font_3797640_f35uft3b4bi/iconfont.css">
    <style>
        i.ss{
          font-size: 50px;
          color: red;
        }
        i.ss:hover{
          color: hotpink;
        }
        span.s1{
          font-size: 50px;
          color: green;
        }
        .s2{
          font-size: 100px;
          color: indigo;
  
        }
        p::before{
          content: "\eacc";
          font-family: 'iconfont';
        }
      </style>
</head>
<body>
    <!-- 第一种方式  转义字符形式  &实体的名字;  
        注意：一定要加公有的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>

    <!--第三种方式 伪类 （了解）-->
    <p>葬便治未，文使谢你。</p>
</body>
</html>
<!--  
 图标字体（iconfont）
    网页中会有很多小的图片，例如，购物车，小箭头，定位等，
    这些内容可以直接用图片代替，但图片一般都是比较大的，而且修改起来也不方便
    所以可以直接使用图标字体，把它们就当成字体，可以用字体相关的样式，去修改
    图标字体，例如可以改变大小，颜色。

  图标字体在一些大的框架系统里，或者一些大的网站，很多大牛都已经归纳好，那我们
  直接使用即可，使用的方式方法大同小异。
    目前只要掌握一到两个网站即可
    阿里巴巴矢量图标库 https://www.iconfont.cn/

    使用图标库
      第一步：选择你需要的图标
      第二步：将你选中图标对应的css文件引入到你的html文件当中
            css文件可以线上版本，也可以下载下来，引入线下版本
      第三步：在结构中可以通过不同的使用方式，显示在页面中

 -->

二、层级

<!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>
    <!-- 
    知识点1：
        如果希望一个元素盖住另一个元素，那么我们可以提高元素的层