第三章课后习题

一、分析计算机页面布局

      实现如下图所示的效果图

实现步骤 

       在zy3.wxml中写下以下代码：

<view class="c1">
   <view class="ly-top">
     <view class="sc">3×8</view>
   </view>
   <view class="ly-bottom">
      <view class="btg">
         <view class="item orange">C</view>
         <view class="item orange">←</view>
      <view class="item orange">#</view>
      <view class="item orange">+</view>

      
      </view>
      <view class="btg">
         <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="btg">
         <view class="item blue">6</view>
         <view class="item blue">5</view>
         <view class="item blue">4</view>
         <view class="item orange">×</view>
      
      </view>
      <view class="btg">
        <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="btg">
        <view class="item blue zero">0</view>
        <view class="item blue">.</view>
        <view class="item orange">=</view>
      
      
      </view>
   </view>
</view>

    在zy3.wxss文件中写下以下代码：

.c1{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ccc;
  font-family: "Microsoft YaHei";
  overflow-x: hidden;
}
.ly-top{
  width: 100%;
  margin-bottom: 30rpx;
}
.ly-bottom{
  width: 100%;
}
.sc{
  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;
}
.btg{
  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;
}

在app.json中的“window”中更改导航栏标题：

{
  "pages": [
   "pages/zy3/zy3"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "计算机",
    "navigationBarBackgroundColor": "#cccccc"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents"
}

 运行效果

二、实现淘宝类似效果页面

   实现如下图所示的效果图 

 实现步骤 

         在zy3-1.wxml中写下以下代码：

<view class="integrity">
  <view class="tp">
     <view class="ith"> 
        行业趋势指南 V               
     </view>
     <view class="ith">
           年度趋势指南 V
     </view>
     
  </view>
  <view class="er">
      <view class="gh">最新发布   </view>
      <view class="gh1" style="text-align: center;">     单品</view>
      <view class="gh1" style="text-align: center;" >色彩</view>
      <view class="gh1" style="text-align: center;">风格</view>
      <view class="gh1" style="text-align: center;">细节</view>
      <view class="gh1" style="text-align: center;">面料</view>
  
  </view>
  <view class="ys1">
     <view class="fd1"><image src="/img/gg.jpg"/></view>
     <view class="fd1"><image src="/img/sum.jpg"/></view>
    </view>
<view class="ys">
     <view class="fd2"><image src="/img/t.jpg"/></view>
     <view class="fd2"><image src="/img/tyu.jpg"/></view>
    </view>
    <view class="ys">
     <view class="fd3"><image src="/img/yz.jpg"/></view>
     <view class="fd3"><image src="/img/wtw.jpeg"/></view>
    
     
  </view>

</view>

在文件包minprogram中创建文件夹img,并将图片复制进去。

      在zy3-1.wxss中代码如下：

.integrity{
  padding:  10px;
 
  width: 400px;
}
.tp{
 display: flex;
  flex-direction: row;
 text-align:center;
  font-size: 15px;
  width: 300px;
  height: 30px;
  border-bottom: 1px solid #ccc;
  
}
.ith{
  width: 150px;
  margin-right: 10px;
}
.er{
  display: flex;
  flex-direction: row;
  width: 300px;
  text-align:center;
  margin-top: 6px;
  
  height: 20px;
  border-bottom: 1px solid #ccc;
}
.gh1,.gh{
  width:50px;
  font-size: 10px;
  margin-left: 4px;
}
.gh{
  width: 50px;
  border-bottom: 2px solid black;
}
.ys1,.ys{

  width: 300px;
  height: 130px;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.fd1{
  width: 100px;
  
  
  border:2px solid blue;
   margin-top: 20px;
}
.fd1 image,.fd2 image,.fd3 image{
  width: 95px;
  height: 100px;
  text-align: center;
  margin:2px;
}
.fd2{
  width: 100px;
  
  
  border:2px solid blueviolet;
   margin-top: 20px;
}
.fd3{
  width: 100px;
  
  
  border:2px solid brown;
   margin-top: 20px;
}

在app.json中代码如下：

{
  "pages": [
   "pages/zy3-1/zy3-1"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "趋势",
    "navigationBarBackgroundColor": "#cccccc"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents"
}

 

运行效果如下：