图标字体和轮播图相关知识点

目录

一、图标字体

二、层级

三、透明效果

四、轮播图写法


一、图标字体

图标字体(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>
    <!-- 引入线上版本  跟上面的线下版本引入一个就可以了-->
    <!-- <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)
    网页中会有很多小的图片,例如,购物车,小箭头,定位等,
    这些内容可以直接用图片代替,但图片一般都是比较大的,而且修改起来也不方便
    所以可以直接使用图标字体,把它们就当成字体,可以用字体相关的样式,去修改
    图标字体,例如可以改变大小,颜色。

  图标字
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值