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

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

以下是今天练习的最终效果:

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

HTML:

<!DOCTYPE html>
<html lang=”en” >
<head>
  <meta charset=”UTF-8″>
  <title>【每日一练】159—CSS实现一个列表</title>
  <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);
}

写在最后

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

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

© 版权声明

相关文章

暂无评论

暂无评论...