这个效果用MUI怎么做出来啊？

分类：MUI

mui

这个效果用MUI怎么做出来啊？

图片中的，本月消费、余额、具体金额；
而且三个竖栏分割；

高手指点给个思路，谢谢

2017-08-13 11:59 负责人:无分享

4 个回复

LLgg

看一下这一个链接 -->>>https://www.zzxxo.com/cs/dx/index.html，是不是符合你的要求。
代码如下：


<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title>模仿中国电信手机端网页-中旋网https://www.zzxxo.com</title>  
    <style>  
        body{  
            margin:0px;  
        }  
        .main{  
            background:url('img.jpg') no-repeat;  
            background-size:100% 130px;  
            height:130px;  
            margin:0 20px 0 20px;  
            color:#fff;  
            border-radius: 5px;  
            font-size:13px;  
        }  
        .border_right{  
            border-right: 1px solid #FFFFFF;  
            box-sizing: border-box;  
            -webkit-box-sizing: border-box;  
        }  
        ul{  
            list-style:none;  
            margin:0px;  
            padding:0px;  

        }  
        li{  
            float:left;  
            width:33.333%;  
            margin-top:25px;  
        }  
        li span{  
            display:block;  
            height:30px;  
            text-align: center;  
            overflow: hidden;  
            text-overflow:ellipsis;  
            white-space: nowrap;  

        }  
        li div{  
            display:block;  
            height:30px;  
            text-align: center;  
            font-size: 18px;  

        }  

    </style>  
</head>  
<body>  
    <div class="main">  
    <ul>  
        <li class="border_right">  
            <span>本月消费78.03元</span>  
            <span>-余额-</span>  
            <div>210.22元</div>  
        </li>  
        <li class="border_right">  
            <span>本月使用582M</span>  
            <span>-流量剩余-</span>  
            <div>1.43G</div>  
        </li>  
        <li>  
            <span>本月呼叫82分钟</span>  
            <span>-语音剩余-</span>  
            <div>618分钟</div>  
        </li>  
    </ul>  
    </div>  
</body>  
</html>

img图片附件