HTML

首先把整体的html结构搭建起来

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Drink Water</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <h1>Drink Water</h1>
      <span>Goal: 2 Liters</span>
    </header>

    <section class="cup">
      <!-- 还有多少水没喝 -->
      <div class="remained">
        <!-- 记录还剩多少升水没喝 -->
        <span id="liters"></span>
        <small>Remained</small>
      </div>
      <!-- 已经喝了多少水 -->
      <div class="percentage"></div>
    </section>

    <p>请选择今日已引用的水量</p>

    <section class="cups">
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
    </section>

    <script src="index.js"></script>
  </body>
</html>

再写一些基础的样式，使用flex布局让整体纵向排列，并且沿交叉轴居中，目前效果如下：

接下来我们通过css来一点点完善我们的水杯

杯子轮廓

水杯并不是一个完整的矩形，它的底部两侧是有一定弧度的，这个可以通过border-radius的左下角和右下角的方向上的大小来实现

/* 杯子 */
.cup {
  background-color: white;
  border: 3px solid #144fc6;
  height: 300px;
  width: 150px;
  border-radius: 0 0 40px 40px;
}

/* 小型杯子 */
.cup.cup-small {
  width: 50px;
  height: 100px;
}

/* 底部杯子容量选择 */
.cups {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 5px;
}

底部的杯子是二维的结构，更适合用grid布局，别再flex布局一把梭了，多维度的情况果断选择更适合的grid布局吧！效果图如下

「原生练手」夏日炎炎，喝口水叭~

HTML

杯子轮廓