《《字符的变身》方法》

最新推荐文章于 2024-06-15 11:46:27 发布

道墨思冥

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量140

点赞数

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

CSDN-ThinkLnk/B站-道墨思

本文链接：https://blog.csdn.net/qq_39395109/article/details/126394062

版权

五、前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

大家好，我是lg，直接了当

为何一些官网的图片弄不到他的源文件呢？地确有的时候人家帅哥把地址写在了css样式里

但是大多是还是将图片变成css的样式以引入的方式写进去

下面我们来了解一下最大的也是最普遍的“矢量图”的图库，我们在此感谢阿里巴巴大哥，给我们怎么方便的一个图库

地址：iconfont-阿里巴巴矢量图标库

以下是引用图片的一种方式

<span class="iconfont">&#x33;</span>

然后我们在将图库文件iconfont.css样式的文件，引入页面即可

也可以直接使用万维网地址网络引用地址，都是可以的

当然了，还有背景图引入方式供大家参考

使用背景图的话，需要定义；不能重复，以及偏移量，还有图片的大小 000px

一下是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">
    <link rel="stylesheet" href="../背景2/css/index.css">
    <title>背景</title>
</head>

<body>
    <!-- 主体-框架 -->
    <div class="Box">

        <!-- 标题 -->
        <h1>职场取经</h1>

        <!-- 框架-内框 -->
        <div class="box">

            <!-- 单-模块-框架 -->

            <!-- 框1 -->
            <a class="box_mod" href="#">
                <!-- 图 -->
                <div class="mod_img0"></div>
                <!-- 字 -->
                <p>求职技巧</p>
            </a>

            <!-- 框2 -->
            <a class="box_mod" href="#">
                <!-- 图 -->
                <div class="mod_img0 bac_pos"></div>
                <!-- 字 -->
                <p>行业薪资</p>
            </a>

            <!-- 框3 -->
            <a class="box_mod" href="#">
                <!-- 图 -->
                <div class="mod_img0 bac_pos0"></div>
                <!-- 字 -->
                <p>简历模板</p>
            </a>

            <!-- 框4 -->
            <a class="box_mod" href="#">
                <!-- 图 -->
                <div class="mod_img0 bac_pos1"></div>
                <!-- 字 -->
                <p>就业指导</p>
            </a>

            <!-- 框5 -->
            <a class="box_mod" href="#">
                <!-- 图 -->
                <div class="mod_img0 bac_pos2"></div>
                <!-- 字 -->
                <p>实习兼职</p>
            </a>

            <!-- 框6 -->
            <a class="box_mod" href="#">
                <!-- 图 -->
                <div class="mod_img0 bac_pos3"></div>
                <!-- 字 -->
                <p>沟通技巧</p>
            </a>

        </div>
    </div>
</body>

</html>

以下是css样式

*{
    margin: 0;
    padding: 0;
}
/*框架*/
.Box{
    width: 288.8px;
    height: 222.2px;
}
/*标题*/
h1{
    margin: 10px auto 10px 15px;
    font-size: 18px;
    font-weight: 200;
}
/*内框*/
.box{
    width: auto;
    height: 182.2px;
    padding: 10px;
}
/*模块*/
.box_mod{
    display: block;
    width: auto;
    height: 84px;
    float: left;
    box-sizing: border-box;
    padding: 10px 10px;
    text-decoration: none;
}
/*图片*/
.mod_img0{
    width: 24px;
    height: 36px;
    background-image: url(../img/ToolsIcon.png);
    margin-left: 20px;
}
/*偏移量*/
.bac_pos{
    background-position: 0px 3.4%;
}
.bac_pos0{
    background-position: 0px 6.8%;
}
.bac_pos1{
    background-position: 0px 10.2%;
}
.bac_pos2{
    background-position: 0px 13.6%;
}
.bac_pos3{
    background-position: 0px 16.9%;
}
/*3+0+null=5*/

/*设置字体和颜色*/
.mod_img0>a,a>p{
    font-size: 16px;
    font-weight: 200;
    color: rgb(178,170,170);
}
/*鼠标-反应*/
a:hover {
    background-color: rgb(248,248,248);
}
a:hover .mod_img0+p{
    color: rgb(255, 0, 0);
    filter: drop-shadow(auto 0 0 rgb(255, 0, 0));
}

图片再此不提供了，自己可以放一些其他的图片，进行比较对比

道墨思冥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
《《字符的变身》方法》

大家好，我是lg，直接了当为何一些官网的图片弄不到他的源文件呢？地确有的时候人家帅哥把地址写在了css样式里但是大多是还是将图片变成css的样式以引入的方式写进去以下是引用图片的一种方式然后我们在将图库文件iconfont.css样式的文件，引入页面即可也可以直接使用万维网地址网络引用地址，都是可以的。...
复制链接

扫一扫