以下是今天练习的最终效果：
HTML:
<!DOCTYPE html><html lang=”en” ><head><meta charset=”UTF-8″><link rel=”stylesheet” href=”./style.css”></head><body><ul><li style=”–accent-color:#0B374D”><div class=”icon”><i class=”fa-brands fa-html5″></i></div><div class=”title”>HTML+CSS</div><div class=”descr”>前端程序员最先接触的技术之一</div></li><li style=”–accent-color:#1286A8″><div class=”icon”><i class=”fa-brands fa-html5″></i></div><div class=”title”>Javascript</div><div class=”descr”>前端程序员必备技能之一</div></li><li style=”–accent-color:#D2B53B”><div class=”icon”><i class=”fa-brands fa-html5″></i></div><div class=”title”>html5+CSS3</div><div class=”descr”>学完JS，就可以学HTML5和CSS3了</div></li><li style=”–accent-color:#DA611E”><div class=”icon”><i class=”fa-brands fa-html5″></i></div><div class=”title”>JQuery</div><div class=”descr”>Javascript里的一个库</div></li><li style=”–accent-color:#AC2A1A”><div class=”icon”><i class=”fa-brands fa-html5″></i></div><div class=”title”>VueJS</div><div class=”descr”>前端主流框架之一，如果前面知识学得差不多了，就可以开始学前端框架了</div></li></ul></body></html>
CSS:
@import url(“https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css”);*,*::before,*::after {margin: 0;padding: 0;box-sizing: border-box;}body {–color: rgba(30, 30, 30);–bgColor: rgba(245, 245, 245);min-height: 100vh;display: grid;align-content: center;gap: 2rem;padding: 2rem;font-family: “Jura”, sans-serif;color: var(–color);background: var(–bgColor);}ul {–col-gap: 2rem;–barH: 1rem;–roleH: 2rem;–flapH: 2rem;width: min(60rem, 90%);margin-inline: auto;display: flex;flex-wrap: wrap;gap: var(–col-gap);padding-inline: calc(var(–col-gap) / 2);justify-content: center;align-items: flex-start;list-style: none;}ul li {width: 10em;display: grid;grid-template:“role”“icon”“title”“descr”;align-items: flex-start;gap: 1rem;padding-block-end: calc(var(–flapH) + 1rem);text-align: center;background: var(–accent-color);background-image: linear-gradient(rgba(0, 0, 0, 0.6) var(–roleH),rgba(0, 0, 0, 0.4) calc(var(–roleH) + 0.5rem),rgba(0, 0, 0, 0) calc(var(–roleH) + 0.5rem + 5rem));clip-path: polygon(calc(var(–col-gap) / -2 – 5px) 0,calc(100% + var(–col-gap) / 2 + 5px) 0,calc(100% + var(–col-gap) / 2 + 5px ) calc(100% – var(–flapH)),50% 100%,calc(var(–col-gap) / -2 – 5px) calc(100% – var(–flapH)));}/* bar */ul li::before {content: “”;grid-area: role;height: var(–barH);width: calc(100% + var(–col-gap));margin-left: calc(var(–col-gap) / -2);margin-top: calc(var(–roleH) / 2 – var(–barH) / 2);background: grey;z-index: -1;background-image: linear-gradient(rgba(255, 255, 255, 0.4),rgba(255, 255, 255, 0.2) 30%,rgba(255, 255, 255, 0.1) 40%,rgba(0, 0, 0, 0.1) 60%,rgba(0, 0, 0, 0.2) 70%,rgba(0, 0, 0, 0.4));}/* role */ul li::after {content: “”;grid-area: role;background: var(–accent-color);background-image: linear-gradient(rgba(255, 255, 255, 0.4),rgba(255, 255, 255, 0.2) 30%,rgba(255, 255, 255, 0.1) 40%,rgba(0, 0, 0, 0.1) 60%,rgba(0, 0, 0, 0.2) 70%,rgba(0, 0, 0, 0.4));height: var(–roleH);}ul li .icon,ul li .title,ul li .descr {padding-inline: 1rem;color: white;text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);}ul li .icon {font-size: 3rem;}ul li .title {font-size: 1.25rem;font-weight: 700;}ul li .descr {font-size: 0.9rem;}.credits {position: fixed;bottom: 1rem;right: 1rem;}.credits a {color: var(–color);}
写在最后
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
