今天这个练习，是我在给一个外贸公司做自建独立站时找的素材案例，我个人觉得还不错，UI样式简单干净清晰，所以，今天就把它直接分享出来作为练习案例了，希望对您有用。
我把源码附在文章里， 如果是自己写练习的话，您也可以直接看着上面截图进行练习，如果是想直接使用，可以直接将代码自行取走修改自用即可。
下面是源码：
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;
}
}
写在最后
以上就是【每日一练】的全部内容，希望今天的小练习对您有用，如果您觉得有帮助的话，请点赞我，关注我，并将它分享给您身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
相关文章
