Web项目CSS实战2 - Bilibili个人名片制作

作者： 作者的头像   流浪宇航员 ,  2023-02-10 01:07:25 ,  所有人可见 ,  阅读 385

10


3

web.png

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

<body>
    <div class="user-card">
        <div class="user-card-head"></div>
        <div class="user-card-body">
            <div class="user-card-body-photo">
                <img src="https://cdn.acwing.com/media/user/profile/photo/190654_lg_bbdda84dfa.jpg" alt="">
            </div>
            <div class="user-card-body-content">
                <div class="user-card-body-content-username">
                    <a href="https://www.acwing.com/user/myspace/index/190654/" target="_blank">
                        FJ_EYoungOneC
                    </a>
                    <span class="user-card-body-content-username-level">
                        LV10
                    </span>
                    <span class="user-card-body-content-username-member">
                        年度大会员
                    </span>
                </div>
                <div class="user-card-body-content-info">
                    <span class="user-card-body-content-info-data">520</span>
                    <span class="user-card-body-content-info-type">关注</span>
                    <span class="user-card-body-content-info-data">1000万</span>
                    <span class="user-card-body-content-info-type">粉丝</span>
                    <span class="user-card-body-content-info-data">200亿</span>
                    <span class="user-card-body-content-info-type">获赞</span>
                </div>
                <div class="user-card-body-content-sign">
                    <div class="user-card-body-content-sign-logo"></div>
                    <span class="user-card-body-content-sign-tips">
                        Bilibili知名摆烂up主，AcWing知名摆烂学员。
                    </span>
                </div>
                <div class="user-card-body-content-button">
                    <button>+关注</button>
                    <button>发消息</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

style.css

.user-card {
    width: 366px;
    height: 244.59px;
    box-sizing: border-box;
    margin: 100px auto;
    background-color: #FFFFFF;
    border: solid 1px #C9CCD0;
    border-radius: 5px;
}

.user-card-head {
    width: 366px;
    height: 85px;
    background-image: url('/static/images/background.jpeg');
    background-size: cover;
    background-position: 0 -30px;
}

.user-card-body-photo {
    width: 90px;
    height: 223.59px;
    float: left;
    text-align: center;
}

.user-card-body-photo>img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-top: 15px;
}

.user-card-body-content {
    width: auto;
    height: auto;
    float: left;
}

.user-card-body-content-username {
    height: 50px;
    font-size: 16px;
    position: relative;
    top: 12px;

}

.user-card-body-content-username>a {
    color: #FC8BAB;
    text-decoration: none;
}

.user-card-body-content-username-level {
    font-size: 12px;
    font-style: italic;
    color: gold;
}

.user-card-body-content-username-member {
    font-size: 14px;
    color: #FFFFFF;
    background-color: #FB7299;
    margin-left: 10px;
    border-radius: 3px;
    border: solid 1px red;
}

.user-card-body-content-info {
    font-size: 12px;
    position: relative;
    top: -5px;
}

.user-card-body-content-info-data {
    color: #18191C;
    font-weight: bold;
}

.user-card-body-content-info-type {
    color: #9499A0;
    margin-right: 7px;
}

.user-card-body-content-sign {}

.user-card-body-content-sign-logo {
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background-color: #FFC62E;
    margin-top: 15px;
    float: left;
}

.user-card-body-content-sign-tips {
    color: #9499A0;
    font-size: 12px;
    position: relative;
    top: 7px;
    margin-left: 3px;
}

.user-card-body-content-button>button {
    width: 100px;
    height: 30px;
    position: relative;
    top: 20px;
    margin-right: 10px;
    border-radius: 5px;
    cursor: pointer;
}

.user-card-body-content-button>button:nth-child(1) {
    background-color: #00AEEC;
    color: white;
    border: none;
}

.user-card-body-content-button>button:nth-child(2) {
    color: #61666D;
    border: solid 1px #C9CCD0;
}

.user-card-body-content-button>button:nth-child(2):hover {
    color: #00AEEC;
    border: solid 1px #00AEEC;
    transform: 700ms;
}

4 评论

用户头像
失落外星人   2023-02-12 00:04      2    踩      回复

膜拜大佬

用户头像
流浪宇航员   2023-02-12 00:24      1    踩      回复

笔芯~

用户头像
hurryboy   2023-02-10 01:18      2    踩      回复

6666

用户头像
栗子ing   2023-02-11 16:47      1    踩      回复

隐藏高级up主

1024
x