今天这个练习很实用，具体效果如下：
HTML代码：
<!DOCTYPE html>
<html lang=”en” >
<head>
<meta charset=”UTF-8″>
<title>【每日一练】175—CSS实现博客文章列表卡片式效果</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″><link rel=”stylesheet” href=”style.css”></head>
<body><div class=”card”>
<img src=”01.jpg” class=”card__image” alt=”brown couch” />
<div class=”card__content”>
<time datetime=”2021-03-30″ class=”card__date”>2023-04-28</time>
<span class=”card__title”>AI赚钱的18种方式，总有一种适合你<span>
</div>
</div></body>
</html>
CSS代码：
:root {
–font-family-primary: “Vollkorn”, serif;
–font-family-secondary: “PT Sans”, sans-serif;
–font-size-title: 32px;
–line-height-title: 1.4;
–font-size-caption: 14px;
–line-height-caption: 1.2;
–color-text: #222022;
–color-highlight-primary: #FFEF7E;
–color-highlight-secondary: #B7F9E9;
–border-radius-primary: 32px;
}body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
}* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}@media (min-width: 576px) {
:root {
–font-size-title: 40px;
}
}
.card {
max-width: 960px;
border-radius: var(–border-radius-primary);
box-shadow: 24px 24px 80px rgba(0, 0, 0, 0.1);
padding: 20px 20px 28px 20px;
box-sizing: border-box;
margin: 20px;
display: flex;
flex-direction: column;
}
@media (min-width: 576px) {
.card {
flex-direction: row;
align-items: center;
margin: 40px;
padding: 32px;
}
}.card__image {
width: 100%;
max-height: 300px;
border-radius: var(–border-radius-primary);
-o-object-fit: cover;
object-fit: cover;
margin-bottom: 18px;
}
@media (min-width: 576px) {
.card__image {
width: 45%;
max-height: none;
min-height: 400px;
margin-bottom: 0;
}
}@media (min-width: 576px) {
.card__content {
width: 55%;
padding-left: 40px;
}
}.card__date {
display: block;
font-family: var(–font-family-secondary);
font-size: var(–font-size-caption);
line-height: var(–line-height-caption);
text-transform: uppercase;
color: var(–color-text);
margin-bottom: 6px;
}
@media (min-width: 576px) {
.card__date {
margin-bottom: 8px;
}
}.card__title {
font-family: var(–font-family-primary);
font-size: var(–font-size-title);
line-height: var(–line-height-title);
color: var(–color-text);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
background-image: linear-gradient(90deg, var(–color-highlight-primary), var(–color-highlight-secondary));
background-size: 100% 42%;
background-repeat: no-repeat;
background-position: 0 85%;
padding: 0 4px;
margin-left: -4px;
}
写在最后
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
相关文章
