第三章作业

m0_心事

已于 2024-03-17 13:51:09 修改

阅读量309

点赞数 6

文章标签：小程序微信小程序 javascript

于 2024-03-17 13:49:51 首次发布

本文链接：https://blog.csdn.net/m0_74196159/article/details/136780574

版权

操作题（ 1 ）

分析下列代码，所示的页面布局：

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>

wxss代码如下：

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
} 
.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:f9eef7;
  background-color:#0095cd;
}

运行结果：

操作题（2）：

分析页面结构，所示的布局效果

wxml代码如下：

<view class="buju1">
<view class="to">行业趋势指南</view>
<view class="to">年度趋势指南</view>
</view>
<view class="buju2">
<view class="one ynag">最新发布</view>
<view class="ynag">单品</view>
<view class="ynag">色彩</view>
<view class="ynag">风格</view>
<view class="ynag">细节</view>
<view class="ynag">面料</view>
</view>
<view class="buju3">
<view class="tu" style="background: url(/images/con2.jpg);"></view>
<view class="tu" style="background: url(/images/con3.jpg);"></view>
<view class="tu" style="background: url(/images/con4.jpg);"></view>
<view class="tu" style="background: url(/images/con5.jpg);"></view>
<view class="tu" style="background: url(/images/con6.jpg);"></view>
<view class="tu" style="background: url(/images/con7.jpg);"></view>
</view>

wxss代码如下：

.buju1{
  justify-content: space-around;
  display: flex;
  border-bottom: 1.5px solid #d1c8c8;
}
.to{
  text-align: center;
  height: 40px;
  line-height: 40px;
}
.buju2{
  display: flex;
  justify-content: space-around;
  height: 40px;
  line-height: 40px;
  box-shadow: 0 5px 10px  rgba(0, 0, 0, .4);
}
.one{
  border-bottom:2px solid red ;
  /* padding: 0 5px; */
}
.ynag{
  text-align: center;
}
.buju3{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.tu{
margin-top: 10px ;
width: 200px;
border:  1px solid red;
text-align: center;
height: 200px;
line-height: 200px;
}