支付流程页面实现（高仿阿里云）

最新推荐文章于 2021-09-04 19:39:45 发布

改天

最新推荐文章于 2021-09-04 19:39:45 发布

阅读量392

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_41896729/article/details/107101334

版权

在这里插入图片描述

<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()
			$

最低0.47元/天解锁文章

改天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
支付流程页面实现（高仿阿里云）

<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; } .pro.
复制链接

扫一扫