文章列表的UI卡片是我们在很多新闻类型或者博客开发项目中，会经常遇到的，因此，今天我们就来写一个比较常见的文章UI效果，最终效果如下：
HTML:
<!DOCTYPE html>
<html lang=”en” >
<head>
<meta charset=”UTF-8″>
<title>【每日一练】162—CSS实现一款常见文章UI卡片效果</title>
<link rel=”stylesheet” href=”style.css”></head>
<body>
<!– partial:index.partial.html –>
<div class=”container”>
<div class=”card”>
<div class=”card__header”>
<img src=”images/01.jpg” alt=”card__image” class=”card__image” width=”600″>
</div>
<div class=”card__body”>
<span class=”tag tag-blue”>JavaScript</span>
<h4><a href=”http://www.webqdkf.com/web-technology/js/”>17个你可能还不知道 JS 技巧！</a></h4>
<p>17个你可能还不知道 JS 技巧！ 17个你可能还不知道 JS 技巧！17个你可能还不知道 JS 技巧！17个你可能还不知道 JS 技巧！17个你可能还不知道 JS 技巧！</p>
</div>
<div class=”card__footer”>
<div class=”user”>
<img src=”images/200.png” alt=”user__image” class=”user__image”>
<div class=”user__info”>
<h5>webDev</h5>
<small>1天前</small>
</div>
</div>
</div>
</div>
<div class=”card”>
<div class=”card__header”>
<img src=”images/02.jpg” alt=”card__image” class=”card__image” width=”600″>
</div>
<div class=”card__body”>
<span class=”tag tag-brown”>HTML&CSS</span>
<h4><a href=”http://www.webqdkf.com/web-technology/html/”>14种CSS实现水平或垂直居中的技巧</a></h4>
<p>Css水平和垂直居中是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，</p>
</div>
<div class=”card__footer”>
<div class=”user”>
<img src=”images/200.png” alt=”user__image” class=”user__image”>
<div class=”user__info”>
<h5>webDev</h5>
<small>2天前</small>
</div>
</div>
</div>
</div>
<div class=”card”>
<div class=”card__header”>
<img src=”images/03.jpg” alt=”card__image” class=”card__image” width=”600″>
</div>
<div class=”card__body”>
<span class=”tag tag-red”>每日一练</span>
<h4><a href=”http://www.webqdkf.com/code/practice/”>【每日一练】106—CSS实现一款圆形水滴卡片UI的效果</a></h4>
<p>今天这个练习是一款CSS实现的圆形水滴卡片的效果，这种卡片式的效果，它的应用场景也非常多，主要是这种效果，条理清晰，方便阅读</p>
</div>
<div class=”card__footer”>
<div class=”user”>
<img src=”images/200.png” alt=”user__image” class=”user__image”>
<div class=”user__info”>
<h5>webDev</h5>
<small>1周前</small>
</div>
</div>
</div>
</div>
</div>
<!– partial –></body>
</html>
CSS:
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}body {
font-family: “Quicksand”, sans-serif;
display: grid;
place-items: center;
height: 100vh;
background: #7f7fd5;
background: linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5);
}.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1200px;
margin-block: 2rem;
gap: 2rem;
}img {
max-width: 100%;
display: block;
object-fit: cover;
}.card {
display: flex;
flex-direction: column;
width: clamp(20rem, calc(20rem + 2vw), 22rem);
overflow: hidden;
box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.1);
border-radius: 1em;
background: #ECE9E6;
background: linear-gradient(to right, #FFFFFF, #ECE9E6);}
.card__body {
padding: 1rem;
display: flex;
flex-direction: column;
gap: .5rem;
}.tag {
align-self: flex-start;
padding: .25em .75em;
border-radius: 1em;
font-size: .75rem;
}.tag + .tag {
margin-left: .5em;
}.tag-blue {
background: #56CCF2;
background: linear-gradient(to bottom, #2F80ED, #56CCF2);
color: #fafafa;
}.tag-brown {
background: #D1913C;
background: linear-gradient(to bottom, #FFD194, #D1913C);
color: #fafafa;
}.tag-red {
background: #cb2d3e;
background: linear-gradient(to bottom, #ef473a, #cb2d3e);
color: #fafafa;
}.card__body h4 {
font-size: 1.5rem;
text-transform: capitalize;
}h4 a{
color:#202020;
text-decoration-line:none;}
h4 a:hover{
color:#1717e5;
}.card__footer {
display: flex;
padding: 1rem;
margin-top: auto;
}.user {
display: flex;
gap: .5rem;
}.user__image {
border-radius: 50%;
}.user__info > small {
color: #666;
}
写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
相关文章
