css布局实现vip购买充值页面代码
代码语言：html
所属分类：布局界面
代码描述：css布局实现vip购买充值页面代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
@charset "utf-8";
* {
margin: 0;
padding: 0;
list-style: none;
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
background: #f8f8f8;
font-size: 14px;
font-family: "微软雅黑", "宋体", "Helvetica Neue", Arial, Helvetica, sans-serif;
margin: 0 auto;
color: #646464;
}
a {
color: #646464;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #108bf3;
}
*:focus {
outline: none;
}
input {
border: 1px solid #ccc;
border-radius: 2px;
}
input:focus {
outline: none;
border-color: #108bf3;
box-shadow: 0 0 4px rgba(41, 128, 185, 0.4);
-webkit-transition: border-color ease-in-out .2s, -webkit-box-shadow ease-in-out .2s;
-o-transition: border-color ease-in-out .2s, box-shadow ease-in-out .2s;
transition: border-color ease-in-out .2s, box-shadow ease-in-out .2s;
}
em {
font-style: normal;
}
p {
line-height: 28px;
}
.text-f00 {
color: #f00;
}
.line-through {
text-decoration: line-through;
}
/*底部*/
.pay {
padding-left: 10px;
margin: 0 auto;
}
.pay .pay-main {
position: relative;
background-color: #fff;
min-height: 620px;
padding-bottom: 60px;
}
.pay .pay-main .pay-main-title {
height: 70px;
margin: 0 auto;
font-size: 16px;
text-align: center;
line-height: 70px;
border-bottom: 1px solid #eee;
position: relative;
}
.pay .pay-main .pay-main-title i.iconVip {
vertical-align: middle;
display: inline-block;
width: 20px;
height: 20px;
-webkit-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
position: relative;
background: url('//repo.bfw.wiki/bfwrepo/image/60d52cf59ea10.png') no-repeat;
background-size: contain;
}
.pay-main .pay-rmb {
width: 100%;
height: 180px;
margin: 50px auto 37px;
text-align: center;
overflow: unset;
padding-left: 40px;
}
.pay-main .pay-rmb .pay-rmb-price:focus {
outline: none;
-moz-outline: none;
color: #646464;
}
.pay-main .pay-rmb .pay-rmb-price:hover {
color: #646464;
}
.pay-main .pay-rmb .pay-rmb-price.rmbSelect {
border: 2px solid #FF9628;
}
.pay-main .pay-rmb .pay-rmb-price.rmbSelect::before {
display: block;
}
.pay-main .pay-rmb .pay-rmb-price::before {
display: none;
content: ' ';
position: absolute;
bottom: 4px;
right: 2px;
width: 18px;
height: 14px;
background: url('//repo.bfw.wiki/bfwrepo/image/6077e8629ccb9.png') no-repeat;
z-index: 5;
background-size: contain;
}
.pay-main .pay-rmb-price-top {
height: 104px;
font-size: 14px;
text-align: center;
padding-top: 25px;
}
.pay-main .pay-rmb-price-top strong {
font-size: 40px;
}
.pay-main .pay-rmb-price-bottom {
width: 90%;
height: 60px;
text-align: center;
margin: 0 auto;
font-size: 14px;
}
.pay-main .pay-rmb-price-center {
width: 90%;
height: 56px;
border-top: 1px solid #eee;
text-align: center;
padding-top: 20px;
margin: 0 auto;
font-size: 14px;
}
.pay-main .pay-rmb-price-bottom i.iconVip {
display: inline-block;
width: 22px;
height: 22px;
-webkit-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
position: relative;
background: url('//repo.bfw.wiki/bfwrepo/image/6082338622bbb.png') no-repeat;
background-size: contain;
}
.pay-main .pay-rmb .pay-rmb-price {
width: 260px;
-webkit-border-radius: 8px;
border-radius: 8px;
border: 1px solid #eee;
height: 208px;
margin-right: 36px;
float: left;
position: relative;
display: block;
}
.pay-main .pay-rmb .pay-rmb-price .pay-rmb-price-mark {
position: absolute;
display: block;
left: -2px;
top: -2px;
height: 20px;
line-height: 20px;
padding: 0 4px;
background: #FF9628;
font-size: 12px;
color: #fff;
-webkit-border-radius: 6px 0;
border-radius: 6px 0;
}
.pay-main .pay-rmb .pay-rmb-price.rmbSelect::after {
display: block;
border-bottom-color: #FF9628;
border-right-color: #FF9628;
}
.pay-main .pay-rmb .pay-rmb-price::after {
position: absolute;
content: ' ';
bottom: 0;
right: 0;
-webkit-border-radius: 0 0 6px;
border-radius: 0 0 6px;
border: 20px solid transparent;
border-right-color: transparent;
border-bottom-color: transparent;
display: none;
}
.pay-main .pay-remind {
font-size: 12px;
color: #898989;
text-align: center;
padding-top: 10px;
}
.pay-main #pay-form {
padding-top: 15px;
padding-left: 0;
padding-bottom: 0;
}
.pay-main #pay-form #submit-pay-button {
display: block;
cursor: pointer;
border: 0;
line-height: 45px;
text-align: center;
color: #fff;
margin: auto;
width: 200px;
height: 52px;
outline: 0;
font-size: 18px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.pay-main #pay-form #submit-pay-button {
background: linear-gradient(90deg,#fda233 0,#fd8320 100%);
}
.pay-main #pay-form #submit-pay-button:hover {
background: linear-gradient(90deg,#FDAF51 0,#FD9541 100%);
}
.pay-main .pay-problem {
width: 34px;
height: 138px;
padding: 9px 9px 9px 9px;
background: #fff;
border: 1px solid #eee;
position: absolute;
right: 0;
top: 425px;
line-height: 17px;
font-size: 14px;
}
.pay-main .pay-problem:hover .pay-problem-row {
display: block
}
.pay-main .pay-problem .pay-problem-row {
cursor: default;
position: absolute;
z-index: 5;
top: 0;
right: 33px;
width: 240px;
height: 137px;
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
display: none;
padding: 14px;
border-radius: 2px
}
.pay-main .pay-problem .fa-exclamation-triangle {
font-size: 15px;
}
.pay-main .pay-problem .pay-problem-row .pay-problem-row-ques .fa-wpforms {
font-size: 18px;
margin-top: 2px;
float: left;
margin-right: 10px;
}
.pay-main .pay-problem .pay-problem-row .pay-problem-row-ques .problemText {
color: #FC8200;
text-decoration: underline;
}
.pay-main .pay-problem .pay-problem-row .pay-problem-row-phone .fa-phone-square {
font-size: 18px;
float: left;
margin-top: 7px;
margin-right: 10px;
}
.pay-main .pay-problem .pay-problem-row .pay-problem-row-phone p {
float: left;
font-size: 15px
}
.pay-main .pay-problem .pay-problem-row .pay-problem-row-phone p em {
font-weight: 700;
font-size: 16px
}
.pay-main .pay-problem .pay-problem-row .pay-problem-row-ques,.pay-main .pay-problem .pay-problem-row .pay-problem-row-phone {
position: relative;
padding-left: 10px
}
.pay-main .pay-problem .pay-problem-row .pay-problem-row-ques .problemButton {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background-image: none;
text-align: center;
font-weight: 500;
padding: 10px 20px;
margin-top: 20px;
margin-bottom: 10px;
font-size: 14px;
border-radius: 2px;
transition: all 0.3s ease 0s;
background-color: #43a0ff;
color: #FFF;
}
.pay-main .pay-problem .pay-problem-row .pay-problem-row-ques .problemButton:hover {
background-color: #108bf3;
color: #fff;
cursor: pointer;
}
.pay-main .pay-style {
font-size: 16px;
padding-top: 60px;
}
.pay-main .pay-style .pay-style-way {
width: 100%;
}
.pay-main .pay-style .pay-style-way .pay-style-way-tip {
text-align: center;
font-size: 16px;
}
.pay-main .pay-style .pay-style-way .styleWays {
display: inline-block;
overflow: hidden;
padding-top: 10px;
padding-bottom: 20px;
margin-left: 390px;
margin-top: 18px;
}
.pay-main .pay-style .wayAlipay {
background: #fff url('//repo.bfw.wiki/bfwrepo/icon/.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0