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

最新推荐文章于 2025-06-11 16:23:44 发布

七上八下的爆米花

最新推荐文章于 2025-06-11 16:23:44 发布

阅读量1.7w

点赞数 7

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/lanseguhui/article/details/80630548

html 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了一个简单的订单页面布局实现方案，包含头部导航、订单详情展示及底部操作按钮等元素，并通过CSS进行了样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>