50projects50days/index/css/style.css

/* 全局设置 */

*, a, p {
  text-decoration : none;
  transition : .3s;
  color : #009800;
  user-select : none;
  font-family : 'MiSans', sans-serif;
}

a:hover {
  color : #009800;
}

.cards {
  transition : .5s;
}

.cards:hover {
  transform : scale(1.01);
  transition : .5s;
}

.cards:active {
  transform : scale(.95);
  transition : .5s;
}

.main {
  width : 100%;
  margin : 10px;
  /*border : 1px solid black;*/
  display : flex;
}

.left {
  width : 20%;
  min-width : 320px;
  margin : 10px;
  /*border : 1px solid black;*/
  display : flex;
  flex-direction : column;
}

.right {
  width : 80%;
  min-width : 500px;
  margin : 10px;
  /*border : 1px solid black;*/
  display : flex;
  background : rgba(0, 0, 0, 5%);
  /*backdrop-filter : blur(10px);*/
  padding : 0rem;
  border-radius : 6px;
}

.father {
  width : auto;
  /*height: 500px;*/
  margin : 0px;
  /*border : 1px solid black;*/
  padding : 0px;
  display : flex;
  flex-direction : column;
  /* 主轴排列方向 */
  /* flex-direction: row; */
  /* flex-direction: row-reverse; */
  /* flex-direction: column; */
  /* flex-direction: column-reverse; */
  /* 元素换行 */
  /* flex-wrap : wrap; */
  /* 在主轴上的对齐方式 */
  /* 右对齐 */
  /* justify-content: flex-end; */
  /* 居中 */
  /* justify-content: center; */
  /* 左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。 */
  /* justify-content: space-between; */
  /* 项目之间间距为左右两侧项目到容器间距的2倍 */
  /* justify-content: space-around; */
  /* 项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。 */
  /* justify-content: space-evenly; */
  /* 轴 */
  /* align-items: flex-end; */
  /* align-items: center; */
  /* align-items: baseline; */
}


/* 控制行，设置为弹性盒子 */

.son {
  display : flex;
  /* 设置主轴对齐方式 */
  justify-content : space-around;
}


/* 控制图片和文字行 */

.second {
  background : rgb(0 0 0 / 5%);
  /*backdrop-filter : blur(10px);*/
  padding : .5rem;
  border-radius : 6px;
  margin : 5px;
  /* 设置每个格子比例大小 */
  width : 25%;
  /* 文字居中 */
  text-align : center;
  cursor : pointer;
}

.second:hover {
  background-color : #009800;
  color : #FFFFFF !important;
}

.second img {
  width : 100%;
  min-width : 60px;
}

.logo {
  width : 100%;
  text-align : center;
}

.logo img {
  width : 100%;
  min-width : 60px;
}


/*头像*/

.main-img {
  display : flex;
  align-items : center;
  max-height : 200px;
}

.main-img img {
  border-radius : 5%;
  width : 120px;
}

.main-img img:hover {
  transform : rotate(360deg);
}

.img-title {
  width : 100%;
  margin-left : 12px;
}

span.img-title {
  font-size : 3rem;
  color : #009800;
  font-family : 'Pacifico-Regular' !important;
}

span.img-text {
  font-size : 2rem;
  font-family : 'Pacifico-Regular' !important;
}

.message {
  background : rgb(0 0 0 / 5%);
  backdrop-filter : blur(10px);
  /*margin: 0.5rem;*/
  padding : 1rem;
  border-radius : 6px;
  /*margin-top : 3.5rem;*/
  width : auto;
  cursor : pointer;
}


/*自适应*/


/*小于1200px时*/

@media (max-width: 1200px) {
}


/*小于1000px时*/

@media (max-width: 1000px) {
  .main {
    width : 100%;
    margin : 10px;
    /*border : 1px solid black;*/
    display : flex;
    flex-direction : column;
  }
  .left {
    width : auto;
    min-width : 500px;
    margin : 10px;
    /*border : 1px solid black;*/
    display : flex;
    flex-direction : column;
  }
  .right {
    width : auto;
    min-width : 500px;
    margin : 10px;
    /*border : 1px solid black;*/
    display : flex;
  }
  .main-img {
    width : 100%;
    display : flex;
    align-items : center;
    max-height : 200px;
  }
  .message {
    background : rgb(0 0 0 / 5%);
    backdrop-filter : blur(10px);
    /*margin: 0.5rem;*/
    padding : 1rem;
    border-radius : 6px;
    width : auto;
    cursor : pointer;
  }
}