第三章作业

最新推荐文章于 2024-10-04 00:46:18 发布

海鱼儿~哟

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量328

点赞数 5

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_74394165/article/details/136769542

版权

1.分析以下代码实现页面布局：

.wxml
<view class="content">
<view class="layout-top">
<view class="screen">3x8</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 cla8s="item orange">x</view>
</view>
<view class ="btnGroup">
<view class ="item blue" >3 </view >
<view class="item blue" >2</view >
<view class="item blue" >l</iew >
<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
.container{
    height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
padding:200rpx 0;
}
.wxss
.content{
    height:100%;
display: flex;
flex-direction:column;
align-items:center;
background-color:#ccc;
font-family:"Microsoft YaHei";
overflow-x:hidden;
}
.lavout-topi{
    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;
}
.biue{
    color:#d9eef7;
background-color:#0095cd;
}

代码结果：

2.分析页面结构，实现布局

代码：

//.wxml
<view class="cont1">
<view class="item2">行业趋势指南</view>
<view class="item2">年度趋势指南</view>
</view>
<view class="cont1">
<view class="item3">新品发布</view>
<view class="item3">单品</view>
<view class="item3">彩色</view>
<view class="item3">风格</view>
<view class="item3">细节</view>
<view class="item3">面料</view>
</view>
<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
</view>
<view class="cont1">
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
<view class="item">5</view>
<view class="item">6</view>
</view>
//.wxss
.cont1{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}
.item{
    order: number;
    background-color: #ccc;
    height: 150px;
    width: 150px;
    margin: 4px;
}
.item2{
    height: 30px;
    width: 150px;
    margin: 4px;
    text-align: center;
    background-color:rgba(255, 255, 255, 0.521);
}
.item3{
    font-size: 12px;
    height: 30px;
    width: 60px;
    text-align: center;
    margin: 2px;
    background-color: rgba(255, 255, 255, 0.87);
}

运行结果：