矢量图标的使用

神秘的秃头师弟

已于 2022-03-13 10:55:35 修改

阅读量418

点赞数 1

分类专栏：笔记文章标签：前端

于 2020-12-14 22:40:35 首次发布

本文链接：https://blog.csdn.net/m0_52387040/article/details/111176776

版权

笔记专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了如何模仿网易云音乐的界面布局，包括头部的左中右三部分、中间左右两块以及底部区域。重点讲解了整体布局的HTML结构，并提到了阿里图标矢量图标库的使用方法，强调了CSS命名规范和CSS文件加载顺序的重要性。适合前端开发初学者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网易云界面模仿

1.网易云简介

网易云音乐是一款由网易开发的音乐产品，是网易杭州研究院的成果，依托专业音乐人、DJ、好友推荐及社交功能，在线音乐服务主打歌单、社交、大牌推荐和音乐指纹，以歌单、DJ节目、社交、地理位置为核心要素，主打发现和分享。

2.整体布局

<body>
    <div class="box">
        <div class="header">
            <div class="headerleft">
                <i class="iconfont icon-wangyiyunyinle1 lg"></i>网易云音乐
            </div>
            <div class="headerz">
                <form class="sousuo">
                    <i class="iconfont icon-yuanxingjiantouxiangyouzuo eg"></i>
                <i class="iconfont icon-yuanxingjiantouxiangyou fg"></i>
                <input type="search">
                </form>
            </div>
            <div class="headerright">
                <i class="iconfont icon-touxiang "></i>
                <i class="iconfont icon-xiabiao "></i>
                <i class="iconfont icon-shezhi ig"></i>
                <i class="iconfont icon-pifu"></i>
                <i class="iconfont icon-youjian"></i>
                <i class="iconfont icon-weibiaoti--"></i>
                <i class="iconfont icon-icon-minimize"></i>
                <i class="iconfont icon-suoxiao"></i>
                <i class="iconfont icon-fangda"></i>
                <i class="iconfont icon-close1"></i>
            </div>
        </div>
        <div class="left">
            <ul>
                <li><a href="#">发现音乐</li></a>
                <li><a href="#">视频</li></a>
                <li><a href="#">朋友</li></a>
                <li><a href="#">直播</li></a>
                <li><a href="#">私人FM</li></a>
                <li><strong>我的音乐</strong></li>
                <li><a href="#">本地音乐</li></a>
                <li><a href="#">下载管理</li></a>
                <li><a href="#">我的音乐云盘</li></a>
                <li><a href="#">我的电台</li></a>
                <li><a href="#">我的收藏</li></a>
         </ul>
        </div>
        <div class="right"></div>
        <div class="bottom">
            <i class="iconfont icon-danquxunhuan ip"></i>
            <i class="iconfont icon-xiayishou-copy ip"></i>
            <i class="iconfont icon-bofang ip"></i>
            <i class="iconfont icon-xiayishou ip"></i>
            <i class="iconfont icon-bofangqigeci"></i>
            <i class="iconfont icon-biaozhun"></i>
            <i class="iconfont icon-jingyunyinxiaopt-wangyiicon"></i>
            <i class="iconfont icon-shengyin"></i>
            <i class="iconfont icon-caidan"></i>
        </div>
    </div>

整体分为六块，头部左中右三块，中间左右两块，底部一块。

<link rel="stylesheet" href="https://at.alicdn.com/t/font_2253056_5czx9pt0lrl.css">
    <link rel="stylesheet" type="text/css" href="./n.css" >

3.阿里图标矢量图标库的使用

图标库地址
首先添加进购物车
然后创建项目例如当前应为网易云
之后选择 Font class 点击生成代码然后就可以用到link中
最后只要复制图标名称添加到盒子中就可以完成使用
详细见2中代码
购物中打开
在这里插入图片描述

总结

1.css中的名称要注意与项目相符不然会出现效率底下反复找对应样式的设置
2.初学者可划分多个小盒子去进行布局，这样可以将任务细分，方便解决问题。
3.link链接的css文件得放在最下面，防止被覆盖