<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
.start-card{
margin-left:300px ;
margin-top: 30px;
}
.processBar{
float: left;
width: 300px;
margin-top: 15px;
}
.processBar .bar{
background: rgb(230, 224, 236);
height: 3px;
position: relative;
width: 285px;
margin-left: 10px;
}
.processBar .b-select{
background: rgb(96, 72, 124);
}
.processBar .bar .c-step{
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgb(230, 224, 236);
left: -12px;
top: 50%;
margin-top: -4px;
}
.processBar .bar .c-select{
width: 10px;
height: 10px;
margin: -5px -1px;
background:rgb(96, 72, 124);
}
.main-hide {
position: absolute;
top: -9999px;
left: -9999px;
}
.poetry{
color: rgb(96, 72, 124);
font-family: KaiTi_GB2312, KaiTi, STKaiti;
font-size: 16px;
background-color: transparent;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
button{
width: 80px;
line-height: 30px;
font-size: 11px;
color: rgb(116, 42, 149);
text-align: center;
border-radius: 6px;
border: 1px solid #e2e2e2;
cursor: pointer;
background-color: #fff;
outline:none;
}
button:hover{
border: 1px solid rgb(179, 161, 200);
}
.next-card {
padding: 16px;
border: 1px solid #d7d8d9;
box-shadow: 0 0 0 #fff;
min-width: 100px;
display: inline-block;
background: #fff;
}
.next-card-head-bottom {
padding-bottom: 16px;
border-bottom: 2px solid #ebecec;
}
.module-card {
margin-bottom: 22px;
}
.next-card-head {
color: #373d41;
font-size: 18px;
}
.next-card {
color: #373d41;
font-family: PingFangSC-Light,helvetica neue,hiragino sans gb,arial,microsoft yahei ui,microsoft yahei,simsun,sans-serif;
font-size: 12px;
line-height: 1.28571;
}
.next-card-head-prefix .next-card-title {
border-left: 4px solid transparent;
padding-left: 8px;
}
.font-color-warning-2 {
color: #ff8a00;
}
.next-card-extra {
font-size: 16px;
color: #373d41;
padding: 0;
float: right;
}
.next-card-sub-title {
font-size: 12px;
color: #73777a;
padding-left: 8px;
}
.next-row .next-col-offset-8 {
margin-left: 33.33333%;
}
.next-row .next-col-m-16 {
-moz-flex: 0 0 66.66667%;
-ms-flex: 0 0 66.66667%;
flex: 0 0 66.66667%;
max-width: 66.66667%;
width: 66.66667%;
}
.next-row .next-col-m-18 {
-moz-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
width: 75%;
}
.pc .order-list .order-row, .pc .order-list .suborder-row {
padding: 0 13px;
line-height: 24px;
}
.font-color-text1-2 {
color: #9b9ea0;
}
.module-card {
margin-bottom: 22px;
}
.united-row {
max-width: 1200px;
margin: 0 auto;
}
.discount-summary {
line-height: 1.5;
}
Style Attribute {
font-size: 12px;
}
/* .next-col-m-16 {
-moz-flex: 0 0 66.66667%;
-ms-flex: 0 0 66.66667%;
flex: 0 0 66.66667%;
max-width: 66.66667%;
width: 66.66667%;
} */
/* .next-row .next-col-m-8 {
-moz-flex: 0 0 33.33333%;
-ms-flex: 0 0 33.33333%;
flex: 0 0 33.33333%;
max-width: 33.33333%;
width: 33.33333%;
} */
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" >
var type =1
var check=false
$(document).ready(function(){
// $("#education").addClass('main-hide');
//初始化
// $("#kkkkkk").hide()
$("#kkkkkk"
支付流程页面实现 (高仿阿里云)
最新推荐文章于 2021-09-04 19:39:45 发布
本文详细介绍了如何使用HTML技术,实现一个高度仿照阿里云支付流程的页面。通过学习,读者将掌握静态网页设计的基本技巧,包括布局、样式和交互元素的应用。
摘要由CSDN通过智能技术生成