web运用课实战--小卡片1

作者： 作者的头像   Air1222 ,  2024-07-24 16:21:03 ,  所有人可见 ,  阅读 12

0 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>card</title>
    <link rel="stylesheet" href="/card/css/card.css">
</head>

<body class="body">
    <div class="card">
        <div class="card-head">asked Feb 9, 2019 at 18:18</div>
        <div class="card-body">
            <a href="https://www.acwing.com">
                <div class="card-body-left">
                    <img src="https://cdn.acwing.com/media/user/profile/photo/264940_md_1f82bd6b88.jpg" alt="头像">
                </div>
            </a>
            <div class="card-body-right">
                <a href="https://www.acwing.com">
                    <div class="card-body-right-name">
                        user801347
                    </div>
                </a>
                <div class="card-body-right-info">
                    <b>1345</b>
                    <div class="card-body-right-info-color"></div>4
                    <div class="card-body-right-info-color"></div>15
                    <div class="card-body-right-info-color"></div>28
                </div>
            </div>
        </div>
    </div>
</body>

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

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

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

.card-body-left>img {
    width: 32px;
    height: 32px;
    border-radius: 5px;
}

.card-body-right {
    width: 147px;
    height: 34.8px;
    margin-left: 8px;
    float: left;
}

.card-body-right-name {
    color: #1b75D0;
    font-size: 13px;
    width: 66.23px;
    height: 12.27px;

}

.card-body-right-info {
    color: #636B74;
    margin: 0 2px 0 0;
    font-size: 12px;
    width: 147px;
    height: 17.73px;
    position: relative;
    bottom: -5px;
}

.card-body-right-info-color {
    margin: 0 3px 0 2px;
    width: 6px;
    height: 6px;
    background-color: #d0661b;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    top: -1.5px;
}

a {
    text-decoration: none;
}

0 评论