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

最新推荐文章于 2024-02-07 13:14:22 发布
最新推荐文章于 2024-02-07 13:14:22 发布
阅读量1.6w 收藏 47
点赞数 7
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanseguhui/article/details/80630548
版权 

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

七上八下的爆米花
关注
  • 7
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
模仿京东商品界面
ArrayAda的博客
06-14 154
一个基本的网页框架，用于模仿京东商品界面，代码主要包括了文档声明（DOCTYPE）、HTML头部（head）和主体（body）部分。
APP点餐系统，HTML,JS,CSS编写
03-17
APP点餐系统，HTML,JS,CSS编写。适用于iphone，流行安卓机，web浏览器，简单修改即可使用。购物车，订单等等页面
商城app我的订单列表页面模板.zip
11-07
商城app我的订单列表页面模板，
您有新订单html,我的订单.html
weixin_42252435的博客
06-07 672
我的订单$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPath...
微信小程序，我的订单（查看详情）
weixin_63954739的博客
10-04 1767
首先是wxml,根据我们之前写的页面的查看详情按钮添加一个按钮，跳转页面即可，现在是详情页面的wxml。
css+html制作订单页面
qq_64595930的博客
12-30 7834
html+css制作简单订单页面效果图
支付确认订单页面实现
最新发布
m0_68935893的博客
02-07 538
类似购物车页面，但是这里商品显示的是购物车选中的商品，所以cart要加下checked过滤；
基于bootstrap+vue+html开发的喜茶订单页面项目
qq_58372242的博客
10-24 2181
大家好,这里是果力成,很久没更了，甚是想念CSDN的大家！毕竟今天是属于我们程序猿的节日，还是需要回来看看的哈哈哈。其实我自认为也没达到一个正规的程序员的标准，但也跟程序打交道了不少时间，在学习编程的那段时间，思维上无疑是对我们有了很大的提升的。拥有编程思维，无论是不是从事IT行业，都对我们处理事情、工作有帮助。今天给大家带来一个前端的简单网页设计制作,利用框架写了一个小页面。前端嘛，所见即所得，虽然目前的主流开源框架都很成熟，但当时其中的三件套学习过程也是很让我着迷啊。
基于html+css+js+jquery的购物页面设计
qq_50280292的博客
10-12 3065
基于html+css+js+jquery的购物页面设计
AngulaJs订单管理页面
y__jinhao的博客
06-05 2147
上部分 <!DOCTYPE html> <html ng-app="lesson" ng-controller="lesson2" > <head> <meta charset ="UTF-8"> <title>Document</title> </head> <body> <p ng-show="IsLoad
订餐app html静态页面
01-04
本文将深入探讨一个基于HTML的订餐app静态页面设计，从布局、交互、功能到视觉效果等方面进行详细解析。 一、布局设计 HTML静态页面的布局是构建应用界面的基础。对于订餐app而言，通常采用响应式布局，确保页面在...
单页HTML5网页源码
01-20
简单的单页网页源码，最新的HTML5网页源码，下载了只要修改一下需要修改的文字图片就可以了的
uin-app仿瑞幸咖啡app5个初始页面
03-29
【uin-app仿瑞幸咖啡app5个初始页面】是一个基于uni.app框架的项目，用于创建类似于瑞幸咖啡APP的启动界面。uni.app是DCloud（原HBuilderX）推出的一款跨端开发框架，它允许开发者编写一次代码，就能在iOS、Android...
使用HTML5编写的移动端仿淘宝页面
10-16
本项目“使用HTML5编写的移动端仿淘宝页面”旨在实现一个与原版淘宝APP相似的用户界面和交互体验，适用于Android移动端。通过这个项目，我们可以深入探讨HTML5在移动应用开发中的应用，以及如何利用它来构建高度交互...
查看所有订单的管理页面html,亚马逊订单管理
weixin_39618806的博客
06-25 1633
卖家可以查看特定日期范围内的所有订单，也可以使用“搜索”和“高级搜索”功能筛选特定类型的订单。要在卖家账户中查看此页面，请点击【订单】菜单中的【管理订单】。以下是一些其他信息：1.由亚马逊配送的订单不显示买家电话号码。如果卖家必须联系买家，请按照联系买家页面上列出的步骤进行操作。2.对于卖家自配送订单，我们会为卖家提供一个能够在配送期间联系上买家的电话号码。在卖家完成配送后，此电话号码将无法再联...
仿淘宝订单管理界面设计
qq_33725412的博客
06-26 7899
由于最近项目需求，需要用到购物类型界面设计，于是仿了淘宝做了一下。 还没学会做gif图，图片先凑合看吧。这是主界面。布局代码如下。 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" and
订单管理系统（含源码）
weixin_30408309的博客
04-29 1万+
本文demo下载和教学视频地址：http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1077 实例使用Php+MySql+html+css技术实现了订单管理系统, 系统可以分为多个角色进行登录操作, 每个角色分别对应相应的功能, 实例中介绍了一个强大的工具phpStudy，它可以一键安装php开发所需要的所有软件...
实现订单列表页面
热门推荐
陌默
04-28 1万+
思路：1. 实现如图1视图布局；2. 实现订单列表功能；3. 订单列表各元素绘制，严格按照如图所示效果设计；4. 实现下拉刷新和上拉加载更多，分页功能5. 列表视图用RecyclerView控件展示接口：uid=71订单列表https://www.zhaoapi.cn/product/getOrdersuid =71 &amp; page=1请求参数说明： uid 用户id字段 String类型 ...
使用vue+elementUI编写一个管理页面，左侧显示管理的模块
04-04
6. 最后，在App.vue中引入管理页面组件，并使用router-view显示相应的内容。 ```html <div id="app"> <router-view></router-view> import Management from '@/views/Management.vue' export default { ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值