css-skill 之hotTip🍀🌱效果哪里有那么多废话，干就完了！！！！ Code 使用grid进行布局借助

🌱效果

哪里有那么多废话，干就完了！！！！

Code

使用grid进行布局
借助 ::before && ::after描述两边的line

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body {
          margin: 0;
          padding: 0;
          width: 100vw;
          height: 100vh;
          background: linear-gradient(rgb(75, 75, 188), pink);
        }
        
        div.hot_tip {
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          gap: 20px;
          align-items: center;
          color: #fff;
        }
        div.hot_tip::before {
          content: '';
          height: 4px;
          background: linear-gradient(to right, gold, red);
        }
        div.hot_tip::after {
          content: '';
          height: 4px;
          background: linear-gradient(to right, red, gold);
        }
    </style>
  </head>
  <body>
    <div class="hot_tip">业精于勤，荒于嬉。</div>
    <div class="hot_tip">天行健，君子以自强不息</div>
    <div class="hot_tip">一寸光阴一寸金，寸金难买寸光阴。</div>
  </body>
</html>

启发

收获一个页面布局设计
没有启发也要强行说一句，养成习惯（固化）