简易版仿B站名片

最新推荐文章于 2024-11-16 14:48:02 发布

废材终结者

最新推荐文章于 2024-11-16 14:48:02 发布

阅读量258

点赞数

本文链接：https://blog.csdn.net/hssf_xxy/article/details/125329280

版权

本文档介绍了如何利用HTML5和CSS3技术，一步步构建一个简单的模仿B站风格的个人名片。内容包括名片的效果展示，HTML结构设定，CSS样式设计，以及头像和背景图片的添加和应用。

摘要由CSDN通过智能技术生成

1、效果

在这里插入图片描述

2、HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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/user-photo.jpg">
            </div>
            <div class="user-card-body-right">
                <div class="user-card-body-right-text">
                    <div class="user-card-body-right-text-username">
                        废材终结者
                        <span>LV5</span>
                    </div>
                    <div class="user-card-body-right-text-reputation">
                        <span class="user-card-body-right-text-reputation-item">
                            <span>100</span>
                            <span>关注</span>
                        </span>
                        <span class="user-card-body-right-text-reputation-item">
                            <span>100</span>
                            <span>粉丝</span>
                        </span>
                        <span class="user-card-body-right-text-reputation-item">
                            <span>100</span>
                            <span>获赞</span>
                        </span>
                        <div>做一个温柔善良的人</div>
                    </div>
                </div>
                <div class="user-card-body-right-button">
                    <button>+关注</button>
                    <button>发消息</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

3、CSS

.user-card {
    width: 504px;
    height: 327px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px lightgray;
}

.user-card-head {
    background-image: url('/static/images/mountain.jpg');
    background-size: cover;
    width: 100%;
    height: 110px;
}

.user-card-body {
    width: 100%;
    height: calc(100% - 110px);
    box-sizing: border-box;
    padding-top: 16px;
}

.user-card-body-left {
    width: 100px;
    height: 100%;
    float: left;
    text-align: center;
}

.user-card-body-right {
    width: calc(100% - 100px);
    height: 100%;
    float: left;
}

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

.user-card-body-right-text {
    width: 100%;
    height: 65%;
}

.user-card-body-right-text-username {
    font-size: 21px;
    font-weight: bold;
    padding: 4px 0 0 10px;
    color: rgb(251, 115, 154);

}

.user-card-body-right-text-username>span {
    font-size: 14px;
    margin-left: 37px;
    background: rgb(255, 108, 0);
    color: white;
    font-style: italic;
}

.user-card-body-right-text-reputation {
    margin-left: 10px;
    margin-top: 21px;
}

.user-card-body-right-text-reputation-item {
    margin-right: 14px;
}

.user-card-body-right-text-reputation>span {
    font-size: 16px;
    color: #222222;
}

.user-card-body-right-text-reputation>div {
    margin-top: 17px;
    margin-bottom: 17px;
    color: rgb(150, 155, 162);
    font-size: 14px;
}

.user-card-body-right-text-reputation-item>span:nth-child(2) {
    color: rgb(150, 155, 162);
}

.user-card-body-right-button>button {
    width: 134px;
    height: 39px;
    border-radius: 5px;
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.user-card-body-right-button>button:nth-child(1) {
    color: white;
    background-color: #00aeec;
    border: none;
    font-size: 16px;
    font-family: monospace;
}

.user-card-body-right-button>button:nth-child(2) {
    background-color: white;
    border: #c9ccd0 solid 1.5px;
    font-size: 16px;
    color: #61666d;
    font-family: monospace;
}

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