首页 > 编程语言 >微信小程序第三章作业

微信小程序第三章作业

时间:2024-03-17 19:58:07浏览次数:30  
标签:flex 第三章 wxml 微信 100% 作业 width wxss display

目录

一、分析下列代码,实现如图页面布局。

         主要分为2部分,wxml文件和wxss文件代码如下:

 运行结果如下:

​编辑二、 分析页面结构,实现如图效果。

         wxml和wxss文件代码如下:

        运行结果如下:


一、分析下列代码,实现如图页面布局。

         主要分为2部分,wxml文件和wxss文件代码如下:

//index.wxml
<view class="content">
  <view class="layout-top">
    <view class="screen">168</view>
  </view>
  <view class="layout-bottom" >
    <view class="btnGroup">
      <view class="item orange" >C</view>
      <view class="item orange" >⬅</view>
      <view class="item orange" >#</view>
  <view class="item orange"> +</view>
  </view>
  <view class="btnGroup">
    <view class="item blue" >9</view>
    <view class="item blue" >8</view>
    <view class="item blue" >7</view>
    <view class ="item orange" >- </view>
  </view>
  <view class="btnGroup">
    <view class="item blue" >6</view>
    <view class="item blue">5</view>
    <view class="item blue">4 </view>
    <view class="item orange">x </view>
  </view>
  <view class="btnGroup">
    <view class="item blue">3 </view>
    <view class ="item blue">2</view>
    <view class="item blue" >1</view>
    <view class="item orange">➗</view>
  </view>
  <view class="btnGroup">
    <view class ="item blue zero">0 </view>
    <view class="item blue" >. </view>
    <view class="item orange">=</view>
  </view>
  </view>
</view>
//app.wxss
/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
//index.wxss
//index.wxss
.content{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ccc;
  font-family: "Microsoft YaHei";
  overflow-x: hidden;
}
.layout-top{
  width: 100%;
  margin-bottom: 30rpx;
}
.layout-bottom{
  width: 100%;
}
.screen{
  text-align: right;
  width: 100%;
  line-height: 130rpx;
  padding: 0 10rpx;
  font-weight: bold;
  font-size: 60px;
  box-sizing: border-box;
  border-top: 1px solid #fff;
}
.btnGroup{
  display: flex;
  flex-direction: row;
  flex: 1;
  width: 100%;
  height: 4rem;
  background-color: #fff;
}
.item{
  width: 25%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: 1px;
  margin-right: 1px;
}
.zero{
  width: 50%;
}
.orange{
  color: #fef4e9;
  background: #f78d1d;
  font-weight: bold;
}
.blue{
  color: #d9eef7;
  background-color: #0095cd;
}

 运行结果如下:

二、 分析页面结构,实现如图效果。

         wxml和wxss文件代码如下:

//index.wxml
<view class="container">
  <view class="item1">
    <view class="item2">行业趋势指南 ∨</view>
    <view class="item3">年度趋势指南 ∨</view>
  </view>
  <view class="item4" style="border-bottom: 1px solid darkgrey;padding: 10px;"></view>
  <view class="app" style="padding: 10px;">
      <view class="app1" style="border-bottom:5px solid #000;">最新发布</view>
      <view class="app2">单品</view>
      <view class="app3">色彩</view>
      <view class="app4">风格</view>
      <view class="app5">细节</view>
      <view class="app6">面料</view>
  </view>
  <view class="col">
  <view class="col1" style="border: 2px solid #000;width: 120px;height: 120px;margin: 10px 30px;background-color:paleturquoise;"></view>
  <view class="col2" style="border: 2px solid #000;width: 120px;height: 120px;margin: 10px 30px;background-color: pink;"></view>
</view>
<view class="col">
  <view class="col3" style="border: 2px solid #000;width: 120px;height: 120px;margin: 0 30px;background-color: purple;"></view>
  <view class="col4" style="border: 2px solid #000;width: 120px;height: 120px;margin: 0 30px;background-color: yellowgreen;"></view>
