【每日一练】174—CSS实现文章目录片效果

每日一练11个月前更新 admin
1,883 2

我们的【每日一练】的练习案例很快就要完成第二个100个练习了,在写满第100个练习的时候,我们定了写满1000小练习的新目标,经过这么长时间的练习,希望你也早已养成了这个持续学习的习惯。

现在,我们还是来看一下今天练习的最终效果:

【每日一练】174—CSS实现文章目录片效果

HTML代码:

<!DOCTYPE html>

<html lang=”en” >
<head>
  <meta charset=”UTF-8″>
  <title>【每日一练】174练</title>
  <link rel=’stylesheet’ href=’https://rawcdn.githack.com/SochavaAG/example-mycode/master/_common/css/reset.css’><link rel=”stylesheet” href=”./style.css”>
</head>
<body>
<div class=”ag-format-container”>
  <div class=”ag-courses_box”>
    <div class=”ag-courses_item”>
      <a href=”http://www.webqdkf.com” class=”ag-courses-item_link”>
        <div class=”ag-courses-item_bg”></div>
        <div class=”ag-courses-item_title”>
          前端框架之VueJS
        </div>
        <div class=”ag-courses-item_date-box”>
          开始学习:
          <span class=”ag-courses-item_date”>
          2023.04.26
          </span>
        </div>
      </a>
    </div>
    <div class=”ag-courses_item”>
      <a href=”http://www.webqdkf.com” class=”ag-courses-item_link”>
        <div class=”ag-courses-item_bg”></div>
        <div class=”ag-courses-item_title”>
          前端框架之 AngularJS
        </div>
        <div class=”ag-courses-item_date-box”>
           开始学习:
          <span class=”ag-courses-item_date”>
            2023.04.26
          </span>
        </div>
      </a>
    </div>
    <div class=”ag-courses_item”>
      <a href=”http://www.webqdkf.com” class=”ag-courses-item_link”>
        <div class=”ag-courses-item_bg”></div>
        <div class=”ag-courses-item_title”>
          前端框架之ReactJS
        </div>
        <div class=”ag-courses-item_date-box”>
           开始学习:
          <span class=”ag-courses-item_date”>
            2023.04.26
          </span>
        </div>
      </a>
    </div>
    <div class=”ag-courses_item”>
      <a href=”http://www.webqdkf.com” class=”ag-courses-item_link”>
        <div class=”ag-courses-item_bg”></div>
        <div class=”ag-courses-item_title”>
          前端框架之TypeScript
        </div>
        <div class=”ag-courses-item_date-box”>
           开始学习:
          <span class=”ag-courses-item_date”>
            2023.04.26
          </span>
        </div>
      </a>
    </div>
    <div class=”ag-courses_item”>
      <a href=”http://www.webqdkf.com” class=”ag-courses-item_link”>
        <div class=”ag-courses-item_bg”></div>
        <div class=”ag-courses-item_title”>
          前端框架之NodeJS
        </div>
        <div class=”ag-courses-item_date-box”>
           开始学习:
          <span class=”ag-courses-item_date”>
            2023.04.26
          </span>
        </div>
      </a>
    </div>
    <div class=”ag-courses_item”>
      <a href=”http://www.webqdkf.com” class=”ag-courses-item_link”>
        <div class=”ag-courses-item_bg”></div>
        <div class=”ag-courses-item_title”>
          前端框架之jQuery
        </div>
        <div class=”ag-courses-item_date-box”>
          开始学习:
         <span class=”ag-courses-item_date”>
           2023.04.26
         </span>
       </div>
      </a>
    </div>
    <div class=”ag-courses_item”>
      <a href=”http://www.webqdkf.com” class=”ag-courses-item_link”>
        <div class=”ag-courses-item_bg”>
        </div>
        <div class=”ag-courses-item_title”>
          前端框架之Bootstrap
        </div>
        <div class=”ag-courses-item_date-box”>
          开始学习:
         <span class=”ag-courses-item_date”>
           2023.04.26
         </span>
       </div>
      </a>
    </div>
    <div class=”ag-courses_item”>
      <a href=”http://www.webqdkf.com” class=”ag-courses-item_link”>
        <div class=”ag-courses-item_bg”></div>
        <div class=”ag-courses-item_title”>
          前端框架之BackboneJS
        </div>
        <div class=”ag-courses-item_date-box”>
           开始学习:
          <span class=”ag-courses-item_date”>
            2023.04.26
          </span>
        </div>
      </a>
    </div>
    <div class=”ag-courses_item”>
      <a href=”http://www.webqdkf.com” class=”ag-courses-item_link”>
        <div class=”ag-courses-item_bg”>
        </div>
        <div class=”ag-courses-item_title”>
          前端框架之ZeptoJS
        </div>
        <div class=”ag-courses-item_date-box”>
          开始学习:
         <span class=”ag-courses-item_date”>
           2023.04.26
         </span>
       </div>
      </a>
    </div>
  </div>
