Shulou(Shulou.com)06/01 Report--

This article mainly introduces the CSS3 flat price list code how to write the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this CSS3 flat price list code how to write the article will have a harvest, let's take a look.

The code is as follows:

CSS3 flattened price list style code

.pricingTable {

Text-align: center

}

.pricingTable. PricingTable-header {

Padding: 30px 0

Background: # 4d4d4d

Position: relative

Transition: all 0.3s ease 0s

}

.pricingTable: hover. PricingTable-header {

Background: # 09b2c6

}

.pricingTable. PricingTable-header:before

.pricingTable. PricingTable-header:after {

Content: ""

Width: 16px

Height: 16px

Border-radius: 50%

Border: 1px solid # d9d9d8

Position: absolute

Bottom: 12px

}

.pricingTable. PricingTable-header:before {

Left: 40px

}

.pricingTable. PricingTable-header:after {

Right: 40px

}

.pricingTable .heading {

Font-size: 20px

Color: # fff

Text-transform: uppercase

Letter-spacing: 2px

Margin-top: 0

}

.pricingTable. Price-value {

Display: inline-block

Position: relative

Font-size: 55px

Font-weight: bold

Color: # 09b1c5

Transition: all 0.3s ease 0s

}

.pricingTable: hover. Price-value {

Color: # fff

}

.pricingTable .currency {

Font-size: 30px

Font-weight: bold

Position: absolute

Top: 6px

Left:-19px

}

.pricingTable .month {

Font-size: 16px

Color: # fff

Position: absolute

Bottom: 15px

Right:-30px

Text-transform: uppercase

}

.pricingTable. Pricing-content {

Padding-top: 50px

Background: # fff

Position: relative

}

.pricingTable. Pricing-content:before

.pricingTable. Pricing-content:after {

Content: ""

Width: 16px

Height: 16px

Border-radius: 50%

Border: 1px solid # 7c7c7c

Position: absolute

Top: 12px

}

.pricingTable. Pricing-content:before {

Left: 40px

}

.pricingTable. Pricing-content:after {

Right: 40px

}

.pricingTable. Pricing-content ul {

Padding: 0 20px

Margin: 0

List-style: none

}

.pricingTable. Pricing-content ul:before

.pricingTable. Pricing-content ul:after {

Content: ""

Width: 8px

Height: 46px

Border-radius: 3px

Background: linear-gradient (to bottom,#818282 50% remark 72737350%)

Position: absolute

Top:-22px

Z-index: 1

Box-shadow: 0 0 5px # 707070

Transition: all 0.3s ease 0s

}

.pricingTable: hover. Pricing-content ul:before

.pricingTable: hover. Pricing-content ul:after {

Background: linear-gradient (to bottom, # 40c4db 50%, # 34bacc 50%)

}

.pricingTable. Pricing-content ul:before {

Left: 44px

}

.pricingTable. Pricing-content ul:after {

Right: 44px

}

.pricingTable. Pricing-content ul li {

Font-size: 15px

Font-weight: bold

Color: # 777473

Padding: 10px 0

Border-bottom: 1px solid # d9d9d8

}

.pricingTable. Pricing-content ul li:last-child {

Border-bottom: none

}

.pricingTable .read {

Display: inline-block

Font-size: 16px

Color: # fff

Text-transform: uppercase

Background: # d9d9d8

Padding: 8px 25px

Margin: 30px 0

Transition: all 0.3s ease 0s

}

.pricingTable .read: hover {

Text-decoration: none

}

.pricingTable: hover .read {

Background: # 09b1c5

}

@ media screen and (max-width: 990px) {

.pricingTable {margin-bottom: 25px;}

}

Standard type

¥10

/ month

50GB hard disk space

50 email account

50GB monthly traffic

10 second-level domain name

15 top-level domain name

Buy now

Business type

¥20

/ month

60GB hard disk space

60 email account

60GB monthly traffic

15 second-level domain name

20 top-level domain name

Buy now

Flagship type

¥30

/ month

70GB hard disk space

70 email account

70GB monthly traffic

20 second-level domain name

25 top-level domain name

Buy now

Supreme type

¥40

/ month

80GB hard disk space

80 email account

80GB monthly traffic

25 second-level domain name

30 top-level domain name

Buy now

This is the end of the article on "how to write the code of CSS3 flat price list". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to write the code of CSS3 flat price list". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.