AcWing
  • 首页
  • 活动
  • 题库
  • 竞赛
  • 应用
  • 更多
    • 题解
    • 分享
    • 商店
    • 吐槽
  • App
  • 登录/注册

仿stackoverflow名片

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


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 评论

你确定删除吗?
1024
x

© 2018-2023 AcWing 版权所有  |  京ICP备2021015969号-2
用户协议  |  隐私政策  |  常见问题  |  联系我们
AcWing
请输入登录信息
更多登录方式: 微信图标 qq图标 qq图标
请输入绑定的邮箱地址
请输入注册信息