<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS 值和单位</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="length-simple">
      <p>这是一个段落</p>
      <p>这是一个段落</p>
      <p>这是一个段落</p>
    </div>

    <hr>

    <div id="unitless">
      <p>轻轻地我走了，正如我轻轻地来，挥一挥手，不带走一片云彩。</p>
    </div>

    <hr>

    <div id="animation">
      <p>你好</p>
    </div>

    <hr>

    <div id="percentage">
      <div>像素定宽布局</div>
      <div>百分比流动布局</div>
    </div>

    <hr>

    <div id="color">
      <p>这是一个红色背景的段落</p>
      <p>这是一个蓝色背景的段落</p>
      <p>这是一个丁香紫色背景的段落</p>
    </div>

    <hr>

    <div id="length-playground">
      <div class="outer">
        <div class="inner">
        </div>
      </div>
    </div>

    <hr>

    <div id="color-playground">
      <div class="first">
      </div>
      <div class="second">
      </div>
      <div class="third">
      </div>
    </div>

  </body>
</html>