历史记录

清除记录

猜你想搜

AcWing热点
App
登录/注册

CSS作业：自制b站名片

作者：

oceanrivers , 2023-08-29 22:53:25 , 所有人可见 , 阅读 148

4

1

b站名片.png

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="/web应用课/static/css/index.css">
</head>

<body>
    <div class="head">
    </div>
    <div class="info">
        <img class="info-img" src="/web应用课/static/images/b站头像.jpg" alt="hh"></img>
        <div class="info-detail">
            <div class="info-detail-username">
                <div>oceanrivers</div>
                <div>♂</div>
                <div>Lv6</div>
                <div>终身大会员</div>
            </div>
            <div class="info-detail-userinfo">
                <div>1 <span style="color: rgb(152, 155, 172); font-weight: bold;">关注</span></div>
                <div>253.5万 <span style="color: rgb(152, 155, 172); font-weight: bold;">粉丝</span></div>
                <div>200万 <span style="color: rgb(152, 155, 172); font-weight: bold;">获赞</span></div>
            </div>
            <div class="info-detail-resume">
                b站最帅的up
            </div>
            <div class="info-detail-guanzhu">
                +关注
            </div>

            <div class="info-detail-news">
                发消息
            </div>
        </div>
    </div>
</body>

</html>

CSS

.head {
    box-sizing: border-box;
    width: 336px;
    height: 85px;
    background-image: url(/web应用课/static/images/b站背景图.png);
    background-size: 400px;
    border-radius: 10px 10px 0 0;
    border-style: solid;
    border-color: gray;
    border-width: 1px 1px 0px 1px;
}

.info {
    box-sizing: border-box;
    width: 336px;
    height: auto;
    border-radius: 0 0 10px 10px;
    border-style: solid;
    border-color: grey;
    border-width: 0px 1px 1px 1px;
    display: flex;
    flex-direction: row;
}

.info-img {
    float: left;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 10px;
}

.info-detail {
    float: left;
    width: auto;
    height: auto;
}

.info-detail-username {
    width: 276px;
    height: 30px;
    margin-top: 5px;
    margin-bottom: 10px;
    padding-top: 10px;
}

.info-detail-username>div:nth-child(1) {
    box-sizing: border-box;
    float: left;
    width: auto;
    height: auto;
    margin-right: 8px;
    color: rgb(251, 116, 166);
    font-weight: bold;
    font-size: larger;
    text-align: center;
}

.info-detail-username>div:nth-child(2) {
    box-sizing: border-box;
    float: left;
    width: auto;
    height: auto;
    margin-right: 8px;
    color: lightskyblue;
    font-weight: bold;
    text-align: center;

}

.info-detail-username>div:nth-child(3) {
    box-sizing: border-box;
    float: left;
    width: auto;
    height: auto;
    color: white;
    background-color: rgb(240, 84, 81);
    font-size: xx-small;
    font-weight: bold;
    padding: 1px;
    margin-top: 4px;
    margin-right: 10px;
    text-align: center;
    border-radius: 3px;
}

.info-detail-username>div:nth-child(4) {
    box-sizing: border-box;
    float: left;
    width: auto;
    height: auto;
    color: white;
    font-size: xx-small;
    padding: 4px;
    background-color: rgb(251, 116, 166);
    text-align: center;
    line-height: auto;
    border-radius: 3px;
}

.info-detail-userinfo {
    width: 276px;
    height: 18px;
    font-size: small;
    margin-bottom: 10px;

}

.info-detail-userinfo>div:nth-child(1) {
    float: left;
    width: auto;
    height: auto;
    margin-right: 12px;
    white-space: pren;
    font-weight: 800px;
}

.info-detail-userinfo>div:nth-child(2) {
    float: left;
    width: auto;
    height: auto;
    margin-right: 12px;
    white-space: pren;
}

.info-detail-userinfo>div:nth-child(3) {
    float: left;
    width: auto;
    height: auto;
    margin-right: 12px;
    white-space: pren;
}

.info-detail-resume {
    width: 276px;
    height: auto;
    font-size: small;
    color: rgb(152, 155, 172);
}

.info-detail-guanzhu {
    box-sizing: border-box;
    float: left;
    margin-top: 15px;
    margin-bottom: 20px;
    margin-right: 8px;
    width: 100px;
    height: auto;
    border-style: solid;
    text-align: center;
    line-height: 35px;
    border-radius: 5px;
    color: white;
    background-color: rgb(0, 174, 236);
}

.info-detail-news {
    box-sizing: border-box;
    float: left;
    margin-top: 15px;
    margin-bottom: 20px;
    width: 100px;
    height: 35px;
    border-style: solid;
    border-width: 1px;
    border-color: lightgray;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    line-height: 35px;
    color: gray;
}