活动套餐价格表
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>漂亮的套餐价格</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/normalize/8.0.1/normalize.min.css">
<style>
body {
-webkit-font-smoothing: antialiased;
background: #647df9;
}
.bfwcont {
color: #7a90ff;
position: relative;
-webkit-font-smoothing: antialiased;
}
.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 3em;
}
.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 330px;
flex: 0 1 330px;
}
.pricing-action {
color: inherit;
border: none;
background: none;
}
.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: rgba(76, 70, 101, 0.99);
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;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0