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

每日一练1年前 (2023)发布 admin

2,378 0 4

写在前面

这个列表是采用<ol>标签实现的，虽然它在一般开发中使用频率不高，但是，我个人觉得好还是非常实用的。因为在有些时候，我们用<ol>标签比用<ul>标签更加快捷。

当然，最终选择那个标签，我们还是需要更加实际开发需求来，没有统一标准答案。

现在，我们就一起来看一下今天这个使用<ol>实现的最终效果：

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

HTML：

<!DOCTYPE html>

<html lang=”en” >

<head>

<meta charset=”UTF-8″>

<title>【每日一练】163—CSS实现每日一练列表</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<h1>web前端开发每日一练案例源码列表</h1>

<ol class=”ol-days” style=”–month:’练习'”>

<li>圆形水滴卡片UI的效果</li>

<li>输入文本动画的效果</li>

<li>炫酷卡片效果</li>

<li>微交互菜单的实现</li>

<li>实现动画循环进度</li>

<li>加载动画效果</li>

<li>圆形水滴卡片UI的效果</li>

<li>炫酷卡片效果</li>

<li>微交互菜单的实现</li>

<li>圆形水滴卡片UI的效果</li>

<li>炫酷卡片效果</li>

<li>炫酷卡片效果</li>

<li>输入文本动画的效果</li>

<li>实现动画循环进度</li>

<li>发光按钮Hover效果</li>

<li>圆形水滴卡片UI的效果</li>

<li>炫酷卡片效果</li>

<li>微交互菜单的实现</li>

<li>炫酷卡片效果</li>

<li>炫酷卡片效果</li>

<li>实现动画循环进度</li>

<li>圆形水滴卡片UI的效果</li>

<li>炫酷卡片效果</li>

<li>微交互菜单的实现</li>

<li>圆形水滴卡片UI的效果</li>

<li>炫酷卡片效果</li>

<li>输入文本动画的效果</li>

<li>炫酷卡片效果</li>

<li>实现动画循环进度</li>

<li>发光按钮Hover效果</li>

</ol>

</body>

</html>

CSS:

body {

font-family: “Oswald”, sans-serif;

background-color: hsl(0, 0%, 90%);

color: hsl(0, 0%, 10%);

}

h1 {

text-align: center;

}

.ol-days,

.ol-days * {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.ol-days {

width: max-content;

max-width: 100%;

margin-inline: auto;

display: flex;

flex-direction: column;

gap: 0.25em;

font-size: clamp(1rem, 5vw, 2rem);

color: hsl(0, 0%, 90%);

list-style: none;

counter-reset: ol-days-counter;

}

.ol-days > li {

counter-increment: ol-days-counter;

padding-inline: 1em;

display: grid;

grid-template-columns: min-content min-content auto;

align-items: center;

background: linear-gradient(

hsla(0 0% 100% / 0.2),

transparent 50%,

hsla(0 0% 0% / 0.3)

),

var(–clr_bg);

text-align: right;

transition: transform 250ms ease;

cursor: default;

}

.ol-days > li:hover {

transform: scale(1.05);

}

.ol-days > li::before,

.ol-days > li::after {

display: grid;

align-items: center;

grid-row: 1;

text-align: left;

}

.ol-days > li::before {

content: var(–month);

grid-column: 1;

padding-inline-end: 0.25em;

}

.ol-days > li::after {

content: counter(ol-days-counter, decimal-leading-zero);

grid-column: 2;

width: 1.75em;

height: 3.5em;

background-image: linear-gradient(

90deg,

rgba(0, 0, 0, 0.3),

rgba(0, 0, 0, 0) 25%

),

radial-gradient(

circle at 0.125em center,

var(–clr_accent) 1.25em,

transparent calc(1.25em + 1px)

);

padding-inline-start: 0.1em;

}

.ol-days > li:nth-child(even)::before {

padding-inline-start: 1.25em;

}

.ol-days > li:nth-child(6n + 1) {

–clr_bg: #2e2b3c;

–clr_accent: #fb6767;

}

.ol-days > li:nth-child(6n + 2) {

–clr_bg: #47505f;

–clr_accent: #c14755;

}

.ol-days > li:nth-child(6n + 3) {

–clr_bg: #37aa8d;

–clr_accent: #a1cc6f;

}

.ol-days > li:nth-child(6n + 4) {

–clr_bg: #8fb568;

–clr_accent: #566574;

}

.ol-days > li:nth-child(6n + 5) {

–clr_bg: #24b8b8;

–clr_accent: #c4b36a;

}

.ol-days > li:nth-child(6n + 6) {

–clr_bg: #fc6868;

–clr_accent: #2e2b3c;

}

写在最后

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

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

# 每日一练 # 练习项目

© 版权声明

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

相关文章

【每日一练】181—CSS实现的响应式定价表效果

admin

1,571 4

【每日一练】236—JS实现一款导航栏效果

admin

2,436 2

【每日一练】35—一个简单的弹出框效果的实现

admin

2,156 9

【每日一练】164—CSS实现一款银行卡UI设计

admin

2,478 4

【每日一练】187—一款大气漂亮的文章列表效果

admin

1,556 10

【每日一练】243—JS实现折叠效果

admin

2,715 5

暂无评论

暂无评论...

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

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

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