第三章作业

豪士面包

于 2024-03-17 18:04:51 发布

阅读量320

点赞数 7

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2301_81892215/article/details/136785501

版权

一.分析题

分析下列代码,如图所示:

wxml代码:

<text>简易计算器</text> 
<view class ="content"> //结果显示屏
<view class ="layout-top">
<view class ="screen">3*8</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>

wxss代码:

设置页面属性

.content{
height:100%;
display:flex;  //浮动
flex-direction:column; //设置主轴为垂直方向,起点在顶端
align-items:center;  //交叉轴中线对齐
background-color:#acc;  //设置背景颜色
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:#a9eef7;
  background-color:#0095cd;
}

运行结果:

二.操作题

wxml代码:

<view class="kaitou"style="border:1px solid #0f0;">
<view>行业趋势指南v</view>
<view>年度趋势指南v</view>
</view>
<view class="shouye"style="border:1px solid #0f0;">
  <view>最新发布</view>
  <view>单品</view>
  <view>色彩</view>
  <view>风格</view>
  <view>细节</view>
  <view>面料</view>
</view>
<view class="two">
<view style="border:1px solid #0f0;width: 150px;height: 150px;"></view>
<view style="border:1px solid #0f0;width: 150px;height: 150px;"></view>
</view>
<view class="two">
<view style="border:1px solid #0f0;width: 150px;height: 150px;"></view>
<view style="border:1px solid #0f0;width: 150px;height: 150px;"></view>
</view>
<view class="two">
<view style="border:1px solid #0f0;width: 150px;height: 150px;"></view>
<view style="border:1px solid #0f0;width: 150px;height: 150px;"></view>
</view>

wxss代码:

.kaitou{
  display: flex;
  padding: 10px;
  justify-content: space-around;
}
.shouye{
  display: flex;
  padding: 10px;
  justify-content: space-around;
}
.two{
  display: flex;
  justify-content: space-around;
}

结果如图: