技巧与窍门

1<body>
2    <div class="layoutWrapper">
3        <!-- 布局的其余部分 -->
4    </div>
5</body>

1.layoutWrapper {
2  margin: 0 auto;
3  width: 1000px;
4}

1@media (max-width: 800px) {
2  .d-flex {
3    display: block;
4  }
5}

1<div class="d-flex d-blockM">
2  ...
3</div>

1@media (max-width: 800px) {
2  .d-blockM {
3    display: block;
4  }
5}

1<div class="container">
2    ...
3</div>

1.container-narrow {
2  max-width: 400px;
3}

1<div class="container container-narrow">
2    ...
3</div>

1div.someClass {
2  /* 一些代码 */
3}

1.someClass {
2  /* 一些代码 */
3}

1.shadow1 {
2  box-shadow: 5px 5px 5px 5px lightgray;
3}

1.text-shadow1 {
2  text-shadow: 10px 10px tomato;
3}

1div {
2  background: rgb(255, 255, 255);
3}

1div {
2  background: rgba(0, 0, 0, 1);
3}

1div {
2  background: hsl(0, 100%, 50%);
3}

1div {
2  background: hsl(0, 100%, 50%, 1);
3}

1div {
2  background: hsl(0, 100%, 50%, 0.9);
3}

1filter: grayscale(1);