CSS深入学习一——平面转换

Lotus_fragrance

已于 2022-05-04 09:42:13 修改

阅读量562

点赞数

文章标签：学习前端 html css

于 2022-05-02 22:16:58 首次发布

本文链接：https://blog.csdn.net/Lotus_fragrance/article/details/124537211

版权

本文详细介绍了CSS中的平面转换，包括位移、旋转、缩放和渐变，提供了丰富的代码演示和案例分析，帮助读者深入理解并掌握这些技术在实际项目中的应用。

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

#博学谷IT学习技术支持#

字体图标

1.下载字体包

下载地址：

Iconfont：https://www.iconfont.cn/

步骤：

下载解压后是这些文件：

2.引入字体图标

引入图标样式表：

调用图标对应的类名，必须调用2个类名：

iconfont 类名：基本样式，包括字体的使用

icon-xxx ：图标对应的类名，如图所示：

代码演示：

<head>
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./字体图标.css">
    <link rel="stylesheet" href="./字体图标下载包/font_3371915_naw2risy12n/iconfont.css">
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#"><span class="iconfont icon-auto"></span>轿车</a></li>
            <li><a href="#"><span class="iconfont icon-data"></span>时钟</a></li>
            <li><a href="#"><span class="iconfont icon-QRcode"></span>二维码</a></li>
            <li><a href="#"><span class="iconfont icon-atm-away"></span>微信小图标</a></li>
            <li><a href="#"><span class="iconfont icon-download"></span>APP下载</a></li>
            
        </ul>
    </div>
</body>

.nav {
    width: 1200px;
    height: 50px;
    margin: 50px auto;
}

ul li {
    float: left;
    line-height: 50px;
    padding: 0 20px;
}

ul li:hover {
    background-color: green;
}

ul li:hover a {
    color: #fff;
}

ul li:hover a span {
    color: pink;
}

代码演示结果：