100DayCss 第一天教程

结构分析

那么我们的html结构就呼之欲出了

<div class="day1">
    <div class="box">
      <div class="one">
        <div class="one-p"></div>
      </div>
      <div class="zero"></div>
      <div class="zero"></div>
    </div>
    <div class="bottom">
      <h1>DAYS</h1>
      <h2>CSS CHALLENGE</h2>
    </div>
  </div>

day1是整个框架父类，包含了背景

在box类中有三个元素，one，zero，zero分别对应着1，0，0

bottom里面的是两个文字元素

样式分析

背景

从左下角的深蓝色到右上角的浅蓝色

background: linear-gradient(to top right, #43389F 0%, #4ec6ca 100%);

然后中间的100和文字都是要水平垂直居中的

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

100的样式

我们先从简单的两个0开始，0的样式是一个同心圆

就相当于是一个圆形透明的元素包含一个厚厚的边框

.zero{
  width: 100px;
  height:100px;
  border-radius: 50%;
  margin-left: -10px;
  background-color: transparent;
  border: #fff 24px solid;
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
}

然后是1的样式

我们要把这个小长方形做一个absolute绝对定位，让他定位在这个大长方形上面，

再给它一个rotate旋转

    position: absolute;
    top: 0;
    left: -16px;
    height: 40px;
    width: 20px;
    background: #fff;
    border-radius: 3px;
    transform: rotate(50deg);
    box-shadow: 0 0 13px 0 rgba(0, 0, 0,0.2);
  

但是我们就会发现子元素在父元素的上方，而如果并列同级的话又不方便调整距离

这时就有一个很好的解决办法

在mdn文档中，提到了一个名词叫做层叠上下文

 当我们给父元素设置z-index时，子元素就会不与父元素比较z-index，而是默认覆盖在父元素上面

当我们给父元素设置z-index:auto或者不设置z-index，父元素是会和子元素进行z轴的比较的，父元素不设置z-index/auto的时候，他的默认z-index是0，而我们将子元素的z-index设置为-1即可

但是，父元素的z-index不能设置为0，一旦为0，也是创建了层叠上下文，一旦创建层叠上下文，子元素就会直接不比较z-index直接覆盖在父元素上面

所以：1的完整样式如下

.one{
  position: relative;
  height: 100px;
  width: 24px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
  z-index: auto;
  &-p{
    position: absolute;
    top: 0;
    left: -16px;
    height: 40px;
    width: 20px;
    background: #fff;
    border-radius: 3px;
    transform: rotate(50deg);
    box-shadow: 0 0 13px 0 rgba(0, 0, 0,0.2);
    z-index: -1;
  }
}

(因为我用了sass，解释一下这个&-p的意思，&意为上一级的名称，&在此处对应的就是 .one,&-p对应的就是.one-p ，sass里面的嵌套编译为css就是 .one .one-p{} )

你也可以理解为这样：

.one{
  position: relative;
  height: 100px;
  width: 24px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
  z-index: auto;
  
}
.one .one-p{
    position: absolute;
    top: 0;
    left: -16px;
    height: 40px;
    width: 20px;
    background: #fff;
    border-radius: 3px;
    transform: rotate(50deg);
    box-shadow: 0 0 13px 0 rgba(0, 0, 0,0.2);
    z-index: -1;
  }

那么此时，我们的100长这样

我们要把它变成这样

这里有2处区别：

1. 第二个0应该覆盖在第一个上面
2. 右边的0离左边的0太远了

我们直接给他们两个设置一下内联样式就好了

<div class="zero" style="z-index: -1;"></div>
<div class="zero" style="z-index: -2;margin-left: -20px;"></div>

margin-left设置负数就是往左挪20px

后面的文字

对于后面这些文字的样式，虽然看着花哨，但是其实就是一个字体花了一点

font-family: "Courier New"

然后就是一个文字大小，加粗，行高，以及字间距的设置了

在标答里面，还有一个很奇怪的属性

  -webkit-font-smoothing: antialiased;

经过上网搜寻，这是一个抗锯齿属性，让字体的转角更平滑 

.bottom{
  font-family: "Courier New", "Courier", sans-serif;
  color: #fff;
  h1{
    font-size: 82px;
    line-height: 60px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 6px;
    margin-bottom: 0;
  }
  h2{
    font-size: 23px;
    line-height: 20px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
}

完整代码如下

<script setup>
</script>
<template>
  <div class="day1">
    <div class="box">
      <div class="one">
        <div class="one-p"></div>
      </div>
      <div class="zero" style="z-index: -1;"></div>
      <div class="zero" style="z-index: -2;margin-left: -20px;"></div>
    </div>
    <div class="bottom">
      <h1>DAYS</h1>
      <h2>CSS CHALLENGE</h2>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.day1{
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top right, #43389F 0%, #4ec6ca 100%);
  position: relative;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.zero{
  width: 100px;
  height:100px;
  border-radius: 50%;
  margin-left: -10px;
  background-color: transparent;
  border: #fff 24px solid;
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
}
.one{
  position: relative;
  height: 100px;
  width: 24px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
  z-index: auto;
  &-p{
    position: absolute;
    top: 0;
    left: -16px;
    height: 40px;
    width: 20px;
    background: #fff;
    border-radius: 3px;
    transform: rotate(50deg);
    box-shadow: 0 0 13px 0 rgba(0, 0, 0,0.2);
    z-index: -1;
  }
}
.box{
  padding-left:20px ;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom{
  font-family: "Courier New", "Courier", sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  h1{
    font-size: 82px;
    line-height: 60px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 6px;
    margin-bottom: 0;
  }
  h2{
    font-size: 23px;
    line-height: 20px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
}
</style>