一言
离别并不痛苦,因为我们都微笑着。——青之驱魔师
css练习:实现一个b站用户卡片

实现效果

![在这里插入图片描述](httpscdn.xlonglong.cnghLonglong418picbedimg202307131620540.png)

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

<body>
    <div class="usercard">
        <div class="back_card">

        </div>
        <div class="card-content">
            <div class="left">
                <div class="user-card-image"></div>
            </div>
            <div class="right">
                <div class="right-text">
                    <div class="user-name"><a class="name" href="#">Longlong</a><a class="grade" href="#">Lv4</a>
                        <span class="huiyuan">年度大会员</span>
                    </div>
                    <div class="user-social-info">
                        <a href="#" style="text-decoration: none;"> <span class="number">105</span> <span
                                class="type">关注</span></a>
                        <a href="#" style="text-decoration: none;"> <span class=" number">28</span> <span
                                class="type">粉丝</span></a>
                        <a href="#" style="text-decoration: none;"> <span class=" number">190</span> <span
                                class="type">获赞</span></a>

                    </div>
                </div>
                <div class="right-personality">诗酒趁年华。</div>
                <div class="right-card-btn">
                    <button><span>+关注</span> </button> <button><span>发消息</span></button>
                </div>
            </div>

        </div>

    </div>

</body>

</html>

css

.usercard {

    width: 366px;
    height: 220px;
    margin: 0 auto;
    box-shadow: 2px 2px 5px lightgrey;
    border-radius: 5px;
    /* 单独设置边框颜色是不起作用的,必须先设置border-style */
    /* border-style: dotted;
    border-color: aqua; */

}

.back_card {
    background-image: url(./屏幕截图\ 2023-02-13\ 101028.png);
    background-size: cover;
    width: 366px;
    height: 85px;
}

.left {
    width: 20%;
    height: 100%;
    float: left;

}

.right {
    width: 80%;
    height: 100%;
    float: right;
}

.user-card-image {
    background-image: url(/学习笔记/wallhaven-weeqzx.jpg);
    border-radius: 50%;
    background-size: cover;
    width: 48px;
    height: 48px;
    margin-top: 15px;
    margin-left: 20px;

}

.card-content {
    width: 366px;
    height: 133.78px;

}

.user-name {
    margin: 15px 0px 10px;
    width: 100%;
    height: 100%;

}

.name {
    color: #18191c;
    text-decoration: none;
    margin: 0px, 5px, 0px, 0px;
}

.grade {
    text-decoration: none;
    font-size: 5px;
    margin: 0px 0px 0px 5px;
    color: #FEBB8B;
    /* fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #FEBB8B; */
    font-style: italic;

}

.huiyuan {
    background-color: #FB7299;
    color: white;
    font-size: 10px;
    width: 64px;
    height: 18px;
    padding: 1px 4px;
    margin: 0px 0px 0px 9px;
    border-radius: 2px;
}

.user-social-info {
    width: 100%;
    height: 100%;

}

.right-personality {
    width: 100%;
    height: 12px;
    color: #9499A0;
    font-size: 12px;
    padding: 8px 0px 0px;
    /* margin: 0px 20px 0px 0px; */
    position: relative;
    bottom: 3px;
}

.number {
    color: #18191c;
    width: 20.53px;
    height: 16px;
    font-size: small;
    margin: 0px 0px 5px;

}

.type {
    color: #9499A0;
    width: 24px;
    height: 16px;
    margin: 0px 0px 0px 3px;
    font-size: small;
    margin: 0px 0px 5px;
}

.right-card-btn {
    margin: 16px 0px 0px;
    width: 276px;
    height: 31px;
    position: relative;
    bottom: 10px;
}

.right-card-btn button {
    background-color: #00AEEC;
    margin: 0px 8px 0px 0px;
    border-radius: 3px;
    color: white;
    text-align: center;
    height: 30px;
    width: 100px;
    /* box-shadow: 2px 2px 5px lightblue; */
    border-color: #9499A0;
    /* box-shadow: 2px 2px 5px lightgrey; */
    border-width: 1px;
    font-size: 14px;

}

button:nth-child(2) {
    background-color: white;
    color: #61666D;
}

button:hover:nth-child(2) {

    color: #00AEEC;
    border-color: #00AEEC;
    /* border-width: 2px; */

}
暂无评论

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