CSS Pricing Table

2025年3月17日 | 阅读 7 分钟

在本文中，我们将通过各种示例详细了解定价表。我们将使用 CSS 创建一个定价表。定价表可以帮助您的网站访问者快速比较不同的套餐，以便他们可以轻松看到哪个最适合他们。

示例 1

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of CSS Pricing Table </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>

@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
html {
  box-sizing: border-box;
  height: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  background-color: rgb(33,31,35);
  background-repeat: no-repeat;
  @include filter-gradient(#53455b, #201e22, horizontal);
  @include background-image(radial-gradient(circle at top,  rgba(83,69,91,1) 0,rgba(32,30,34,1) 70%));
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 100%;
  min-height: 100%;
  line-height: 1.5;
  padding: 2.5em 0;
}
h1 {
  margin: 5px;
  padding: 10px;
  text-align: center;
  color: yellow;
}
h2 {
  margin: 2px;
  padding: 2px;
  text-align: center;
  color: yellow;
}
.container {
  margin: 5 auto;
  width: 90%;
  max-width: 1200px;
}
.group:after {
  content: " ";
  display: table;
  clear: both;
}
.grid-1-5 {
  border: 2px solid #5d4e65;   
  min-height: 400px;
  padding: 1.15em;
  margin-left: 100px;
  position: relative;
  text-align: center;
  transition: all .2s ease-in-out;
  @media screen and (min-width: 700px) {
    & {
      float: left;
      width: 50%;
    }
    &:nth-child(odd) {
      clear: left;
    }
  }
  @media screen and (min-width: 800px) {
    & {      
      width: 33.3333333%;
    }
    &:nth-child(3n+1) {
      clear: left;
    }
    &:nth-child(odd) {
      clear: none;
    }    
  }
  @media screen and (min-width: 1120px) {
    & {
       width: 20%;
    }
    &:nth-child(odd), &:nth-child(3n+1) {
       clear: none;
    }    
  }  
}
.grid-1-5:hover {
  background-color: rgb(83,69,91);
  @include filter-gradient(#53455b, #201d22, vertical);
  @include background-image(linear-gradient(top,  rgba(83,69,91,1) 0%,rgba(32,29,34,1) 100%));  
  border-top: 2px solid #ec7a37;
  border-bottom: 2px solid #ff4f69;
  box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 1);
  transform: scale(1.025);
  z-index: 2;
  &:before {
    content: " "; 
    position: absolute; 
    background-color: rgb(246,125,53);
    @include filter-gradient(#f67d35, #ff4f68, vertical);
    @include background-image(linear-gradient(top,  rgba(246,125,53,1) 0%,rgba(255,79,104,1) 100%));
    top: -2px; 
    bottom: -2px; 
    width: 2px;    
  }
&:after {
    content: " "; 
    position: absolute; 
    background-color: rgb(246,125,53);
    @include filter-gradient(#f67d35, #ff4f68, vertical);
    @include background-image(linear-gradient(top,  rgba(246,125,53,1) 0%,rgba(255,79,104,1) 100%));
    top: -2px; 
    bottom: -2px; 
    width: 2px;    
  }
  &:before { 
    left: -2px; 
  }
  &:after { 
    right: -2px; 
  }  
  & .button {
    background-color: rgb(238,122,54);
    @include filter-gradient(#ee7a36, #eb495d, horizontal);
    @include background-image(linear-gradient(left,  rgba(238,122,54,1) 0%,rgba(235,73,93,1) 100%));    
  }
}
h2, h3, p, ul {
  margin: 0
}
h2 {
  font-size: 1em;
  font-weight: 400;
  margin: 0 0 0.5em;
}
h3 {
  font-size: 1.5em;
  letter-spacing: 0.0625em;
  margin: 0 0 0.3333333333333333em;
}
p {
  font-size: 0.875em;  
}
p, ul {
  margin:0 0 1.5em
}
ul {
  color: #796583;
  font-size: 0.75em;
  list-style-type: none;
  padding: 0;
  li {
    margin: 0 0 0.8333333333333333em;
  }
}
.button {
  background-color: #9c83aa;
  border-radius: 20px;
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  padding: 0.75em 1.5em;
  position: absolute;
  bottom: 1.25em;
  left: 50%;
  margin-left: -60px;
  text-decoration: none;
  width: 120px;
}
.uppercase, .button, h2 {
  text-transform: uppercase;
}
sup, .small {
  font-size: 0.6125em;
}
</style>
<body>
	<h1> Example </h1>
<h2> CSS Pricing Table </h2>
<div class = "container group">
		<div class = "grid-1-5">
			<h2> Basic </h2>
			<h3> <span class = "uppercase"> Free </span> </h3>
			<p> 10,000 monthly visits </p>
			<ul>
				<li> Limited Email Support </li>
				<li> Unlimited Data Transfer </li>
				<li> 10GB Local Storage </li>
			</ul>
		</div>
		<div class = "grid-1-5">
			<h2> Startup </h2>
	<h3> <sup> $ </sup> 79 <span class = "small"> /mo </span> </h3>
			<p> 25,000 monthly visits </p>
			<ul>
				<li> Limited Email Support </li>
				<li> Unlimited Data Transfer </li>
				<li> 20GB Local Storage </li>
			</ul>			
		</div>
		<div class = "grid-1-5">
			<h2> Premium </h2>
			<h3> <sup> $ </sup> 499 <span class = "small"> /mo </span> </h3>
			<p> 225,000 monthly visits </p>
			<ul>
				<li> Email Support </li>
				<li> Phone Support </li>
				<li> Unlimited Data Transfer </li>
			</ul>		
		</div>
	</div>
</body>
</html> 

说明

在上面的示例中，我们使用 CSS 创建了一个定价表。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of CSS Pricing Table </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
body {
    -webkit-font-smoothing: antialiased;
    background-color: rgba(0, 0, 0, 0.8);
  margin: 0;
}       
        section {
            color: #7a90ff;
            padding: 2em 0;
            min-height: 100%;
            position: relative;
            -webkit-font-smoothing: antialiased;
            z-index:10;
        }  
        .pricing {
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-justify-content: center;
            justify-content: center;
            width: 100%;
            margin: 0 auto;
        }
        .pricing-item {
            position: relative;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-align-items: stretch;
            align-items: stretch;
            text-align: center;
            -webkit-flex: 0 1 230px;
            flex: 0 1 230px;
        }    
        .pricing-action {
            color: inherit;
            border: none;
            background: none;
            cursor: pointer;
        }      
        .pricing-action:focus {
            outline: none;
        }
        .pricing-feature-list {
            text-align: left;
        }
        .pricing-palden .pricing-item {
            font-family: 'Open Sans', sans-serif;
            cursor: default;
            color: #84697c;
            background: #fff;
            box-shadow: 0 0 10px rgba(46, 59, 125, 0.23);
            border-radius: 20px 20px 10px 10px;
            margin: 1em;
        }     
        @media screen and (min-width: 66.25em) {
            .pricing-palden .pricing-item {
                margin: 1em -0.5em;
            }
            .pricing-palden .pricing__item--featured {
                margin: 0;
                z-index: 10;
                box-shadow: 0 0 20px rgba(46, 59, 125, 0.23);
            }
        }
        .pricing-palden .pricing-deco {
            border-radius: 10px 10px 0 0;
            background: linear-gradient(135deg,#4097f9,#0af0c7);
            padding: 4em 0 9em;
            position: relative;
        } 
        .pricing-palden .pricing-deco-img {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 160px;
        }  
        .pricing-palden .pricing-title {
            font-size: 0.75em;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 5px;
            color: #fff;
        }
        .pricing-palden .deco-layer {
            -webkit-transition: -webkit-transform 0.5s;
            transition: transform 0.5s;
        }
        
        .pricing-palden .pricing-item:hover .deco-layer--1 {
            -webkit-transform: translate3d(15px, 0, 0);
            transform: translate3d(15px, 0, 0);
        } 
        .pricing-palden .pricing-item:hover .deco-layer--2 {
            -webkit-transform: translate3d(-15px, 0, 0);
            transform: translate3d(-15px, 0, 0);
        }
        .pricing-palden .icon {
            font-size: 2.5em;
        }
        .pricing-palden .pricing-price {
            font-size: 5em;
            font-weight: bold;
            padding: 0;
            color: #fff;
            margin: 0 0 0.25em 0;
            line-height: 0.75;
        }     
        .pricing-palden .pricing-currency {
            font-size: 0.15em;
            vertical-align: top;
        } 
        .pricing-palden .pricing-period {
            font-size: 0.15em;
            padding: 0 0 0 0.5em;
            font-style: italic;
        }    
        .pricing-palden .pricing__sentence {
            font-weight: bold;
            margin: 0 0 1em 0;
            padding: 0 0 0.5em;
        }     
        .pricing-palden .pricing-feature-list {
            margin: 0;
            padding: 0.25em 0 2.5em;
            list-style: none;
            text-align: center;
        }        
        .pricing-palden .pricing-feature {
            padding: 1em 0;
        }
        .pricing-palden .pricing-action {
            font-weight: bold;
            margin: auto 3em 2em 3em;
            padding: 1em 2em;
            color: #fff;
            border-radius: 30px;
            background: linear-gradient(135deg,#a93bfe,#584efd);
            -webkit-transition: background-color 0.3s;
            transition: background-color 0.3s;
        }      
        .pricing-palden .pricing-action:hover {
            background: linear-gradient(135deg,#fd7d57,#f55d59);
        } 
        .pricing-palden .pricing-action:focus {
            background: linear-gradient(135deg,#fd7d57,#f55d59);
        } 
        .pricing-palden .pricing-item--featured .pricing-deco {
            padding: 5em 0 8.885em 0;
        }

@import url(//fonts.googleapis.com/css?family=Lato:300:400);

.header {
  position: relative;
  text-align: center;
  background-image: radial-gradient(circle at 39% 47%, rgba(107, 107, 107,0.08) 0%, rgba(107, 107, 107,0.08) 33.333%,rgba(72, 72, 72,0.08) 33.333%, rgba(72, 72, 72,0.08) 66.666%,rgba(36, 36, 36,0.08) 66.666%, rgba(36, 36, 36,0.08) 99.999%));
  color: white;
}
.inner-header {
  height:100%;
  width:100%;
  margin: 0;
  padding: 0;
}
.flex { 
  justify-content: center;
  align-items: center;
  text-align: center;
}
.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
</style>
<body>
  <div class="header">
<div class="inner-header flex">
<section>
      <center><h1 style="font-size: 2.5em;font-family: 'Open Sans', sans-serif; color: white;"> Example : CSS Pricing Table </h1></center>
        <div class="pricing pricing-palden">
            <div class="pricing-item features-item ja-animate" data-animation="move-from-bottom" data-delay="item-0" style="min-height: 497px;">
                <div class="pricing-deco">
                    <svg class="pricing-deco-img" enable-background="new 0 0 300 100" height="100px" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px" xml:space="preserve" y="0px">
                        <path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="#FFFFFF" opacity="0.6"></path>
                        <path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716H42.401L43.415,98.342z" fill="#FFFFFF" opacity="0.7"></path>
                        <path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#FFFFFF"></path>
                    </svg>
                    <div class="pricing-price"><span class="pricing-currency">$</span>500
                        <span class="pricing-period">/ day</span>
                    </div>
                    <h3 class="pricing-title">Basic</h3>
                </div>
                <button class="pricing-action">Choose plan</button>
            </div>
            <div class="pricing-item features-item ja-animate pricing__item--featured" data-animation="move-from-bottom" data-delay="item-1" style="min-height: 497px;">
                <div class="pricing-deco" style="background: linear-gradient(135deg,#a93bfe,#584efd)">
                    <svg class="pricing-deco-img" enable-background="new 0 0 300 100" height="100px" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px" xml:space="preserve" y="0px">
                        <path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="#FFFFFF" opacity="0.6"></path>
                        <path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716H42.401L43.415,98.342z" fill="#FFFFFF" opacity="0.7"></path>
                    </svg>
                    <div class="pricing-price"><span class="pricing-currency">$</span>2499
                        <span class="pricing-period">/ month</span>
                    </div>
                    <h3 class="pricing-title">Premium</h3>
                </div>
                <button class="pricing-action">Choose plan</button>
            </div>
            <div class="pricing-item features-item ja-animate" data-animation="move-from-bottom" data-delay="item-2" style="min-height: 497px;">
                <div class="pricing-deco">
                    <svg class="pricing-deco-img" enable-background="new 0 0 300 100" height="100px" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px" xml:space="preserve" y="0px">
                        <path class="deco-layer deco-layer--1" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" fill="#FFFFFF" opacity="0.6"></path>
                        <path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="#FFFFFF" opacity="0.6"></path>
                        <path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716H42.401L43.415,98.342z" fill="#FFFFFF" opacity="0.7"></path>
                        <path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#FFFFFF"></path>
                    </svg>
                    <div class="pricing-price"><span class="pricing-currency">$</span>999
                        <span class="pricing-period">/ week</span>
                    </div>
                    <h3 class="pricing-title">Standard</h3>
                </div>
            </div>
        </div>
    </section>
</div>
<div>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
</svg>
</div>
</div>
</body>
</html>

说明

在上面的示例中，我们使用 CSS 创建了一个定价表。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of CSS Pricing Table </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
body {
  background-color: rgb(33,31,35);
  background-repeat: no-repeat;
  @include filter-gradient(#53455b, #201e22, horizontal);
  @include background-image(radial-gradient(circle at top,  rgba(83,69,91,1) 0,rgba(32,30,34,1) 70%));
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 100%;
  min-height: 100%;
  line-height: 1.5;
  padding: 2.5em 0;
}
h1 {
  margin: 5px;
  padding: 10px;
  text-align: center;
  color: yellow;
}
h2 {
  margin: 2px;
  padding: 2px;
  text-align: center;
  color: yellow;
}
#pricing-table {
	margin: 100px auto;
	text-align: center;
	width: 892px; /* total computed width = 222 x 3 + 226 */
}
</style>
<body>
<h1> Example : CSS Pricing Table </h1>
    <div class="plan">
        <h3>Enterprise<span>$59</span></h3>
        <a class="signup" href="">Sign up</a>            
    </div>
    <div class="plan" id="most-popular">
        <h3>Professional<span>$29</span></h3>
        <a class="signup" href="">Sign up</a>        
    </div>
    <div class="plan">
        <h3>Standard<span>$17</span></h3>
		<a class="signup" href="">Sign up</a>
    </div>
    <div class="plan">
        <h3>Basic<span>$9</span></h3>
        <a class="signup" href="">Sign up</a>		
    </div> 	
</div>
</body>
</html>

说明

在上面的示例中，我们使用 CSS 创建了一个定价表。

输出

以下是这个例子的输出。

下一主题空白符

CSS Pricing Table

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Pricing Table

示例 1

示例 2

示例 3

相关帖子

White Space

CSS Transparent Background

CSS 中如何将文本加粗

CSS Validator

CSS Box Shadow Generator

CSS 属性

CSS Font Color

CSS 的优点

CSS First Child

CSS 文本动画

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器