第三章页面布局作业

^辞忧 \

已于 2024-03-17 19:52:28 修改

阅读量168

点赞数 3

文章标签：前端 javascript html

于 2024-03-17 15:16:41 首次发布

本文链接：https://blog.csdn.net/2301_81870381/article/details/136781162

版权

分析题：

第一题：分析下列代码，实现如图所示的页面布局。（简易计算机）

代码：

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">×</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: #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;
}

app.wxss文件：

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
}

运行效果：

操作题：

第二题：分析页面结构，实现如下图所示的布局效果。

代码：

wxml文件：

<view>
  <view style="padding:10px">
    <view style="float: left;margin-left: 15px;">行业趋势指南   ∨</view>
    <view style="float: right;margin-right: 15px;">年度趋势指南   ∨</view>
  </view>
<view class="under" style="border-bottom: 1px solid darkgrey;padding: 10px;"></view>
  <view class="dhl" style="padding: 12px;">
      <view class="one" style="border-bottom:3px solid #000;">最新发布</view>
      <view class="two">单品</view>
      <view class="three">色彩</view>
      <view class="four">风格</view>
      <view class="five">细节</view>
      <view class="six">面料</view>
</view>
  <view class="pic"> 
    <image src="../images/01.jpg"/>
  </view>
  <view class="pic">
    <image src="../images/02.jpg"/>
  </view> 
  <view class="pic">
    <image src="../images/03.jpg"/>
  </view>
  <view class="pic">
    <image src="../images/04.jpg"/>
  </view>
  <view class="pic">
    <image src="../images/05.jpg"/>
  </view>
  <view class="pic">
    <image src="../images/06.jpg"/>
  </view>
</view>

wxss文件：

.dhl{
    display: flex;
    justify-content:space-around;
}
.pic image{
    float: left;
    display: block;
    margin-left: 10px;
    margin-top: 8px;
    width: 145px; 
    height: 140px;
  }

运行效果：