【每日一练】182 — CSS实现响应式自定义列表属性效果

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

今天练习的最终效果如下:

【每日一练】182 — CSS实现响应式自定义列表属性效果

HTML代码:

<!DOCTYPE html>
<html lang=”en” >
<head>
<meta charset=”UTF-8″>
<title>【每日一练】182 — CSS实现自定义属性步骤</title>
<link rel=”stylesheet” href=”style.css”>

</head>
<body>
<ol style=”–length: 5″ role=”list”>
<li style=”–i: 1″>
<h3>第一步:HTML+CSS</h3>
<p>作为前端工程师,需要掌握哪些技能?掌握HTML和CSS的基础知识,能够编写符合标准的网页。</p>
</li>
<li style=”–i: 2″>
<h3>第二步:JavaScript</h3>
<p>作为前端工程师,需要掌握哪些技能?掌握JavaScript的基础语法和常用API,能够编写交互性强的网页。</p>
</li>
<li style=”–i: 3″>
<h3>第三步:框架和库</h3>
<p>作为前端工程师,需要掌握哪些技能?掌握常用的前端框架和库,如React、Vue、jQuery等,能够快速开发高质量的网页。</p>
</li>
<li style=”–i: 4″>
<h3>第四步:前端工具</h3>
<p>作为前端工程师,需要掌握哪些技能?掌握常用的前端工具,如Webpack、Gulp、Grunt等,能够提高开发效率和代码质量。</p>
</li>
<li style=”–i: 5″>
<h3>第五步:前端性能优化/跨平台开发</h3>
<p>作为前端工程师,需要掌握哪些技能?了解前端性能优化的基本原理和方法,能够优化网页的加载速度和响应速度。了解移动端和PC端的差异,能够开发适配不同平台的网页。</p>
</li>
</ol>

</body>
</html>

CSS代码:

* {
box-sizing: border-box;
}

body {
–h: 212deg;
–l: 43%;
–brandColor: hsl(var(–h), 71%, var(–l));
font-family: Montserrat, sans-serif;
margin: 0;
background-color: whitesmoke;
}

p {
margin: 0;
line-height: 1.6;
}

ol {
list-style: none;
counter-reset: list;
padding: 0 1rem;
}

li {
–stop: calc(100% / var(–length) * var(–i));
–l: 62%;
–l2: 88%;
–h: calc((var(–i) – 1) * (180 / var(–length)));
–c1: hsl(var(–h), 71%, var(–l));
–c2: hsl(var(–h), 71%, var(–l2));

position: relative;
counter-increment: list;
max-width: 45rem;
margin: 2rem auto;
padding: 2rem 1rem 1rem;
box-shadow: 0.1rem 0.1rem 1.5rem rgba(0, 0, 0, 0.3);
border-radius: 0.25rem;
overflow: hidden;
background-color: white;
}

li::before {
content: ”;
display: block;
width: 100%;
height: 1rem;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to right, var(–c1) var(–stop), var(–c2) var(–stop));
}

h3 {
display: flex;
align-items: baseline;
margin: 0 0 1rem;
color: rgb(70 70 70);
}

h3::before {
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
margin-right: 1rem;
width: 3rem;
height: 3rem;
content: counter(list);
padding: 1rem;
border-radius: 50%;
background-color: var(–c1);
color: white;
}

@media (min-width: 40em) {
li {
margin: 3rem auto;
padding: 3rem 2rem 2rem;
}

h3 {
font-size: 2.25rem;
margin: 0 0 2rem;
}

h3::before {
margin-right: 1.5rem;
}
}

写在最后

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

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

© 版权声明

相关文章

暂无评论

暂无评论...