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

This article mainly introduces CSS3 how to make a beautiful painting effect of the host price list, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.

The code is as follows:

Entry-level VPS

¥149 / month

Small business, personal first choice

Dual core Xeon processor

1G DDR3 ECC > span > High Speed error Correction memory

10g + 20g > span > high-speed enterprise hard disk

1m > span > Direct Connect bandwidth

1 > span > independent public network IP

Click to buy

.... Multiple duplicate li

CSS

We use CSS to arrange several li into a line, use CSS3 to achieve shadow, fillet and mouse slide animation effects, the following is a copy of part of the css code. You can download the source package to see the complete code, of course, you can also use css3 to construct a responsive layout.

Copy the code

The code is as follows:

# plans,#plans ul,#plans ul li {

Margin: 0

Padding: 0

List-style: none

}

# pricePlans:after {

Content:''

Display: table

Clear: both

}

# pricePlans {

Zoom: 1

}

# pricePlans {

Max-width: 69em

Margin: 2em auto

}

# pricePlans # plans .plan {

Background: # fff

Float: left

Text-align: center

Border-radius: 5px

Border:1px solid # d3d3d3

-webkit-box-shadow: 0 1px 3px rgba (0pc0re0pc0pl 0.1)

Box-shadow: 0 1px 3px rgba (0pc0pl 0pl 0.1)

Width: 23%

Margin: 0 1.33% 20px 0

-webkit-transition: all .25s

-moz-transition: all .25s

-ms-transition: all .25s

-o-transition: all .25s

Transition: all .25s

}

# pricePlans # plans .plan: hover {

-webkit-transform: scale

-moz-transform: scale

-ms-transform: scale

-o-transform: scale

Transform: scale (1.04)

}

.planContainer .title h3 {

Font-size: 2.125em

Font-weight: 300

Color: # 3e4f6a

Margin: 0

Padding: .6em 0

}

.planContainer .title h3.bestPlanTitle {

Background: # 3e4f6a

Background:-webkit-linear-gradient (top, # 475975, # 364761)

Background:-moz-linear-gradient (top, # 475975, # 364761)

Background:-o-linear-gradient (top, # 475975, # 364761)

Background:-ms-linear-gradient (top, # 475975, # 364761)

Background: linear-gradient (top, # 475975, # 364761)

Color: # fff

Border-radius: 5px 5px 0 0

}

.planContainer .price p {

Background: # 3e4f6a

Background:-webkit-linear-gradient (top, # 475975, # 364761)

Background:-moz-linear-gradient (top, # 475975, # 364761)

Background:-o-linear-gradient (top, # 475975, # 364761)

Background:-ms-linear-gradient (top, # 475975, # 364761)

Background: linear-gradient (top, # 475975, # 364761)

Color: # fff

Font-size: 1.2em

Font-weight: 700

Height: 2.6em

Line-height: 2.6em

Margin: 0 0 1em

}

.planContainer .price p.bestPlanPrice {

Background: # f7814d

}

.planContainer .price p span {

Color: # 8394ae

}

Thank you for reading this article carefully. I hope the article "how to make a beautiful mainframe price list with CSS3" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.