Detailed explanation of Bootstrap implementation of beautiful and concise CSS3 price list example source code-CSS Tutorial-php.cn

Preface

This is a beautiful and concise CSS3 price list style. The price list is laid out based on the Bootstrap grid system. Simple CSS3 code is used to beautify the price list. The style is very fashionable and beautiful, and can display good effects on different screens.

Let’s look at the renderings first

Detailed explanation of Bootstrap implementation of beautiful and concise CSS3 price list example source code

View the demo download source code

First of all The bootstrap.min.css file is introduced into the page. Here I use the official CDN resource. You can also download it for local use.

Copy after login

The HTML structure of the css3 price list is as follows:

Standard

per month $ 10 99

50GB Disk Space
50 Email Accounts
50GB Monthly Bandwidth
10 Subdomains
15 Domains

Business

per month $ 20 99

60GB Disk Space
60 Email Accounts
60GB Monthly Bandwidth
15 Subdomains
20 Domains

Copy after login

CSS3

Add the following CSS styles to the price list for rendering and beautify.

.pricingTable{ text-align: center; background: #fff; padding: 30px 0; } .pricingTable .title{ font-size: 22px; font-weight: 600; color: #2e282a; text-transform: uppercase; margin: 0 0 30px 0; } .pricingTable .price-value{ padding: 30px 0; background: #ba5289; margin-bottom: 30px; position: relative; } .pricingTable .price-value:before{ content: ""; border-top: 15px solid #fff; border-left: 15px solid transparent; border-right: 15px solid transparent; position: absolute; top: 0; left: 46%; } .pricingTable .month{ display: block; height: 50px; font-size: 15px; font-weight: 900; color: #fff; text-transform: uppercase; } .pricingTable .amount{ display: inline-block; font-size: 50px; color: #fff; position: relative; } .pricingTable .currency{ position: absolute; top: -1px; left: -35px; } .pricingTable .value{ font-size: 20px; position: absolute; top: -11px; right: -27px; } .pricingTable .pricing-content{ padding: 0; margin: 0 0 30px 0; list-style: none; } .pricingTable .pricing-content li{ font-size: 16px; color: #868686; line-height: 35px; } .pricingTable .pricingTable-signup{ display: inline-block; padding: 8px 40px; background: #fca4a7; font-size: 15px; font-weight: 600; color: #fff; text-transform: capitalize; border: 2px solid #fca4a7; border-radius: 30px; transition: all 0.5s ease 0s; } .pricingTable .pricingTable-signup:hover{ background: #fff; color: #fca4a7; } @media only screen and (max-width: 990px){ .pricingTable{ margin-bottom: 30px; } }

Copy after login

Now you can open the browser to see the effect. The effect on the mobile phone is also good.

For more detailed explanations of Bootstrap’s implementation of beautiful and concise CSS3 price list example source code related articles, please pay attention to the PHP Chinese website!

Detailed explanation of Bootstrap’s pure CSS3 arrow button style

jQuery realizes infinite regional linkage based on BootStrap style

Using Bootstrap form to create example code