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

最新推荐文章于 2024-02-07 13:14:22 发布
最新推荐文章于 2024-02-07 13:14:22 发布
阅读量1.6w 收藏 47
点赞数 6
分类专栏： 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>

七上八下的爆米花
关注
  • 6
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
微信小程序开发之——个人中心-订单物流查询(8)(1)
2401_84149724的博客
04-20 993
remark”: “郴州市邮政速递物流公司国际快件监管中心已收件（揽投员姓名：侯云,联系电话:）【郴州市】”,(img-ZARkAknc-1713608511092)](img-n5Znz2vb-1713608511094)](img-sDEzGl5n-1713608511096)]“remark”: “离开贵阳市 发往毕节地区（经转）【贵阳市】”,“remark”: “离开长沙市 发往贵阳市（经转）【长沙市】”,Android对标阿里P7学习视频。Android对标阿里P7学习视频。
商城app我的订单列表页面模板.zip
11-07
商城app我的订单列表页面模板，
APP点餐系统，HTML,JS,CSS编写
03-17
APP点餐系统，HTML,JS,CSS编写。适用于iphone，流行安卓机，web浏览器，简单修改即可使用。购物车，订单等等页面
css+html制作订单页面
qq_64595930的博客
12-30 7687
html+css制作简单订单页面效果图
您有新订单html,我的订单.html
weixin_42252435的博客
06-07 669
我的订单$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPath...
微信小程序，我的订单（查看详情）
weixin_63954739的博客
10-04 1621
首先是wxml,根据我们之前写的页面的查看详情按钮添加一个按钮，跳转页面即可，现在是详情页面的wxml。
支付确认订单页面实现
最新发布
m0_68935893的博客
02-07 528
类似购物车页面，但是这里商品显示的是购物车选中的商品，所以cart要加下checked过滤；
基于bootstrap+vue+html开发的喜茶订单页面项目
qq_58372242的博客
10-24 2157
大家好,这里是果力成,很久没更了，甚是想念CSDN的大家！毕竟今天是属于我们程序猿的节日，还是需要回来看看的哈哈哈。其实我自认为也没达到一个正规的程序员的标准，但也跟程序打交道了不少时间，在学习编程的那段时间，思维上无疑是对我们有了很大的提升的。拥有编程思维，无论是不是从事IT行业，都对我们处理事情、工作有帮助。今天给大家带来一个前端的简单网页设计制作,利用框架写了一个小页面。前端嘛，所见即所得，虽然目前的主流开源框架都很成熟，但当时其中的三件套学习过程也是很让我着迷啊。
基于html+css+js+jquery的购物页面设计
qq_50280292的博客
10-12 3031
基于html+css+js+jquery的购物页面设计
AngulaJs订单管理页面
y__jinhao的博客
06-05 2143
上部分 <!DOCTYPE html> <html ng-app="lesson" ng-controller="lesson2" > <head> <meta charset ="UTF-8"> <title>Document</title> </head> <body> <p ng-show="IsLoad
查看所有订单的管理页面html,亚马逊订单管理
weixin_39618806的博客
06-25 1612
卖家可以查看特定日期范围内的所有订单，也可以使用“搜索”和“高级搜索”功能筛选特定类型的订单。要在卖家账户中查看此页面，请点击【订单】菜单中的【管理订单】。以下是一些其他信息：1.由亚马逊配送的订单不显示买家电话号码。如果卖家必须联系买家，请按照联系买家页面上列出的步骤进行操作。2.对于卖家自配送订单，我们会为卖家提供一个能够在配送期间联系上买家的电话号码。在卖家完成配送后，此电话号码将无法再联...
单页HTML5网页源码
01-20
简单的单页网页源码，最新的HTML5网页源码，下载了只要修改一下需要修改的文字图片就可以了的
APP点餐系统，HTML,JS,CSS编写。适用于iphone
06-11
APP点餐系统，HTML,JS,CSS编写。适用于iphone，流行安卓机，web浏览器，简单修改即可使用。购物车，订单等等页面
APP点餐系统HTML,JS,CSS，H5。DEMO
09-19
APP点餐系统，HTML,JS,CSS编写。适用于iphone，流行安卓机，web浏览器，简单修改即可使用。购物车，订单等等页面
APP点餐系统HTML, Js, css,H5。DEMO-HTML .5代码类资源
06-12
APP点餐系统，HTML,JS,CSS编写。适用于iphone，流行安卓机，web浏览器，简单修改即可使用。购物车，订单等等页面
易达(Wap)手机建站系统最新官方版
04-02
只要您会DIV+CSS或其它代码编写模板，那您就可以利用本系统的标签做出功能强大的手机网站。 易达WAP操作便捷并具有高度延续开发的内容与知识的管理系统，适用于中小企业手机网站使用。易达手机建站系统全面支持上传...
仿淘宝订单管理界面设计
qq_33725412的博客
06-26 7892
由于最近项目需求，需要用到购物类型界面设计，于是仿了淘宝做了一下。 还没学会做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开发所需要的所有软件...
微信开发者工具制作一个购物app附前端源代码
12-21
微信开发者工具是一款非常强大的工具，可以帮助开发者快速、高效地制作各种微信小程序。如果要用微信开发者工具制作一个购物app，首先需要构建一个完整的前端代码。在编写前端代码时，可以使用HTML、CSS和JavaScript等技术来实现页面布局、样式设计和交互功能。 在购物app的前端代码中，需要包含用户登录注册、商品浏览、购物车管理、订单支付等功能模块。其中用户登录注册模块可以使用微信小程序提供的登录授权功能，商品浏览模块可以展示商品列表和详情页面，购物车管理模块可以实现商品的添加、删除和数量编辑，订单支付模块可以调用微信支付接口完成支付操作。 在编写前端代码时，可以充分利用微信小程序提供的组件和API，如swiper、swiper-item、button、input等组件来实现页面的布局和功能。同时也要注意前端代码的性能优化和用户体验设计，确保app在不同的设备上都能正常运行并且具有良好的用户体验。 最后，完成了购物app的前端代码后，需要在微信开发者工具中创建一个新的小程序项目，并将前端代码导入到项目中进行调试和预览。在微信开发者工具中，可以通过模拟器和真机调试来检查程序的运行效果，并及时发现和修复bug。 总之，用微信开发者工具制作一个购物app的前端代码需充分利用HTML、CSS、JavaScript等技术，并结合微信小程序提供的组件和API来实现各种功能模块，最终达到一个用户友好的购物体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值