自定义属性

1. 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>CSS Variables</title>
</head>
<body>
  <header>
    <h1>欢迎来到铄洋在线</h1>
  </header>
  <div class="container">
    <div class="box box-1">
      <h3>标题</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, cupiditate fugiat! Quas, ea reiciendis fuga sequi voluptatum dolorem! Fuga vel laborum dolore officia quaerat maxime? Ipsum libero fugiat exercitationem culpa!</p>
    </div>
    <div class="box box-2">
      <h3>标题</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, cupiditate fugiat! Quas, ea reiciendis fuga sequi voluptatum dolorem! Fuga vel laborum dolore officia quaerat maxime? Ipsum libero fugiat exercitationem culpa!</p>
    </div>
  </div>
</body>
</html>

2. css 样式

:root {
      --lignt--color: #f4f4f4;
      --primary--color: steelblue;
      --secondary--color: skyblue;
      --max--width: 1100px;
      --box-1-width: 1;
      --box-2-width: 2;
    }
    * {
      padding: 0;
      margin: 0;
    }
    body{
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.4;
      background-color: var(--lignt--color);
    }
    header {
      background-color: var(--primary--color);
      color: #fff;
      border-bottom: 5px var(--secondary--color) solid;
      text-align: center;
    }
    .container {
      display: flex;
      margin: 0 auto;
      max-width: var(--max--width);
    }
    .box {
      --box-1-width: 3;
      --box-2-width: 1;
      background-color: var(--primary--color);
      border-bottom: 5px var(--secondary--color) solid;
      color: #ffffff;
      padding: 1rem;
      margin: 1rem;
    }
    .box-1 {
      flex: var(--box-1-width);
    }
    .box-2 {
      flex: var(--box-2-width);
    }

3. 重点

: root {

这里面专门写自定义属性的

--lignt--color: #f4f4f4;

}

 

posted @ 2022-03-26 09:51  会前端的洋  阅读(72)  评论(0)    收藏  举报