零基础如何快速画页面（VUE篇）第二天

于 2024-02-26 10:01:06 发布
阅读量618 收藏 6
点赞数 5
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_53452096/article/details/136292149
版权
博客介绍了HTML和CSS学习第二天的内容，重点讲解如何使用阿里矢量图标库。包括创建项目、选取图标、下载文件、复制到指定文件夹、引入及使用图标，还给出了一些资源图片链接，如百度图片、百科背景等。

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

HTML&&CSS (第二天)

  1. 在写页面之前先学习一个小知识，学会使用iconfont
    • 这里用的是阿里的矢量图标库：https://www.iconfont.cn/collections
    • 创建一个项目，选取自己需要和喜欢的图标，下载
    • 将iconfont开头的文件复制到一个font的文件中
    • 引入 <link rel="stylesheet" href="./font/iconfont.css">
    • 使用：<i class="iconfont icon-a-44tubiao-17"></i>
    • 查看：这里可以先下载一个插件 Live Serve 右键启动项目

在这里插入图片描述
准备：iconfont、图片链接如下

  • 百度图片：https://baikebcs.bdimg.com/baike-react/common/logo-baike.svg
  • 百科背景：https://bkssl.bdimg.com/resource/lemma/images/60e09abce95ec228d465.png
  • 百科图标：https://bkssl.bdimg.com/resource/lemma/images/22f17ebd33b53e243fbc.png
  • TA说：https://baikebcs.bdimg.com/baike-react/lemma/tashuo.png
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钟离大人</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/zhongli.css">
</head>

