今天练习的最终效果如下：
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;
}
}
写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
相关文章
