【每日一练】179— CSS实现一款文章卡片式列表效果

每日一练1年前 (2023)更新 admin

1,749 0 1

今天这个练习，唯一不一样的地方，就是练习里的图片，是AI生成的。

并且AI生成的各种图片，可以随意使用，也不会涉及到版权问题，以后大家想用什么样的图片素材，可以叫AI帮忙生成一个，只要用对方法，AI生成的图片，真的一点也不差，我随便给大家放几张，大家感受一下，这个AI生成图片的水平如何？

同时，我在Midjourney 网站上，还看到了它们出版的Midjourney 的AI杂志，杂志中采用的图片都是来自Midjourney 用户投票最高的AI图。

下面我也分享几张Midjourney 网站上的AI杂志图片的截图：

AI真的是个好工具，如果你还没有开始使用AI的话，我强烈建议你去学习一下，使用起来。

关于AI生成图片的话题，我就先说到这里吧。

现在，还是一起来看一下今天练习的最终效果：

HTML代码：

<!DOCTYPE html>
<html lang=”en” >
<head>
<meta charset=”UTF-8″>
<title>【每日一练】179— CSS实现一款文章卡片式列表效果</title>
<link rel=”stylesheet” href=”style.css”>

</head>
<body>
<section class=”articles”>
<article>
<div class=”article-wrapper”>
<figure>
<img src=”01.png” alt=”” />
</figure>
<div class=”article-body”>
<h2>JS字符串教程</h2>
<p>
在本教程中，您将学习如何使用 JavaScript String.prototype.toLowerCase() 方法返回一个所有字符都转换为小写的字符串。toLowerCase() 方法返回一个所有字符都转换为小写的新字符串。
</p>
<a href=”http://www.webqdkf.com/archives/630″ class=”read-more”>
阅读更多<span class=”sr-only”>JS字符串教程</span>
<svg xmlns=”http://www.w3.org/2000/svg” class=”icon” viewBox=”0 0 20 20″ fill=”currentColor”>
<path fill-rule=”evenodd” d=”M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z” clip-rule=”evenodd” />
</svg>
</a>
</div>
</div>
</article>
<article>

<div class=”article-wrapper”>
<figure>
<img src=”02.png” alt=”” />
</figure>
<div class=”article-body”>
<h2>JS字符串教程</h2>
<p>
在本教程中，您将学习如何使用 JavaScript String.prototype.toLowerCase() 方法返回一个所有字符都转换为小写的字符串。toLowerCase() 方法返回一个所有字符都转换为小写的新字符串。
</p>
<a href=”http://www.webqdkf.com/archives/630″ class=”read-more”>
阅读更多 <span class=”sr-only”>JS字符串教程</span>
<svg xmlns=”http://www.w3.org/2000/svg” class=”icon” viewBox=”0 0 20 20″ fill=”currentColor”>
<path fill-rule=”evenodd” d=”M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z” clip-rule=”evenodd” />
</svg>
</a>
</div>
</div>
</article>
<article>

<div class=”article-wrapper”>
<figure>
<img src=”03.png” alt=”” />
</figure>
<div class=”article-body”>
<h2>JS字符串教程</h2>
<p>
在本教程中，您将学习如何使用 JavaScript String.prototype.toLowerCase() 方法返回一个所有字符都转换为小写的字符串。toLowerCase() 方法返回一个所有字符都转换为小写的新字符串。
</p>
<a href=”http://www.webqdkf.com/archives/630″ class=”read-more”>
阅读更多<span class=”sr-only”>JS字符串教程</span>
<svg xmlns=”http://www.w3.org/2000/svg” class=”icon” viewBox=”0 0 20 20″ fill=”currentColor”>
<path fill-rule=”evenodd” d=”M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z” clip-rule=”evenodd” />
</svg>
</a>
</div>
</div>
</article>
</section>

</body>
</html>

CSS代码：

article {
–img-scale: 1.001;
–title-color: black;
–link-icon-translate: -20px;
–link-icon-opacity: 0;
position: relative;
border-radius: 16px;
box-shadow: none;
background: #fff;
transform-origin: center;
transition: all 0.4s ease-in-out;
overflow: hidden;
}

article a::after {
position: absolute;
inset-block: 0;
inset-inline: 0;
cursor: pointer;
content: “”;
}

article h2 {
margin: 0 0 18px 0;
font-family: “Bebas Neue”, cursive;
font-size: 1.9rem;
letter-spacing: 0.06em;
color: var(–title-color);
transition: color 0.3s ease-out;
}

figure {
margin: 0;
padding: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
}

article img {
max-width: 100%;
transform-origin: center;
transform: scale(var(–img-scale));
transition: transform 0.4s ease-in-out;
}

.article-body {
padding: 24px;
}

article a {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #28666e;
}

article a:focus {
outline: 1px dotted #28666e;
}

article a .icon {
min-width: 24px;
width: 24px;
height: 24px;
margin-left: 5px;
transform: translateX(var(–link-icon-translate));
opacity: var(–link-icon-opacity);
transition: all 0.3s;
}

article:has(:hover, :focus) {
–img-scale: 1.1;
–title-color: #28666e;
–link-icon-translate: 0;
–link-icon-opacity: 1;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

body {
margin: 0;
padding: 48px 0;
font-family: “Figtree”, sans-serif;
font-size: 1.2rem;
line-height: 1.6rem;
background-image: linear-gradient(45deg, #7c9885, #b5b682);
min-height: 100vh;
}

.articles {
display: grid;
max-width: 1200px;
margin-inline: auto;
padding-inline: 24px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}

@media screen and (max-width: 960px) {
article {
container: card/inline-size;
}
.article-body p {
display: none;
}
}

@container card (min-width: 380px) {
.article-wrapper {
display: grid;
grid-template-columns: 100px 1fr;
gap: 16px;
}
.article-body {
padding-left: 0;
}
figure {
width: 100%;
height: 100%;
overflow: hidden;
}
figure img {
height: 100%;
aspect-ratio: 1;
object-fit: cover;
}
}

.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}