# 常用的 CSS 主流布局案例(41~48)

涵盖功能和技术点

  • 常见的网页布局以及功能模块
  • 涉及 HTML/HTML5、CSS/CSS3 主流布局相关知识点(常规布局和 Flex 布局等)
  • 专项 CSS 主流布局案例(针对性训练)

# 41、数字统计效果

应用场景和技术要点

重点:flex 布局

See the Pen 41、 数字统计效果 by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  .number {
    display: inline-flex;
    flex-direction: column; /*从上往下排列*/
    align-items: center;
  }
  .number-value {
    font-size: 60px;
    font-weight: 500;
  }
  .number-label {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase; /*大写字母*/
  }
</style>
<body>
  <div class="number">
    <span class="number-value">1K+</span>
    <span class="number-label">stars</span>
  </div>
</body>

# 42、时间轴效果(timeline)

应用场景和技术要点

重点:时间轴的布局原理,核心知识 position 定位与 float 浮动

See the Pen 42、时间轴效果(timeline) by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  body {
    margin: 0;
    background-image: linear-gradient(to right, #fdf1d8, #b1bbf9);
  }
  h3 {
    margin: 0;
    font-weight: 400;
  }
  /*清除浮动样式*/
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
  .time-axis {
    width: 804px;
    margin: 50px auto 0px;
  }
  /*时间轴左边区域*/
  .time-axis .left {
    width: 400px;
    float: left;
    border-right: 4px solid #b1bbf9;
    position: relative;
  }
  /*时间轴右边区域*/
  .time-axis .right {
    width: 400px;
    float: right;
    border-left: 4px solid #b1bbf9;
    position: relative;
  }
  /*时间轴线上圆点*/
  .time-axis .dot {
    width: 10px;
    height: 10px;
    background-color: #fff;
    display: block;
    border: 2px solid #b1bbf9;
    border-radius: 7px;
    position: absolute;
    top: 50%;
    margin-top: -7px;
  }
  .time-axis .left .dot {
    right: -9px;
  }
  .time-axis .right .dot {
    left: -9px;
  }
  /*时间轴线上三角形*/
  .time-axis .jiantou {
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -16px;
  }
  .time-axis .left .jiantou {
    right: 0px;
    background: url(images/r-jiantou.png);
  }
  .time-axis .right .jiantou {
    background: url(images/l-jiantou.png);
    left: 0px;
  }
  /*内容样式修饰*/
  .time-axis .con {
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
  }
  .time-axis .left .con {
    margin-right: 22px;
  }
  .time-axis .right .con {
    margin-left: 22px;
  }
</style>
<body>
  <div class="time-axis clearfix">
    <div class="left">
      <span class="dot"></span>
      <span class="jiantou"></span>
      <div class="con">
        <h3>时间轴内容在这里可以随便布局......</h3>
      </div>
    </div>
    <div class="right">
      <span class="dot"></span>
      <span class="jiantou"></span>
      <div class="con">
        <h3>时间轴内容在这里可以随便布局...</h3>
      </div>
    </div>
  </div>
</body>

# 43、表格首列冻结

应用场景和技术要点

重点:表格首列冻结原理,核心知识 position 定位

See the Pen 43、表格首列冻结 by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  .container {
    position: relative; /*相对定位*/
    width: 400px;
  }
  .scroll {
    overflow-x: scroll; /*x轴超出部分显示滚动条*/
  }
  .container table {
    border-collapse: collapse; /*合并单元格边框线*/
  }
  .container table tr th {
    min-width: 100px;
  }
  .container table tr td,
  table tr th {
    border: 1px solid #333;
    text-align: center;
    font-weight: 400;
  }
  /*冻结列相对于最外面container绝对定位*/
  table.header {
    position: absolute;
    left: 0px;
    top: 0px;
  }
  /*冻结列样式*/
  table.header tr td,
  table.header tr th {
    background-color: #ddd;
    font-weight: bold;
  }
</style>
<body>
  <div class="container">
    <div class="scroll">
      <table>
        <thead>
          <tr>
            <th class="header">分类</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
          </tr>
          <tr>
            <td>排行</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
          </tr>
        </thead>
      </table>
    </div>
    <!--冻结列的布局-->
    <table class="header">
      <thead>
        <tr>
          <th class="">分类</th>
        </tr>
        <tr>
          <td class="">排行</td>
        </tr>
      </thead>
    </table>
  </div>
</body>

# 44、表格首行冻结

应用场景和技术要点

重点:表格首行冻结原理,核心知识 position 定位

See the Pen 44、表格首行冻结 by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  .container {
    position: relative; /*相对定位*/
  }
  .scroll {
    overflow-y: scroll; /*x轴超出部分显示滚动条*/
    height: 100px;
  }
  .container table {
    width: 100%;
    border-collapse: collapse; /*合并单元格边框线*/
  }
  .container table tr td,
  table tr th {
    border: 1px solid #333;
    text-align: center;
    font-weight: 400;
  }
  /*冻结列相对于最外面container绝对定位*/
  table.header {
    width: calc(100% - 17px);
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
  }
  /*冻结列样式*/
  table.header tr td,
  table.header tr th {
    background-color: #ddd;
    font-weight: bold;
  }
</style>
<body>
  <div class="container">
    <div class="scroll">
      <table>
        <thead>
          <tr>
            <th>分类</th>
            <th>排行</th>
            <th>歌曲</th>
            <th>歌手</th>
            <th>时间</th>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
          </tr>
        </thead>
      </table>
    </div>
    <!--冻结列的布局-->
    <table class="header">
      <thead>
        <tr>
          <th>分类</th>
          <th>排行</th>
          <th>歌曲</th>
          <th>歌手</th>
          <th>时间</th>
        </tr>
      </thead>
    </table>
  </div>
</body>

# 45、泪滴效果

应用场景和技术要点

重点:flex 布局,transform 旋转、linear-gradient 线性渐变

See the Pen 45、泪滴效果 by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  .teardrop {
    /* 子项内容居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 绘制泪滴效果 */
    height: 64px;
    width: 64px;
    border-radius: 0px 50% 50% 50%;
    /* 顺时针旋转45deg */
    transform: rotate(45deg);
    /*绘制背景*/
    background-image: linear-gradient(
      rgb(246, 69, 69, 0.8),
      rgb(246, 69, 69, 0.9),
      rgb(246, 69, 69, 0.7)
    );
    margin-top: 20px;
  }
  .teardrop-content {
    transform: rotate(-45deg);
    color: #fff;
  }
</style>
<body>
  <div class="teardrop">
    <div class="teardrop-content">热销</div>
  </div>
</body>

# 46、3D 卡片效果

应用场景和技术要点

重点:position 定位、transform 位移和斜切

See the Pen 46、3D卡片效果 by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  :root {
    --three-dimensions-card-left-side-width: 16px;
  }
  .three-dimensions-card {
    position: relative;
    min-height: 100px;
    width: 300px;
    margin: 50px auto;
    border: 1px solid #ddd;
    padding: 10px;
  }
  /* 左边阴影 */
  .three-dimensions-card::before {
    content: "";
    background: #ddd;
    position: absolute;
    top: var(--three-dimensions-card-left-side-width);
    left: 0px;
    transform: translate(-100%, 0) skewY(-47deg); /*位移和斜切*/
    transform-origin: left top;
    height: 100%;
    width: var(--three-dimensions-card-left-side-width);
  }
  /* 底部阴影 */
  .three-dimensions-card::after {
    background: rgba(0, 0, 0, 0.3);
    content: "";
    /* Position */
    position: absolute;
    bottom: 0px;
    left: 0px;
    transform: translate(0, 100%) skewX(-45deg);
    transform-origin: left top;
    height: var(--three-dimensions-card-left-side-width);
    width: 100%;
  }
</style>
<body>
  <div class="three-dimensions-card">...</div>
</body>

# 47、时间轴

应用场景和技术要点

重点:position 定位

See the Pen 47、时间轴 by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  ul,
  li {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
  }
  .timeline {
    position: relative;
  }
  .timeline .line {
    height: 100%;
    border-right: 2px solid pink;
    position: absolute;
    left: 10px; /*值为是圆的半径大小*/
    top: 0px;
    z-index: -1; /*时间线在最下面*/
  }
  .item {
    margin-bottom: 18px; /*每一项间距*/
  }
  .item-top {
    display: flex;
    align-items: center;
  }
  .item-top-circle {
    height: 20px;
    width: 20px;
    border-radius: 9999px;
    background-color: pink;
  }
  .item-top-title {
    flex: 1;
    padding-left: 10px;
    line-height: 35px;
  }
  .item-content {
    margin-left: 40px;
    background-color: pink;
    min-height: 100px;
  }
</style>
<body>
  <div class="timeline">
    <!--左侧垂直时间线 -->
    <div class="line"></div>
    <!-- 时间线上第一项内容 -->
    <ul class="timeline-list">
      <!-- 每一项内容 -->
      <li class="item">
        <!-- 每一项圆点和标题 -->
        <div class="item-top">
          <div class="item-top-circle"></div>
          <div class="item-top-title">标题......</div>
        </div>
        <!-- 每项主体内容 -->
        <div class="item-content">...</div>
      </li>
      <li class="item">
        <div class="item-top">
          <div class="item-top-circle"></div>
          <div class="item-top-title">标题......</div>
        </div>
        <div class="item-content">...</div>
      </li>
    </ul>
  </div>
</body>

# 48、树状结构思维导图

应用场景和技术要点

重点:树状结构图绘制原理,涉及::before、::after 、first-child、last-child、position 定位、flex 布局

See the Pen 48、树状结构思维导图 by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  ul {
    list-style-type: none;
    margin: 0;
  }
  .tree-diagram ul {
    display: flex;
    position: relative;
    padding: 20px 10px 0px 10px;
  }
  /*层级竖线*/
  .tree-diagram ul ul::before {
    content: "";
    border-right: 1px solid red;
    position: absolute;
    top: 0;
    right: 50%;
    height: 20px;
    width: 50%;
  }
  .tree-diagram li {
    padding: 20px 10px 0px 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /*每项上方横线和右方竖线*/
  .tree-diagram li::before {
    content: "";
    height: 20px;
    width: 50%;
    border-right: 1px solid blue;
    border-top: 1px solid #333;
    /* Position */
    position: absolute;
    top: 0;
    right: 50%;
  }
  /*每项上方横线*/
  .tree-diagram li::after {
    border-top: 1px solid blue;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
  }
  /* 移除第一项和最后一项上方横线*/
  .tree-diagram li:first-child::before,
  .tree-diagram li:last-child::after {
    border-top: none;
  }
  /*去掉根节点上方竖线*/
  li.tree-diagram__root::before {
    border-right: none;
  }
</style>
<body>
  <div class="tree-diagram">
    <ul>
      <li class="tree-diagram__root">
        结构01-1...
        <ul>
          <li>
            结构02-1...
            <ul>
              <li>结构03-1</li>
              <li>结构03-2</li>
              <li>
                结构03-3
                <ul>
                  <li>结构04-1</li>
                  <li>结构04-2</li>
                  <li>结构04-3</li>
                </ul>
              </li>
            </ul>
          </li>
          <li>结构02-2...</li>
        </ul>
      </li>
    </ul>
  </div>
</body>
上次更新时间: 6/8/2023, 9:23:17 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群,获取资料

X