手机版银行信用卡审核进度页面(附源码)

review-progress.png 手机版银行信用卡审核进度页面(附源码) HTML笔记

今天写了一个银行/信用卡/贷款审核进度的页面,除背景和 logo 之外,均使用 HTML+CSS 编写。

只做了简单的手机端兼容,主要是审核进度的进度条效果实现。代码如下:

HTML:

<div class="review-box">
    <span class="line-box">
        <span class="line-inner"></span>
    </span>
    <ul class="status-box">
       <li>
           <span class="dot-box on">
               <span class="dot-inner">
               </span>
           </span>
           <p>待审核</p>
       </li>
       <li>
           <span class="dot-box">
               <span class="dot-inner">
               </span>
           </span>
           <p>审核中</p>
       </li>
       <li>
           <span class="dot-box">
               <span class="dot-inner">
               </span>
           </span>
           <p>放款成功</p>
       </li>
    </ul>
</div>

CSS:

*{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}
/*审核状态*/
.line-box{
    display: block;
    width: 65%;
    height: 2px;
    background: #FFF;
    margin: 0 auto;
}
.line-box .line-inner{
    display: block;
    width: 25%;
    height: 2px;
    background: #00C6FF;
}
.status-box{
    display: flex;
    justify-content: space-around;
    color: #FFF;
    margin-top: -10px;
}
.status-box .dot-box{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: relative;
    background: #FFF;
    box-shadow: 0 5px 10px 0 rgba(239,100,56,0.37);
}
.status-box .dot-box.on{
    background: #00C6FF;
}
.status-box .dot-inner{
    position: absolute;
    left: 7px;
    top: 7px;
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FFF;
}

我将完整的页面上传到我的 GitHub 上面了,有需要的可以去下载:点击访问


赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)