我是怎样的我自己？ -

1 效果

2 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>当快乐装进盒子</title>
    <style>
      h1 {
        border: 1em solid violet;
        border-left: 2em solid violet;
        border-right: 2em solid violet;
        border-bottom: 3em solid violet;
        border-radius: 1em;
        text-align: center;
      }
      h1 {
        font-size: 16px;
      }
      header p {
        box-sizing: border-box;
        padding-top: 1em;
        padding-bottom: 2em;
        border: thistle 0.1em solid;
        color: #fff;
        background-color: black;
        text-align: center;
        line-height: 1.8em;
      }
      main {
        height: 12em;
      }
      footer p {
        box-sizing: border-box;
        border: yellowgreen 1em solid;
        text-align: center;
        color: #fff;
        background-color: yellowgreen;
        text-decoration: underline;
        font-weight: bold;
        border-bottom-left-radius: 1em;
        border-bottom-right-radius: 1em;
      }
      .box {
        box-sizing: border-box;
        margin-top: 0.5em;
        width: 10em;
        height: 1.5em;
        background-color: chartreuse;
        text-align: center;
      }
      .right {
        position: relative;
        top: -12.47em;
        left: 12em;
      }
      .box-row {
        width: 25em;
        height: 1.5em;
        margin-top: 1em;
        box-sizing: content-box;
        background-color: aquamarine;
        color: #fff;
      }
      .box-sub {
        margin-top: 0em;
        height: 1.4em;
      }
      .box-sub-right {
        position: relative;
        top: -2.4em;
        left: 11em;
        width: 14em;
        /* width: auto; */
      }
    </style>
  </head>
  <body>
    <header>
      <h1>当快乐装进盒子</h1>
      <h1>人生就有了弹性</h1>
      <p>
        如果朱老师的盒子是最好的盒子，<br />
        我们就有了方向。<br />
        如果朱老师还告诉了我们很多很好的盒子，<br />
        我们会有很多幸福的可能性！
      </p>
    </header>
    <main>
      <section class="left">
        <div class="box"><p>元素</p></div>
        <div class="box"><p>类</p></div>
        <div class="box"><p>ID</p></div>
        <div class="box"><p>!important</p></div>
        <div class="box"><p>脚本</p></div>
      </section>
      <section class="right">
        <div class="box box-row">
          <div class="box box-sub"><p style="color: red">朱老师说话很亲切</p></div>
          <div class="box box-sub box-sub-right">
            <p style="color: rebeccapurple">听着感觉自己在写代码</p>
          </div>
        </div>
        <div class="box box-row">
          <div class="box box-sub"><p style="color: red">朱老师讲的很深入</p></div>
          <div class="box box-sub box-sub-right"><p style="color: rebeccapurple">从值到规则集生动鲜活</p></div>
        </div>
        <div class="box box-row">
          <div class="box box-sub"><p style="color: red">朱老师不愧是朱老师</p></div>
          <div class="box box-sub box-sub-right"><p style="color: rebeccapurple">业内佼佼者我们的好榜样</p></div>
        </div>
        <div class="box box-row">
          <div class="box box-sub"><p style="color: red">朱老师在挑战自己</p></div>
          <div class="box box-sub box-sub-right"><p style="color: rebeccapurple">从传统讲法升级成实例讲法</p></div>
        </div>
        <div class="box box-row">
          <div class="box box-sub"><p style="color: red">朱老师写给我们看</p></div>
          <div class="box box-sub box-sub-right"><p style="color: rebeccapurple">希望桃李的芬芳到处是足迹</p></div>
        </div>
      </section>
    </main>
    <footer>
      <p>我是怎样的我自己？</p>
    </footer>
  </body>
</html>
3 总结

进入代码中感觉很是幸福，回到生活中发现，美是一样的。
CSS	等于	生活
元素	===	五官
类	===	职业
id	===	能力
重要	===	感情
脚本	===	人生