<body>
    <div class="navigation">
        <div class="w">
            <img class="baidu" src="https://baikebcs.bdimg.com/baike-react/common/logo-baike.svg" alt="">
            <div class="input_btn">
                <div class="input">
                    <span>钟离</span>
                    <i class="icon-error iconfont"></i>
                </div>
                <div class="btn">进入词条</div>
                <div class="other">
                    <span>
                        <i class="iconfont icon-a-44tubiao-55"></i>
                        播报
                    </span>
                    <span>
                        <i class="iconfont icon-a-44tubiao-17"></i>
                        编辑
                    </span>
                    <span>
                        <i class="iconfont icon-a-44tubiao-112"></i>
                        讨论 &nbsp;18
                    </span>
                    <span>
                        <i class="iconfont icon-a-44tubiao-56"></i>
                        收藏
                    </span>
                    <span>
                        <i class="iconfont icon-a-44tubiao-21"></i>
                        赞
                    </span>
                    <u>幸运的hysn</u>
                </div>
            </div>
        </div>
    </div>
    <div class="content w">
        <div class="basic-info">
            <div class="part1">
                <div class="triple">
                    <span>
                        <i class="iconfont icon-a-44tubiao-56"></i>
                        收藏
                    </span>|
                    <span>
                        <i class="iconfont icon-a-44tubiao-21"></i>
                        73
                    </span>|
                    <span>
                        <i class="iconfont icon-fenxiang"></i>
                        83
                    </span>
                </div>
                <div class="info-text">
                    <p>钟离是游戏《<a>原神</a>》中的5星岩系角色。应“<a>往生堂</a>”邀请而来的神秘客卿。</p>
                    <p>钟离样貌俊美，举止高雅，拥有远超常人的学识。虽说来历不明，却知礼数、晓规矩。坐镇“往生堂”，能行天地万物之典仪。 <sup>[1]</sup></p>
                </div>
                <div class="atlas">
                    <div class="introduce">
                        <div class="title">百度图谱</div>
                        <div class="introduce-info">
                            <strong>钟离</strong>
                            <p>《原神》关系图</p>
                        </div>
                    </div>
                    <div class="character">
                        <div class="character-item character1">
                            <div class="img"></div>
                            <strong>钟离</strong>
                        </div>
                        <div class="character-item character2">
                            <strong>巴巴托斯</strong>
                            <div class="img"></div>
                        </div>
                        <div class="character-item character3">
                            <div class="img"></div>
                            <strong>魈</strong>
                        </div>
                        <div class="character-item character4">
                            <strong>空</strong>
                            <div class="img"></div>
                        </div>
                    </div>
                    <div class="more">
                        查看更多
                        <i class="icon-you iconfont"></i>
                    </div>
                </div>
            </div>
            <div class="part2">
                <div class="relationship-title">
                    相关星图
                </div>
                <div class="relationship-role">
                    <div class="role-title">
                        游戏《原神》中的5星角色
                        <i class="icon-you iconfont"></i>
                        <i class="iconfont icon-a-44tubiao-17 edit"></i>
                    </div>
                    <div class="record">
                        <span>
                            <i class="icon-a-44tubiao-135 iconfont"></i>
                            共39个词条
                        </span>
                        <span>
                            <i class="icon-shu iconfont"></i>
                            41.7万阅读
                        </span>
                    </div>
                    <div class="role">
                        <div class="role-item">
                            <img src="./img/zhongli.webp" alt="">
                            <div>
                                <div class="title">钟离</div>
                                <div class="introduce">
                                    钟离是游戏《原神》中的5星岩系角色。应“往生堂”邀请而来的神秘客卿。钟离样貌俊美，举止高雅，拥有远超常人的学识。虽说来历不明，却知礼数、晓规矩。坐镇“往生堂”，能行天地万物之典仪。
                                </div>
                            </div>
                        </div>
                        <div class="role-item">
                            <img src="./img/hutao.webp" alt="">
                            <div>
                                <div class="title">胡桃</div>
                                <div class="introduce">
                                    胡桃，游戏《原神》中的5星火系角色，她是璃月“往生堂”第七十七代堂主，掌控着璃月葬仪事务的重要人物。胡桃尽心尽力地为人们完成送别之仪，维护着世间阴阳平衡之道。除此以外还是个神奇打油诗人，诸多“杰作”被璃月人口口相传。
                                </div>
                            </div>
                        </div>
                        <div class="role-item">
                            <img src="./img/bachongzi.webp" alt="">
                            <div>
                                <div class="title">八重神子</div>
                                <div class="introduce">
                                    八重神子，游戏《原神》中的5星雷系角色。掌管鸣神大社的大巫女、狐之血脉的延续者、“永恒”的眷属与友人，以及，轻小说出版社“八重堂”的恐怖总编，有着多重身份的神秘宫司，凡人们或许永远无法了解她的真面目与真心。
                                </div>
                            </div>
                        </div>
                        <div class="role-item">
                            <img src="./img/naxijie.webp" alt="">
                            <div>
                                <div class="title">纳西姐</div>
                                <div class="introduce">
                                    纳西妲，游戏《原神》中的5星草系角色。“小吉祥草王”深居于净善宫内，向来不受重视，也很少被人提及。她身负重任，哪怕目睹漆黑，经历孤独，也不曾停下脚步。</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="relationship-info">
                    <div class="item">
                        <div class="l">
                            <div class="label">中文名</div>
                            <div class="value">钟离</div>
                        </div>
                        <div class="r">
                            <div class="label">登场作品</div>
                            <div class="value">原神</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="l">
                            <div class="label">外文名</div>
                            <div class="value">Zhongli</div>
                        </div>
                        <div class="r">
                            <div class="label">神之心</div>
                            <div class="value">岩</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="l">
                            <div class="label">别 名</div>
                            <div class="value">摩拉克斯、岩王帝君、岩王爷</div>
                        </div>
                        <div class="r">
                            <div class="label">所 属</div>
                            <div class="value">璃月</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="l">
                            <div class="label">配 音</div>
                            <div class="value">彭博（中文）、前野智昭（日文）</div>
                        </div>
                        <div class="r">
                            <div class="label">稀有度</div>
                            <div class="value">5星</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="l">
                            <div class="label">性 别</div>
                            <div class="value">男</div>
                        </div>
                        <div class="r">
                            <div class="label">武器类型</div>
                            <div class="value">长柄武器</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="l">
                            <div class="label"></div>
                            <div class="value"></div>
                        </div>
                        <div class="r">
                            <div class="label">称 号</div>
                            <div class="value">尘世闲游</div>
                        </div>
                    </div>
                </div>
                <div class="relationship-directory">
                    <div class="title">目录</div>
                    <div class="list">
                        <div class="item">
                            <div class="ol-style">1 角色背景</div>
                            <div class="ol-style">2 能力设定</div>
                            <div class="ul-style">属性</div>
                            <div class="ul-style">命之座</div>
                        </div>
                        <div class="item">
                            <div class="ul-style">天赋</div>
                            <div class="ol-style">3 玩法分析</div>
                            <div class="ol-style">4 角色专属</div>
                            <div class="ol-style">5 角色台词</div>
                        </div>
                        <div class="item">
                            <div class="ol-style">6 拓展阅读</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="advertisement">
            <div class="overview">
                <img width="100%" src="./img/zhonglio.png" alt="">
                <div class="title">
                    <i class="iconfont icon-tupianzu"></i>
                    钟离的概述图（2张）
                </div>
            </div>
            <div class="tashuo">
                <div class="title">
                    <div class="share">
                        <img width="44" height="14" src="https://baikebcs.bdimg.com/baike-react/lemma/tashuo.png"
                            alt="">
                        分享你的世界
                    </div>
                    <div class="more">
                        查看更多
                        <i class="iconfont icon-you"></i>
                    </div>
                </div>
                <img width="100%" src="./img/yuanshen.webp" alt="">
                <div class="tashuo-content">
                    <p>
                        《原神》钟离事件：万众瞩目的角色，是如何坠落谷底并浴火重生？
                    </p>
                    <div class="author">
                        <img width="20" height="20" src="./img/touxiang.jpeg" alt="">
                        <p>隔夜也很宅·金牌宠粉官,动漫作者,优质影视领域创作者,活力创作者</p>
                    </div>
                </div>
            </div>
            <img width="268" src="./img/guanggao.webp" alt="">
            <div class="statistics">
                <div class="title">词条统计</div>
                <p>浏览次数：2188580次</p>
                <p>编辑次数：20次历史版本</p>
                <p>最近更新：阿阿斯顿545（2023-12-02）</p>
                <div class="title" style="margin-top: 10px;">突出贡献榜</div>
            </div>
        </div>
    </div>
