仿stackoverflow名片与b站名片实现（HTML、CSS）

前言

学习自ACwing - Web应用课

一、仿stackoverflow名片

HTML

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="/static/css/style.css">
</head>

<body>
    <div class="user-card">
        <div class="user-card-head">
            asked Aug 3, 2022 at 2:30
        </div>
        <div class="user-card-body">
            <div class="user-card-body-photo">
                <a href="https://blog.csdn.net/qq_37397652?type=blog" target="_blank">
			<img src="static/images/head.jpeg" alt=""></a>
            </div>
            <div class="user-card-body-info">
                <div class="user-card-body-info-username">
                    <a href="https://blog.csdn.net/qq_37397652?type=blog" target="_blank"
                        style="text-decoration: none; color: #1B75D0;">Kinno</a>
                </div>
                <div class="user-card-body-info-reputation">
                    <span style="font-weight: bold;">1,024</span>
                    <div class="user-card-body-info-reputation-item" style="background-color: #f7ce46;"></div>
                    3
                    <div class="user-card-body-info-reputation-item" style="background-color: #b5b8bc;"></div>
                    14
                    <div class="user-card-body-info-reputation-item" style="background-color: #caa889;"></div>
                    25
                </div>
            </div>
        </div>

    </div>
</body>

</html>

CSS

css 复制代码

.user-card-body-photo img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.user-card {
    width: 200px;
    height: 67.19px;
    background-color: #eef5fc;
    margin: 100px auto;
    padding: 5px 6px 7px 7px;
    box-sizing: border-box;
}

.user-card-head {
    font-size: 12px;
    color: #636B74;
    margin-top: 1px;
    margin-bottom: 4px;
}

.user-card-body-info-username {
    font-size: 11px;
    height: 16px;
    /* text-decoration: none; */
    line-height: 16px;
    /*让字上下居中*/
}

.user-card-body-info-reputation {
    font-size: 12px;
    color: #636B74;
    height: 16px;
    line-height: 16px;
}

.user-card-body-photo {
    float: left;
}

.user-card-body-info {
    float: left;
    margin-left: 8px;
}

.user-card-body-info-reputation-item {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    margin-left: 2px;
    margin-right: 3px;
    position: relative;
    top: -2px;
}

二、仿b站名片

HTML

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="/static/css/bilibili.css">
</head>

<body>
    <div class="user-card">
        <div class="user-card-head">

        </div>
        <div class="user-card-body">
            <div class="user-card-body-left">
                <img src="/static/images/head.jpeg" alt="head-photo">
            </div>
            <div class="user-card-body-right">
                <div class="user-card-body-right-info">
                    <div class="user-card-body-right-text">
                        <div class="user-card-body-right-text-username">
                            <a href="#" style="text-decoration: none;">Kinno喵喵</a>
                            <i>
                                <img src="/static/images/6-level.png" alt="6-level" style="width: 17.8px;">
                            </i>
                        </div>
                    </div>
                    <div class="user-card-body-right-text-reputation">

                        <div class="user-card-body-right-text-reputation-item">
                            <span style="color: rgb(24, 25, 28);">304</span>
                            <span style="color: rgb(148, 153, 160); margin-left: 3px;">关注</span>
                        </div>
                        <div class="user-card-body-right-text-reputation-item">
                            <span>8</span>
                            <span style="color: rgb(148, 153, 160); margin-left: 3px;">粉丝</span>
                        </div>
                        <div class="user-card-body-right-text-reputation-item">
                            <span>8</span>
                            <span style="color: rgb(148, 153, 160); margin-left: 3px;">获赞</span>
                        </div>
                    </div>
                    <div class="user-card-body-right-button">
                        <button>+ 关注</button>
                        <button>发消息</button>
                    </div>
                </div>

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

</html>

CSS

css 复制代码

.user-card {
    width: 366px;
    height: 220px;
    box-shadow: 2px 2px 5px lightgray;
    border-radius: 5px;
}

.user-card-head {
    background-image: url(/static/images/bilibili-background.png);
    background-size: cover;
    width: 100%;
    height: 85px;
}


.user-card-body-right {
    width: 366px;
    height: 134px;
    padding: 12px 20px 16px 70px;
    box-sizing: border-box;
}

.user-card-body-right-info {

    display: flex;
    flex-direction: column;
}

.user-card-body-left {
    width: 70px;
    height: 48px;
    float: left;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.user-card-body-left img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.user-card-body-right-text-username {
    margin-bottom: 10px;
    width: 276px;
    height: 30px;
}

.user-card-body-right-text-username a {
    line-height: 30px;
    font-size: 16px;
    font-weight: 600;
    color: rgb(24, 25, 28);
    display: inline-block;
    /* 设置为inline-block，以支持高度和垂直对齐 */
    vertical-align: middle;
    /* 与图标垂直居中对齐 */
}

.user-card-body-right-text-username i {
    width: 30px;
    height: 30px;
    margin-left: 5px;
}

.user-card-body-right-text-reputation {
    width: 276px;
    height: 18px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    display: flex;
}

.user-card-body-right-text-reputation-item {
    margin-right: 18px;
    display: inline-block;
    text-size-adjust: 100%;
    display: flex;
}

.user-card-body-right-button {
    margin-top: 16px;
    width: 276px;
    height: 32px;
}

.user-card-body-right-button button {
    width: 100px;
    height: 30px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.user-card-body-right-button button:nth-child(1) {
    background-color: #00AEEC;
    color: white;
    margin-right: 8px;
}

.user-card-body-right-button button:nth-child(1):hover {
    background-color: #43c3f2;
    transition: 500ms;
}

.user-card-body-right-button button:nth-child(2) {
    background-color: white;
    border: rgb(201, 204, 208) solid 1px;
    color: rgb(97, 102, 109);
}

.user-card-body-right-button button:nth-child(2):hover {
    border-color: #00AEEC;
    color: #00AEEC;
    transition: 500ms;
}

素材

b站名片背景：
头像：
b站level6：

仿stackoverflow名片与b站名片实现（HTML、CSS）

目录

前言

一、仿stackoverflow名片

HTML

CSS

二、仿b站名片

HTML

CSS

素材