</view>
  <view class="col">
  <view class="col5" style="border: 2px solid #000;width: 120px;height: 120px;margin: 10px 30px;background-color: skyblue;"></view>
  <view class="col6" style="border: 2px solid #000;width: 120px;height: 120px;margin: 10px 30px;background-color: red;"></view>
  </view>
</view>
//index.wxss
.container{
  height: 100%;
}
.item1,.app{
  display: flex;
  justify-content:space-around;
}
.item2,.item3{
  margin-top:-100px;
}
.app{
  margin-top: -90px;
}
.col{
  display: flex;
  flex-direction: row;
}

        运行结果如下:

标签:flex,第三章,wxml,微信,100%,作业,width,wxss,display
From: https://blog.csdn.net/2203_75914084/article/details/136788060

相关文章

  • 第三章作业
    一、分析题实现如下图的页面布局indexwxml//index.wxml<viewclass="content"><viewclass="layout-top"><viewclass="screen">168</view></view><viewclass="layout-bottom"><viewcla......
  • 第三章作业
    简易计算机:.wxml代码:<viewclass="content"><viewclass="layout-top"><viewclass="screen">168</view></view><viewclass="layout-bottom"><viewclass="btnGroup"&g......
  • 第三章作业
    一.分析题1.index.wxml<viewclass="content"><viewclass="layout-top"><viewclass="screen">168</view></view><viewclass="layout-bottom"><viewclass="btnGroup"......
  • 微信小程序 个体工商户填报 骗局
    今天,接到一通来自“营业执照线上年审处”的工作人员的电话说营业执照异常,要重新提交结果直接来个小程序,名字叫“个体工商户填报”,一看小程序主体就不对劲,福建的,非政府机构......
  • 第三章作业
    实现一个简易计算器wxml代码示例:<viewclass="content"><viewclass="layout-top"><viewclass="screen">168</view></view><viewclass="layout-bottom"><viewclass="btnGroup">&......
  • 微信小程序云开发教程——墨刀原型工具入门(表单组件)
      引言作为一个小白,小北要怎么在短时间内快速学会微信小程序原型设计?“时间紧,任务重”,这意味着学习时必须把握微信小程序原型设计中的重点、难点,而非面面俱到。要在短时间内理解、掌握一个工具的使用,最有效的方式莫过于临摹:看实例视频教程,并跟着教程在实例素材上操作。......
  • java毕业设计基于微信小程序的疫情点餐系统
    本系统(程序+源码)带文档lw万字以上  文末可领取本课题的JAVA源码参考系统程序文件列表系统的选题背景和意义在当今社会,随着移动互联网技术的飞速发展和智能手机的普及,微信小程序以其便捷性和高效性成为人们生活中不可或缺的一部分。特别是在新冠疫情的影响下,无接触服务成......
  • 第三章课后习题
    一、分析计算机页面布局   实现如下图所示的效果图实现步骤     在zy3.wxml中写下以下代码:<viewclass="c1"><viewclass="ly-top"><viewclass="sc">3×8</view></view><viewclass="ly-bottom">......
  • 微信小程序uniapp+vue+nodejs宝宝成长记录系统的设计与实现
    本文先通过对相关系统的调研,提出开发基于微信小程序的宝宝成长记录系统的意义,然后使用当前主流的技术进行开发,满足基于微信小程序的宝宝成长记录系统的技术要求,分析系统需要实现的功能并进行设计。梳理业务流程,并根据功能设计数据库,最后通过编码实现,介绍实现的关键算法逻辑。在......
  • 第三章 vim 以及 重点第四章 使用DataGrip mysql
    16/3/2024如没有特殊说明使用软件操作一律都是FinalShell第三章Vim编辑器的使用1)三种操作模式命令模式:使用快捷指令操作的文件内容插入模式(编辑模式):可以输入文字信息,此时快捷指令失效末行模式(低行模式),底线命令模式):可以保存退出或者替换文字等只能编辑文本内容不......