</body>

</html>

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #f5f5f5;
}

.navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 66px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    background-color: #fff;
}

.navigation .baidu {
    width: 100px;
    height: 33px;
    margin-right: 10px;
}

.navigation .w {
    display: flex;
    align-items: center;
    height: 100%;
}

.navigation .input_btn {
    display: flex;
    width: 500px;
    padding-top: 4px;
}

.navigation .input_btn .input {
    width: 400px;
    height: 34px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 6px 8px 4px 4px;
    display: flex;
    justify-content: space-between;
    line-height: 24px;
}

i {
    cursor: pointer;
}

.navigation .input_btn .btn {
    width: 100px;
    height: 34px;
    box-sizing: border-box;
    background-color: #488af7;
    color: white;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
}

.navigation .other {
    width: 430px;
    position: absolute;
    top: 26px;
    right: 60px;
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 12px;
}

.navigation .other span {
    cursor: pointer;
}

.navigation .other u {
    color: #333;
}

.w {
    width: 1140px;
    margin: 0 auto;
    background-color: #fff;
}

.content {
    height: calc(100vh - 66px);
    margin-top: 66px;
    border: 1px solid #ddd;
    border-top: 0;
    border-bottom: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
}

.basic-info {
    width: 850px;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.advertisement {
    flex: 1;
}

.part1 .triple {
    width: 170px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    line-height: 30px;
    position: absolute;
    right: 50px;
    top: 30px;
}

.part1 .triple i::before {
    color: #4d8ac8 !important;
}

.part1 .triple span {
    color: #888;
    cursor: pointer;
}

.part1 .triple span:hover {
    color: #4d8ac8;
}

.info-text {
    margin-top: 40px;
    text-indent: 2em;
    font-size: 14px;
}

.info-text p {
    margin-bottom: 15px;
}

.info-text a,
.info-text sup {
    color: #4d8ac8;
    cursor: pointer;
}

.part1 .atlas {
    display: flex;
    width: 790px;
    height: 123px;
    background-image: url(https://bkssl.bdimg.com/resource/lemma/images/60e09abce95ec228d465.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 20px;
}

.part1 .atlas img {
    width: 42px;
    height: 42px;
    border: 1.5px solid #7596de;
    border-radius: 50%;
}

.atlas .introduce .title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.atlas .introduce .introduce-info {
    margin-left: 10px;
}

.atlas .introduce .introduce-info p {
    margin-top: 10px;
    font-size: 12px;
    line-height: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.atlas .introduce .title::before {
    display: inline-block;
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(https://bkssl.bdimg.com/resource/lemma/images/22f17ebd33b53e243fbc.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.part1 .character {
    display: flex;
    width: 490px;
    height: 100%;
    justify-content: space-around;
    margin-left: 100px;
}

.character .character-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.character .character-item .img {
    width: 42px;
    height: 42px;
    border: 1.5px solid #7596de;
    border-radius: 50%;
    background-size: 100% 100%;
}

.character1 .img {
    background-image: url(../img/zhonglia.webp);
    background-repeat: no-repeat;
}

.character2 .img {
    background-image: url(../img/babatuosi.webp);
    background-repeat: no-repeat;
}

.character3 .img {
    background-image: url(../img/xiao.webp);
    background-repeat: no-repeat;
}

.character4 .img {
    background-image: url(../img/kong.webp);
    background-repeat: no-repeat;
}

.part1 .more {
    width: 16px;
    margin-left: 50px;
    line-height: 14px;
}

.part1 .more,
.part1 .more i {
    text-align: center;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.part1 .more i {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #ecf2fe;
    border-radius: 50%;
    line-height: 16px;
    text-align: center;
    margin-top: 5px;
}

.part2 .record {
    font-size: 12px;
    margin-top: 10px;
    color: rgba(0, 0, 0, 0.6);
}

.part2 .role {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.part2 .role .role-item {
    display: flex;
}

.part2 .role .role-item img {
    width: 56px;
    height: 56px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-right: 10px;
}

.part2 .role .role-item .title {
    width: 100%;
    position: relative;
    margin-top: 16px;
    font-size: 14px;
}

.part2 .role .role-item .introduce {
    width: 111px;
    word-wrap: normal;
    color: rgba(0, 0, 0, 0.6);
    line-height: 12px;
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.part2 .relationship-title {
    font-size: 22px;
    margin-top: 30px;
    margin-bottom: 12px;
}

.relationship-role {
    height: 136px;
    padding: 15px 20px;
    border: 1px solid #e6e6e6;
}

.relationship-role .role-title {
    position: relative;
}

.relationship-role .role-title .edit {
    color: rgba(0, 0, 0, 0.6);
    font-size: 16px;
    position: absolute;
    top: 6px;
    right: 0;
}

.relationship-info {
    margin: 20px 35px;
}

.relationship-info .item {
    display: flex;
    color: #999;
    font-size: 12px;
    height: 26px;
    line-height: 26px;
    background-image: url(https://baikebcs.bdimg.com/baike-react/lemma/basicInfo-bg.png);
}

.relationship-info .l {
    width: 395px;
    display: flex;
}

.relationship-info .r {
    width: 395px;
    display: flex;
}

.relationship-info .item .label {
    padding: 0 5px 0 12px;
    width: 90px;
    box-sizing: border-box;
    font-weight: 700;
}

.relationship-info .value {
    font-weight: 400;
    flex: 1;
}

.relationship-directory {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #fbfbfb;
    display: flex;
    height: 105px;
    width: 563px;
    padding: 15px 0 20px 0;
}

.relationship-directory .title {
    width: 62px;
    font-size: 18px;
    margin: 22px 0 0 20px;
    border-right: 1px solid #ddd;
}

.relationship-directory .list {
    display: flex;
    width: 500px;
    justify-content: space-around;
}

.relationship-directory .list .ol-style {
    font-size: 16px;
    color: #136ec2;
}

.relationship-directory .list .ul-style::before {
    content: '';
    width: 4px;
    height: 4px;
    background-color: #ccc;
    margin-right: 6px;
    display: inline-block;
}

.relationship-directory .list .ul-style {
    font-size: 12px;
    font-weight: 400;
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
}

.advertisement .overview {
    width: 268px;
    box-shadow: 1px 1px 1px #ccc;
    border: 1px solid #ddd;
    margin-top: 30px;
    margin-bottom: 20px;
}

.advertisement .overview .title {
    padding: 8px 5px 8px 14px;
    font-size: 16px;
    line-height: 23px;
}

.tashuo {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    height: 277px;
    width: 268px;
    line-height: 14px;
    margin-bottom: 10px;
}

.tashuo .title,
.tashuo .title i {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.tashuo .title {
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: space-between;
}

.tashuo .tashuo-content {
    margin: 7px 10px;
    display: block;
}

.tashuo .tashuo-content p {
    font-size: 14;
    line-height: 20px;
}

.tashuo .author {
    display: flex;
    align-items: center;
}

.tashuo .author img {
    border-radius: 50%;
    margin-right: 10px;
}

.tashuo .author {
    margin-top: 7px;
}

.tashuo .author p {
    width: 210px;
    word-wrap: normal;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.statistics {
    width: 268px;
    height: 150px;
    background: #fcfcfc;
    border: 1px solid #e6e6e6;
    color: #555;
    line-height: 22px;
    margin-bottom: 10px;
    padding: 12px 14px 14px;
    box-sizing: border-box;
}
.statistics .title{
    margin-bottom: 10px;
}
.statistics p {
    font-size: 12px;
}

所有的资源图片和font可以找我私聊要
！原地址：https://baike.baidu.com/item/%E9%92%9F%E7%A6%BB/55550693?fr=ge_ala

酥先生じ
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值