[移动开发] Web实现：flex弹性布局微博左侧栏数据

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> Web实现：flex弹性布局微博左侧栏数据 -> 正文阅读

[移动开发]Web实现：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>Flex 布局</title>
  </head>
  <body>
    <ul>
      <li class="focus">
        <div>
          <div class="number">524</div>
          <div class="text">关注</div>
        </div>
      </li>
      
      <li class="fan">
        <div>
          <div class="number">18705761</div>
          <div class="text">粉丝</div>
        </div>
      </li>
      
      <li class="weibo">
        <div>
          <div class="number">1650</div>
          <div class="text">微博</div>
        </div>
      </li>
    </ul>
  </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;
}

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

ul {
  display: flex;
  width: 300px;
  height: 60px;
  align-items: center;

  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

li {
  flex: 1;
  border-left: 1px solid #d9d9d9;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

li:first-child {
  border: none;
}

li .number {
font-size: 12px;
color: #333333;
  line-height: 14px;
  margin-bottom: 6px;
}

li .text {
font-size: 12px;
color: #868686;
  line-height: 14px;
}