html编写一个手机app的的订单页面

拼搏现实的明天。 2021-09-15 13:28 606阅读 0赞

![70][]

<!DOCTYPE html>
    
    <html lang="zh">
    
    <head>
    
    <meta charset="UTF-8" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    
    <title>Document</title>
    
    <style type="text/css">
    
    html{
    
    font-size: 100px;
    
    }
    
    body,a,ul,li{
    
    padding:0;
    
    margin:0;
    
    list-style: none;
    
    text-decoration: none;
    
    }
    
    body{
    
    /*width: 100%;*/
    
    background: rgb(240,240,240);
    
    font-family: .PingFangSC-Regular;
    
    }
    
    div{
    
    box-sizing: border-box;
    
    }
    
    .header{
    
    position: fixed;
    
    left:0;
    
    top:0;
    
    width:100%;
    
    z-index: 10;
    
    }
    
    .head{
    
    font-size: 0.16rem;
    
    height: 0.44rem;
    
    background: #26A69A ;
    
    color: white;
    
    text-align: center;
    
    line-height: 0.44rem;
    
    }
    
    .head>a{
    
    color: white;
    
    float: left;
    
    margin-left: 0.12rem;
    
    }
    
    .nav{
    
    height: 0.44rem;
    
    background: white;
    
    font-size: 0.12rem;
    
    line-height: 0.44rem;
    
    padding-left: 0.28rem;
    
    
    }
    
    
    
    .nav>ul>li{
    
    float: left;
    
    margin:0px 0.15rem;
    
    
    }
    
    .content{
    
    margin-top:1rem;
    
    }
    
    .cell1{
    
    height: 1.59rem;
    
    background: white;
    
    font-size: 0.12rem;
    
    margin-top:0.13rem;
    
    }
    
    .title{
    
    height: 0.22rem;
    
    border-bottom: 1px solid #D8D8D8;
    
    padding-left: 0.12rem;
    
    padding-right: 0.12rem;
    
    }
    
    .title>span{
    
    float: right;
    
    font-size: 0.09rem;
    
    color: #A4A3A3;
    
    }
    
    .cell{
    
    height: 0.96rem;
    
    background: white;
    
    border-bottom: 1px solid #D8D8D8;
    
    padding:0.12rem 0;
    
    }
    
    .cell>.img{
    
    width: 1.27rem;
    
    height: 0.72rem;
    
      float: left;
    
    margin-left: 0.12rem;
    
    }
    
    /*.content{
    
    overflow: scroll;
    
    }*/
    
    .cell>.text{
    
    width: 2.12rem;
    
    margin-right: 0.12rem;
    
    float:right
    
    }
    
    .cell>.text>span{
    
    display: block;
    
    }
    
    .cell .intro{
    
    font-size: 0.1rem;
    
    color: #A4A3A3;
    
    }
    
    .cell .spay{
    
    font-size: 0.09rem;
    
    color: #A4A3A3;
    
    
    }
    
    .cell .pay{
    
    color: #26A69A ;
    
    font-size: 0.1rem;
    
    }
    
    .footer{
    
    height: 0.32rem;
    
    padding: 0.1rem;
    
    text-align: center;
    
    }
    
    .footer>.btn{
    
    float: right;
    
    }
    
    .option{
    
    width: 0.65rem;
    
    border: 1px solid #26A69A;
    
                border-radius: 2px;
    
                float: left;
    
                margin-left: 0.07rem;
    
    }
    
    
    
    </style>
    
    
    </head>
    
    <body>
    
    <div class="wrap">
    
    <div class="header">
    
    <div class="head">
    
    <a href=""> < </a>
    
    我的订单
    
    </div>
    
    <div class="nav">
    
    <ul>
    
    <li>全部</li>
    
    <li>已付款</li>
    
    <li>未付款</li>
    
    <li>待收货</li>
    
    <li>待评价</li>
    
    </ul>
    
    
    </div>
    
    </div>
    
    <div class="content">
    
    
    
    <div class="cell1">
    
    
    
    
    
    <div class="title">
    
    特斯拉<span>交易成功</span>
    
    </div>
    
    <div class="cell">
    
    
    <div class="text">
    
    <div class="brand">特斯拉</div>
    
    <span class="intro">新能源汽车五座座小型轿车五座汽车五座小型轿车五座汽车</span>
    
    <span class="spay">应付账款￥330.090</span>
    
    <span class="pay">实际付款：￥330.000</span>
    
    </div>
    
    <div class="img"><img src="./dd.jpg"/></div>
    
    </div>
    
    <div class="footer">
    
    <div class="btn">
    
    <div class="option">
    
        删除订单
    
    </div>
    
    <div class="option">
    
    置换新车
    
    </div>
    
    <div class="option">
    
    立即评价
    
    </div>
    
    </div>
    
    
    
    </div>
    
    
    
    </div>
    
    
    </div>
    
    <div class="cell1">
    
    <div class="title">
    
    特斯拉<span>交易成功</span>
    
    </div>
    
    <div class="cell">
    
    
    <div class="text">
    
    <div class="brand">特斯拉</div>
    
    <span class="intro">新能源汽车五座座小型轿车五座汽车五座小型轿车五座汽车</span>
    
    <span class="spay">应付账款￥330.090</span>
    
    <span class="pay">实际付款：￥330.000</span>
    
    </div>
    
    <div class="img"><img src="./dd.jpg"/></div>
    
    </div>
    
    <div class="footer">
    
    <div class="btn">
    
    <div class="option">
    
        删除订单
    
    </div>
    
    <div class="option">
    
    置换新车
    
    </div>
    
    <div class="option">
    
    立即评价
    
    </div>
    
    </div>
    
    
    
    </div>
    
    
    
    </div>
    
    </div>
    
    <div class="cell1">
    
    <div class="title">
    
    特斯拉<span>交易成功</span>
    
    </div>
    
    <div class="cell">
    
    
    <div class="text">
    
    <div class="brand">特斯拉</div>
    
    <span class="intro">新能源汽车五座座小型轿车五座汽车五座小型轿车五座汽车</span>
    
    <span class="spay">应付账款￥330.090</span>
    
    <span class="pay">实际付款：￥330.000</span>
    
    </div>
    
    <div class="img"><img src="./dd.jpg"/></div>
    
    </div>
    
    <div class="footer">
    
    <div class="btn">
    
    <div class="option">
    
        删除订单
    
    </div>
    
    <div class="option">
    
    置换新车
    
    </div>
    
    <div class="option">
    
    立即评价
    
    </div>
    
    </div>
    
    
    
    </div>
    
    
    
    </div>
    
    </div>
    
    <div class="cell1">
    
    <div class="title">
    
    特斯拉<span>交易成功</span>
    
    </div>
    
    <div class="cell">
    
    
    <div class="text">
    
    <div class="brand">特斯拉</div>
    
    <span class="intro">新能源汽车五座座小型轿车五座汽车五座小型轿车五座汽车</span>
    
    <span class="spay">应付账款￥330.090</span>
    
    <span class="pay">实际付款：￥330.000</span>
    
    </div>
    
    <div class="img"><img src="./dd.jpg"/></div>
    
    </div>
    
    <div class="footer">
    
    <div class="btn">
    
    <div class="option">
    
        删除订单
    
    </div>
    
    <div class="option">
    
    置换新车
    
    </div>
    
    <div class="option">
    
    立即评价
    
    </div>
    
    </div>
    
    
    
    </div>
    
    
    
    </div>
    
    </div>
    
    
    </div>
    
    </div>
    
    <script>
    
    
    
    
    autoSize();
    
    
    
    window.onresize = function(){
    
    autoSize();
    
       
    
    }
    
    
    
    function autoSize(){
    
    // 获取当前浏览器的视窗宽度，放在w中
    
    var w = document.documentElement.clientWidth;
    
    // 计算实际html font-size大小
    
    var size = w * 100 / 375 ;
    
    // 获取当前页面中的html标签
    
    var html = document.querySelector('html');
    
    // 设置字体大小样式
    
    html.style.fontSize = size + 'px';
    
    }
    
    </script>
    
    </body>
    
    </html>

[70]: /images/20210813/21be921be19f40268c44902b2a352186.png