Web实现：flex弹性布局微博个人页明星势力榜案例

最新推荐文章于 2024-02-22 16:53:56 发布

jasmyn518

最新推荐文章于 2024-02-22 16:53:56 发布

阅读量171

点赞数

分类专栏： HTML CSS 笔记

本文链接：https://blog.csdn.net/jasmyn518/article/details/124055758

版权

css 前端

笔记同时被 3 个专栏收录

127 篇文章 4 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

效果图：flex弹性布局微博个人页明星势力榜
flex
HTML部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./index.css">
    <title>Document</title>
  </head>
  <body>
    <div class="ranking">
      <div class="title">
        <div class="name">明星势力榜</div>
        <div class="love">
          <span class="lovenum">39938</span>
          <span class="text">爱慕值</span>
        </div>
      </div>

      <div class="flower">
        <div class="fl-info">
          <div>
            <div class="fl-info-text">已经收到 <b>299104</b> 朵花</div>
            <div class="fl-info-btn">立即送花</div>
          </div>
          <div class="fl-info-avatar"></div>
        </div>
        <div class="fl-rule">
          送花可增加明星的爱慕值，帮助明星在微博中获得更多曝光机会。
        </div>
        <div class="fl-ranking">
          我是娜扎 内地榜排行 <b>第51名</b>
          <a href="#">去看看?</a>
        </div>
      </div>
    </div>
  </body>
</html>

CSS部分：

html,
body {
  height: 100%;
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}

h1,
h2 {
  margin: 0;
}

p {
  margin: 0;
  padding: 0;
}

/* 浏览器都有自己的默认样式，以上部分为清除浏览器默认样式 */

.ranking {
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  background: #fff;
  width: 300px;
  margin: 0 auto;
  margin-top: 15px;
}

.ranking .title {
  height: 39px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  padding: 0 16px;
}

.ranking .title .name {
  font-weight: 500;
}

.ranking .title .love {
  font-weight: normal;
}

.ranking .title .love .lovenum {
  color: #ff830a;
  font-size: 14px;
}

.ranking .flower {
  padding: 12px 16px 11px;
  border-top: 1px solid #f2f2f5;
  font-size: 12px;
  color: #333333;
}

.ranking .flower .fl-info {
  margin-bottom: 11px;
  display: flex;
  justify-content: space-between;
}

.ranking .flower .fl-info .fl-info-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url(./images/avatar.png) no-repeat center / contain;
}

.ranking .flower .fl-info .fl-info-text {
  margin-bottom: 9px;
}

.ranking .flower .fl-info .fl-info-text > b {
  font-size: 14px;
}

.ranking .flower .fl-info .fl-info-btn {
  padding: 0 10px;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 26px;
  color: #fff;
  border-radius: 2px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
  background-color: #FF8140;
  border: 1px solid #f77c3d;
}

.ranking .flower .fl-rule {
  margin-bottom: 6px;
  color: #808080;
}

.ranking .flower .fl-ranking a {
  color: #EB7350;
  float: right;
  text-decoration: none;
}