前言:

Maho的API已经开发了哔哩哔哩数据API,预计将在未来支持实时数据呈现!!!!

<style>
    .user-info {
        position: relative;
        display: flex;
        padding: 20px;
        align-items: center;
    }

    .touxiang-parent {
        position: relative;
        display: block;
        border-radius: 100px;
    }

    .a {
        color: inherit;
        text-decoration: none;
        vertical-align: top;
    }

    .touxiang-dingwei {
        width: 48px;
        height: 48px;
        min-width: 48px;
        display: block;
        border-radius: 100px;
    }

    .user-head {
        margin-left: 12px;
        height: 40px;
        box-sizing: border-box;
    }

    .user-data {
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
    }

    .user-data>div {
        display: flex;
        flex-flow: column;
        align-items: center;
    }

    .user-data p {
        font-size: 12px;
        color: #504E4E;
    }

    .bilibili-data {
        border-radius: 5%;
        background-image: url(https://blog.beixibaobao.com/img/iro-jsd/bg1.png);
    }

    .guanzhu {
        background: #00a1d6;
        color: #fff;
        text-align: center;
        margin-left: 20px;
        padding: 0 15px 0 1.5px;
        border-radius: 5%;
    }

    .jiahao {
        height: 14px;
        margin-left: 10px;
        margin-right: 5px;
    }

    .user-name {
        display: flex;
    }

    .bilibili-icon {
        height: 13px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .pic-gif {
        text-align: center;
    }
</style>
<div class="bilibili-data">
    <div>
        <div class="user-info">
            <div class="user-touxiang">
                <a href="https://space.bilibili.com/305018129" class="touxiang-parent">
                    <img data="" alt="" src="https://blog.beixibaobao.com/wp-content/uploads/2019/01/logo.jpg"
                        class="touxiang-dingwei">
                </a>
            </div>
            <div class="user-head">
                <div class="user-name">
                    <a>北熙宝宝
                        <img src="https://status.beixibaobao.com/public/img/png/bilibili.png" class="bilibili-icon">
                    </a>
                    <a class="guanzhu" href="https://space.bilibili.com/305018129">
                        <img src="https://status.beixibaobao.com/public/img/png/jiahao.png" class="jiahao">
                        关注
                    </a>

                </div>
                <p> <a>上次刷新:2021-08-16 15:28:26</a>
                </p>
            </div>
            <p></p>
        </div>
        <p></p>
        <div class="user-data">
            <div>
                <p>粉丝数量</p>
                <p> <span>1530</span>
                </p>
            </div>
            <div>
                <p>被点赞数</p>
                <p> <span>1.8万</span>
                </p>
            </div>
            <div>
                <p>专栏阅读</p>
                <p> <span>1.5万</span>
                </p>
            </div>
            <div>
                <p>总播放量</p>
                <p> <span>32.6万</span>
                </p>
            </div>
            <p></p>
        </div>
        <p></p>
    </div>
    <p></p>
</div>

<div class="pic-gif">
    <img src="https://blog.beixibaobao.com/img/iro-jsd/iloli.gif" style="height:300px">
</div>