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

每日一练1年前 (2023)更新 admin

2,347 2 11

我们的【每日一练】的练习案例很快就要完成第二个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;

}

}

写在最后

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

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

# 每日一练 # 练习项目 # 前端代码 # 每日一练

© 版权声明

文章版权归作者所有，未经允许请勿转载。

相关文章

【每日一练】201—一款现代费用计算器的实现

admin

1,723 10

【每日一练】244—JS实现一款旋转图片库效果

admin

3,580 4

【每日一练】103—纯CSS实现的一款炫酷卡片效果

admin

3,097 4

【每日一练】159—CSS实现一个列表

admin

2,350 6

【每日一练】212—掷骰子模拟器

admin

1,655 8

【每日一练】213—食谱书应用程序

admin

1,929 7

2 条评论

chen 游客

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

1年前 (2023)

回复
- admin
  
  样式代码拷贝全了，文件也要跟HTML里的文件命名一致。
  
  1年前 (2023)
  
  回复

【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】

友链申请免责声明广告合作关于我们

Copyright © 2024 【web前端开发】公号平台官网平台