CSS练习

最新推荐文章于 2024-10-08 10:16:40 发布

林林亓

最新推荐文章于 2024-10-08 10:16:40 发布

阅读量335

点赞数 5

分类专栏： SpringBoot 文章标签： css 前端

本文链接：https://blog.csdn.net/mumuhaoshuai/article/details/136856681

版权

SpringBoot 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

差不多还挺像

<!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="/static/CSS/style.css" />
  </head>
  <body>
    <div class="userCard">
      <div class="userCard-head">asked Jan 24, 2017 at 9:46</div>
      <div class="userCard-body">
        <div class="userCard-body-photo">
          <a
            href="https://blog.csdn.net/mumuhaoshuai?spm=1010.2135.3001.5421"
            target="_blank"
          >
            <img src="/static/images/mountain.jpg" alt="" />
          </a>
        </div>
        <div class="userCard-body-info">
          <div class="userCard-body-info-username">
            <a
              href="https://blog.csdn.net/mumuhaoshuai?spm=1010.2135.3001.5421"
              target="_blank"
              >林林七</a
            >
          </div>
          <div class="userCard-body-info-reputation">
            <span style="color: 6A737C; font-weight: bold">1325</span>
            <span
              class="userCard-body-info-reputation-item"
              style="background-color: #ffcc01"
            ></span>
            50
            <span
              class="userCard-body-info-reputation-item"
              style="background-color: #b4b8bc"
            ></span>
            485
            <span
              class="userCard-body-info-reputation-item"
              style="background-color: #d1a684"
            ></span>
            666
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

.userCard {
    width: 200px;
    height: 67.69px;
    background-color: #D9EAF7;
    padding: 5px 6px 7px 7px;
    box-sizing: border-box;
}

.userCard-head {
    font-size: 12px;
    color: #6A737C;
    margin: 1px 0px 4px 0px;
}



.userCard-body-photo img {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    float: left;
}

.userCard-body-info {
    width: 147;
    height: 34.8;
    margin: 0px 0px 0px 8px;
    float: left;
}

.userCard-body-info-username {
    width: 66.25px;
    height: 15.2px;
    line-height: 15.2px;
}

.userCard-body-info-username a {
    text-decoration: none;
    font-size: 13px;
    color: #0074CC;
}

.userCard-body-info-reputation {
    height: 19.6px;
    line-height: 19.6px;
    font-size: 12px;
    color: #838C95;

}

.userCard-body-info-reputation-item {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    margin: 0 3px 0 2px;
    position: relative;
    top: -1px;
}