【每日一练】181—CSS实现的响应式定价表效果

每日一练9个月前发布 admin
1,003 0

今天这个练习,是我在给一个外贸公司做自建独立站时找的素材案例,我个人觉得还不错,UI样式简单干净清晰,所以,今天就把它直接分享出来作为练习案例了,希望对您有用。

【每日一练】181—CSS实现的响应式定价表效果

我把源码附在文章里, 如果是自己写练习的话,您也可以直接看着上面截图进行练习,如果是想直接使用,可以直接将代码自行取走修改自用即可。
下面是源码:
HTML代码:

<!DOCTYPE html>
<html lang=”en” >
<head>
<meta charset=”UTF-8″>
<title>【每日一练】181—CSS实现的响应式定价表效果</title>
<link rel=”stylesheet” href=”style.css”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css” integrity=”sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==” crossorigin=”anonymous” referrerpolicy=”no-referrer” />
<link rel=”preconnect” href=”https://fonts.googleapis.com” />
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin />
<link href=”https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap” rel=”stylesheet” />
</head>
<body>

<section class=”pricing”>
<div class=”cards-wrapper”>
<div class=”price-card clr-1″>
<div class=”price-container”>
<div class=”price”>
<span>$</span>
<span>19</span>
</div>
</div>
<h4 class=”plan”><span>basic</span></h4>
<div class=”deliverables-wrapper”>
<div class=”deliverable”>
<span>one selected template</span>
<span><i class=”fas fa-check”></i></span>
</div>
<div class=”deliverable”>
<span>100% responsive design</span>
<span><i class=”fas fa-check”></i></span>
</div>
<div class=”deliverable”>
<span>credit remove permission</span>
<span><i class=”fas fa-times”></i></span>
</div>
<div class=”deliverable”>
<span>lifetime template updates</span>
<span><i class=”fas fa-times”></i></span>
</div>
</div>
<div class=”align-center”>
<a href=”#” class=”btn”>Purchase</a>
</div>
</div>
<div class=”price-card clr-2″>
<div class=”price-container”>
<div class=”price”>
<span>$</span>
<span>49</span>
</div>
</div>
<h4 class=”plan”><span> premium </span></h4>
<div class=”deliverables-wrapper”>
<div class=”deliverable”>
<span>five existing templates</span>
<span><i class=”fas fa-check”></i></span>
</div>
<div class=”deliverable”>
<span>100% responsive design</span>
<span><i class=”fas fa-check”></i></span>
</div>
<div class=”deliverable”>
<span>credit remove permission</span>
<span><i class=”fas fa-check”></i></span>
</div>
<div class=”deliverable”>
<span>lifetime template updates</span>
<span><i class=”fas fa-times”></i></span>
</div>
</div>
<div class=”align-center”>
<a href=”#” class=”btn”>Purchase</a>
</div>
</div>
<div class=”price-card clr-3″>
<div class=”price-container”>
<div class=”price”>
<span>$</span>
<span>99</span>
</div>
</div>
<h4 class=”plan”><span> ultimate </span></h4>
<div class=”deliverables-wrapper”>
<div class=”deliverable”>
<span>all existing templates</span>
<span><i class=”fas fa-check”></i></span>
</div>
<div class=”deliverable”>
<span>100% responsive design</span>
<span><i class=”fas fa-check”></i></span>
</div>
<div class=”deliverable”>
<span>credit remove permission</span>
<span><i class=”fas fa-check”></i></span>
</div>
<div class=”deliverable”>
<span>lifetime template updates</span>
<span><i class=”fas fa-check”></i></span>
</div>
</div>
<div class=”align-center”>
<a href=”#” class=”btn”>Purchase</a>
</div>
</div>
</div>
</section>

</body>
</html>

CSS代码:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: “Poppins”, sans-serif;
background-color: #fefefe;
}

.pricing {
padding: 100px 0;
}

.cards-wrapper {
–gutter: 30px;
display: flex;
justify-content: center;
max-width: 1440px;
width: 90%;
margin: 0 auto;
}

.price-card.clr-1 {
–clr: #ffb319;
}
.price-card.clr-2 {
–clr: #6f69ac;
}
.price-card.clr-3 {
–clr: #80ed99;
}

.price-card {
–bg-clr: #fff;
–text-clr: #333;
border: 5px solid var(–clr);
padding: 40px 20px;
width: 100%;
background-color: var(–bg-clr);
border-radius: 10px;
}

.price-card:not(:last-child) {
margin-right: var(–gutter);
}

.price-card .fa-check {
color: #57cc99;
}

.price-card .fa-times {
color: #ff0000;
}

.price-container {
width: 140px;
height: 140px;
background-color: var(–clr);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: #fff;
margin: 0 auto;
box-shadow: 0 0 0 5px var(–bg-clr), 0 0 0 10px var(–clr);
}

.price {
display: flex;
}

.price span:first-child {
font-size: 30px;
}

.price span:last-child {
font-size: 50px;
}

.plan {
margin: 30px 0;
text-transform: capitalize;
font-size: 30px;
color: var(–text-clr);
text-align: center;
position: relative;
}

.plan span {
background-color: var(–bg-clr);
padding: 0 20px;
position: relative;
z-index: 1;
}

.plan::before {
content: “”;
position: absolute;
width: 100%;
height: 1px;
background-color: var(–clr);
left: 0;
top: 50%;
transform: translateY(-50%);
}

.deliverable {
display: flex;
align-items: center;
font-size: 18px;
justify-content: space-between;
}

.deliverable:not(:last-child) {
margin-bottom: 20px;
}

.deliverable span:first-child {
text-transform: capitalize;
color: var(–text-clr);
margin-right: 15px;
}

.align-center {
text-align: center;
}

.btn {
display: inline-block;
margin-top: 45px;
padding: 1em 3.5em;
border: 3px solid var(–clr);
text-decoration: none;
font-size: 18px;
color: var(–clr);
border-radius: 100px;
transition: all 0.3s;
}

.btn:hover {
background-color: var(–clr);
color: #fff;
}

@media (max-width: 1200px) {
.cards-wrapper {
flex-wrap: wrap;
}

.price-card {
width: calc(50% – var(–gutter));
}

.price-card:nth-child(2) {
margin-right: 0;
}

.price-card:last-child {
margin-top: var(–gutter);
}
}

@media (max-width: 768px) {
.cards-wrapper {
flex-direction: column;
align-items: center;
}

.price-card {
width: 100%;
}

.price-card:first-child {
margin-right: 0;
}

.price-card:last-child {
margin-top: 0;
}

.price-card:not(:last-child) {
margin-bottom: var(–gutter);
}
}

@media (max-width: 320px) {
.price-container {
width: 120px;
height: 120px;
}

.btn {
padding: 0.5em 2em;
}
}

写在最后

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

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

© 版权声明

相关文章

暂无评论

暂无评论...