仿stackoverflow名片

作者： 作者的头像   ATRI ,  2022-09-21 19:13:19 ,  所有人可见 ,  阅读 30

0


展示效果：http://127.0.0.1:5500/index.html

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">asked Feb 9, 2019 at 18:18</div>
      <div class="user-card-body">
        <div class="user-card-photo">
          <a
            href="https://space.bilibili.com/488654468?spm_id_from=333.1007.0.0"
            target="_blank"
            ><img
              src="https://cdn.acwing.com/media/user/profile/photo/171103_lg_6fce1eaf39.png"
              alt=""
          /></a>
        </div>
        <div class="user-card-info">
          <div class="user-card-info-username">
            <a
              href="https://www.acwing.com/user/myspace/index/171103/"
              target="_blank"
              >kano</a
            >
          </div>
          <div class="user-card-info-reputation">
            <span style="color: #6a737c; font-weight: bolder"> 1,075</span>
            <div
              class="user-card-info-reputation-sign"
              style="background-color: #f9cc00"
            ></div>
            <span>3</span>
            <div
              class="user-card-info-reputation-sign"
              style="background-color: #b4b8bc"
            ></div>
            <span>14</span>
            <div
              class="user-card-info-reputation-sign"
              style="background-color: #cda683"
            ></div>
            <span>25</span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

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

.user-card-head {
  font-size: 12px;
  color: #6a737c;
  margin: 1px 0px 4px 0px;
}

.user-card-photo img {
  width: 32px;
  height: 32px;
}

.user-card-photo {
  float: left;
}

.user-card-info {
  float: left;
  margin: 0px 0px 0px 8px;
}

.user-card-info-username {
  font-size: 12px;
  color: #0074cc;
}

.user-card-info-reputation {
  font-size: 12px;
  color: #8c8395;
}

.user-card-info-username a {
  text-decoration: none;
  color: #0074cc;
}

.user-card-info-reputation-sign {
  width: 6px;
  height: 6px;
  background-color: lightblue;
  border-radius: 50%;
  display: inline-block;
  margin: 0px 1.5px 0px 2px;
  position: relative;
  top: -1.5px;
}

0 评论