Web实现：flex弹性布局微博左侧栏数据

最新推荐文章于 2024-05-22 12:04:08 发布

jasmyn518

最新推荐文章于 2024-05-22 12:04:08 发布

阅读量291

点赞数

分类专栏：笔记 CSS HTML 文章标签： css 前端

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

版权

笔记同时被 3 个专栏收录

127 篇文章 3 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

在微博个人主页左侧有关注，粉丝和微博数量这几个数据，当然改版之后有所变化，需要实现的效果图大概就是下图这样的：
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;
}

jasmyn518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web实现：flex弹性布局微博左侧栏数据

在微博个人主页左侧有关注，粉丝和微博数量这几个数据，当然改版之后有所变化，需要实现的效果图大概就是下图这样的：HTML部分：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta
复制链接

扫一扫