【每日一练】162—CSS实现一款常见文章UI卡片效果

每日一练11个月前发布 admin
1,503 0

文章列表的UI卡片是我们在很多新闻类型或者博客开发项目中,会经常遇到的,因此,今天我们就来写一个比较常见的文章UI效果,最终效果如下:

【每日一练】162—CSS实现一款常见文章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;
}

写在最后

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

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

© 版权声明

相关文章

暂无评论

暂无评论...