</div>
</body>
</html>

CSS代码:

.ag-format-container {
  width: 1142px;
  margin: 0 auto;
}
body {
  background-color: #000;
}
.ag-courses_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 50px 0;
}
.ag-courses_item {
  -ms-flex-preferred-size: calc(33.33333% – 30px);
  flex-basis: calc(33.33333% – 30px);
  margin: 0 15px 30px;
  overflow: hidden;
  border-radius: 28px;
}
.ag-courses-item_link {
  display: block;
  padding: 30px 20px;
  background-color: #121212;
  overflow: hidden;
  position: relative;
}
.ag-courses-item_link:hover,
.ag-courses-item_link:hover .ag-courses-item_date {
  text-decoration: none;
  color: #FFF;
}
.ag-courses-item_link:hover .ag-courses-item_bg {
  -webkit-transform: scale(10);
  -ms-transform: scale(10);
  transform: scale(10);
}
.ag-courses-item_title {
  min-height: 87px;
  margin: 0 0 25px;
  overflow: hidden;
  font-weight: bold;
  font-size: 30px;
  color: #FFF;
  z-index: 2;
  position: relative;
}
.ag-courses-item_date-box {
  font-size: 18px;
  color: #FFF;
  z-index: 2;
  position: relative;
}
.ag-courses-item_date {
  font-weight: bold;
  color: #f9b234;
  -webkit-transition: color .5s ease;
  -o-transition: color .5s ease;
  transition: color .5s ease
}
.ag-courses-item_bg {
  height: 128px;
  width: 128px;
  background-color: #f9b234;
  z-index: 1;
  position: absolute;
  top: -75px;
  right: -75px;
  border-radius: 50%;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.ag-courses_item:nth-child(2n) .ag-courses-item_bg {
  background-color: #3ecd5e;
}
.ag-courses_item:nth-child(3n) .ag-courses-item_bg {
  background-color: #e44002;
}
.ag-courses_item:nth-child(4n) .ag-courses-item_bg {
  background-color: #952aff;
}
.ag-courses_item:nth-child(5n) .ag-courses-item_bg {
  background-color: #cd3e94;
}
.ag-courses_item:nth-child(6n) .ag-courses-item_bg {
  background-color: #4c49ea;
}
@media only screen and (max-width: 979px) {
  .ag-courses_item {
    -ms-flex-preferred-size: calc(50% – 30px);
    flex-basis: calc(50% – 30px);
  }
  .ag-courses-item_title {
    font-size: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .ag-format-container {
    width: 96%;
  }
}
@media only screen and (max-width: 639px) {
  .ag-courses_item {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
  .ag-courses-item_title {
    min-height: 72px;
    line-height: 1;
    font-size: 24px;
  }
  .ag-courses-item_link {
    padding: 22px 40px;
  }
  .ag-courses-item_date-box {
    font-size: 16px;
  }
}

写在最后

以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

© 版权声明

相关文章

2 条评论

  • chen
    chen 游客

    参照源码是做不出来的,样式表是不齐全的

    回复
    • admin

      样式代码拷贝全了,文件也要跟HTML里的文件命名一致。

      回复