CSS3扁平风格价格表样式特效代码下载


CSS3扁平风格价格表样式特效代码下载
CSS3扁平风格价格表样式特效代码下载以及扁平风格、价格表样式等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome.min.css">

2. 引入JS

<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

3. HTML代码

<div class="demo" style="background:#c0bfbf;padding: 1em 0;">
	<div class="container">
		<div class="row">
			<div class="col-md-3 col-sm-6">
				<div class="pricingTable">
					<div class="pricingTable-header">
						<h3 class="heading">Standard</h3>
						<span class="price-value">
							<span class="currency">$</span> 10
							<span class="month">/mo</span>
						</span>
					</div>
					<div class="pricing-content">
						<ul>
							<li>50GB Disk Space</li>
							<li>50 Email Accounts</li>
							<li>50GB Monthly Bandwidth</li>
							<li>10 Subdomains</li>
							<li>15 Domains</li>
						</ul>
						<a href="#" class="read">sign up</a>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-6">
				<div class="pricingTable">
					<div class="pricingTable-header">
						<h3 class="heading">Business</h3>
						<span class="price-value">
							<span class="currency">$</span> 20
							<span class="month">/mo</span>
						</span>
					</div>
					<div class="pricing-content">
						<ul>
							<li>60GB Disk Space</li>
							<li>60 Email Accounts</li>
							<li>60GB Monthly Bandwidth</li>
							<li>15 Subdomains</li>
							<li>20 Domains</li>
						</ul>
						<a href="#" class="read">sign up</a>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-6">
				<div class="pricingTable">
					<div class="pricingTable-header">
						<h3 class="heading">Premium</h3>
						<span class="price-value">
							<span class="currency">$</span> 30
							<span class="month">/mo</span>
						</span>
					</div>
					<div class="pricing-content">
						<ul>
							<li>70GB Disk Space</li>
							<li>70 Email Accounts</li>
							<li>70GB Monthly Bandwidth</li>
							<li>20 Subdomains</li>
							<li>25 Domains</li>
						</ul>
						<a href="#" class="read">sign up</a>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-6">
				<div class="pricingTable">
					<div class="pricingTable-header">
						<h3 class="heading">Extra</h3>
						<span class="price-value">
							<span class="currency">$</span> 40
							<span class="month">/mo</span>
						</span>
					</div>
					<div class="pricing-content">
						<ul>
							<li>80GB Disk Space</li>
							<li>80 Email Accounts</li>
							<li>80GB Monthly Bandwidth</li>
							<li>25 Subdomains</li>
							<li>30 Domains</li>
						</ul>
						<a href="#" class="read">sign up</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章