HTML/CSS实现B站风格卡片组件示例-CSDN博客

本文链接：https://blog.csdn.net/weixin_73412387/article/details/134704154

效果图如下

HTML代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/bilibili.css">
</head>

<body>
    <div class="card">
        <div class="card-bg"></div>
        <div class="card-content">
            <div class="card-content-picture">
                <img src="/images/school_logo.jpg" alt="">
            </div>
            <div class="card-content-info">
                <div class="card-content-info-item-username">
                    哔哩哔哩公益<span class="card-content-info-level-info">Lv</span><span
                        class="card-content-info-level-number">6</span>
                    &nbsp;<span class="card-content-info-member">年度大会员</span>
                </div>

                <div class="card-content-info-item-reputation"><span
                        class="card-content-info-item-reputation-number">157</span
                        class="card-content-info-item-reputation"> 关注 <span
                        class="card-content-info-item-reputation-number">16.3万</span> 粉丝
                    <span class="card-content-info-item-reputation-number">64.9万</span> 获赞
                </div>
                <div class="card-content-info-item-introduction">
                    bilibili机构认证 哔哩哔哩公益官方账号
                </div>
                <div class="card-content-info-item-introduction">
                    点击APP右下方[我的]-[推荐服务]-[哔哩哔哩公益]或搜索工艺,一起守护世界!
                </div>
                <div class="card-content-info-item"></div>
            </div>
            <div class="card-content-button">
                <input class="card-content-button-item button-left" type="button" value="+关注">
                <input class="card-content-button-item button-right" type="button" value="发消息">
            </div>

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

</html>

CSS代码如下

.card {
    /* background-color: lightgreen; */
    width: 366px;
    height: 291px;
    border-color: #C9CCD0;
    border-width: 1px;
    border-style: solid;
    border-radius: 7px;
    z-index: 5;
    position: fixed;
}



.card-content {
    width: 100%;
    height: 206px;
    /* background-color: yellow; */
}

.card-content-picture {
    margin-top: 4px;
    margin-left: 4px;
    float: left;
    height: 50px;
    width: 50px;

}

.card-content-info {
    /* float: left; */
    margin: 12px 20px 16px 5px;
    color: #FB7299;
    font-weight: 1000;
}

.card-content-picture>img {
    width: 100%;
    height: 100%;
    border-radius: 25px;
}

.card-bg {
    width: 100%;
    height: 85px;
    background-image: url('/images/bg04.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px 5px 0 0;
}

.card-content-info-level-info {
    margin-left: 5px;
    font-size: 7px;
    color: white;
    background-color: #F04C49;
    display: inline-block;
    vertical-align: bottom;
}

.card-content-info-level-number {
    font-size: 9px;
    color: white;
    background-color: #F04C49;
    display: inline-block;
    vertical-align: bottom;
}

.card-content-info-member {
    color: white;
    font-size: 10px;
    background-color: #FB7299;
    border-radius: 1px;
}

.card-content-info-item-reputation {
    font-size: 12px;
    color: #9499A0;
}

.card-content-info-item-username {
    margin-bottom: 10px;
}

.card-content-info-item-reputation-number {
    font-size: 12px;
    color: black;
    font-weight: 500;

}

.card-content-info-item-introduction {
    margin: 0px 20px 0px 50px;
    padding-top: 10px;
    font-size: 12px;
    color: #9499A0;
}

.card-content-button {
    margin-left: 55px;
}

.card-content-button-item {
    height: 30px;
    width: 100px;

    color: white;
}

.card-content-button-item.button-left {
    background-color: #00AEEC;
    border-width: 1px;
    border-style: solid;
    border-color: #C9CCD0;
    border-radius: 5px;
    margin-right: 8px;
}

.card-content-button-item.button-right {
    background-color: white;
    border-width: 1px;
    border-style: solid;
    border-color: #C9CCD0;
    border-radius: 5px;
    color: black;
}

.card-content-button-item.button-right:hover {
    border-color: #00AEEC;
    color: #00AEEC;
    transition: 0.7s;

}

不提供图片资源,本文仅供学习使用.