第三章作业

最新推荐文章于 2024-09-30 10:36:33 发布

2301_76709443

最新推荐文章于 2024-09-30 10:36:33 发布

阅读量359

点赞数 9

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/2301_76709443/article/details/136780610

版权

文章详细解析了WXML和WXSS在构建微信小程序中的应用，展示了如何使用这两个语言进行页面布局（如屏幕尺寸和按钮组）以及导航链接的设计，包括颜色、字体和组件样式。

摘要由CSDN通过智能技术生成

分析题

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文件

.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: #ccc;  
}
.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;
}

代码效果

操作题

wxml代码

<view class="zl"> 
<view>行业趋势指南 ∨</view>
<view>年度趋势指南 ∨</view>
</view>

<view class="f">
<navigator>最新发布</navigator>
<navigator url="/pages/zlfw1/zlfw1">单品</navigator>
<navigator url="/pages/zlfw1/zlfw1">色彩</navigator>
<navigator url="/pages/zlfw1/zlfw1">风格</navigator>
<navigator url="/pages/zlfw1/zlfw1">细节</navigator>
<navigator url="/pages/zlfw1/zlfw1">面料</navigator>
</view>
 
<view class="w">
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
</view>

wxss代码

page{
  background-color: #efefef;font-size: 15px;
}

.zl{
  display: flex;
  flex-direction: row;
  height: 30px;
  background-color: #fff;
}

.zl view{
 flex: 1;
 text-align: center;
 line-height: 30px;
}
 
.f{padding:0 4px ;
  margin-top: 3px;
  display: flex;
  flex-direction: row;
  height: 30px;
  background-color: #fff;
}

.f navigator{
  flex: 1;
  text-align: center;
  line-height: 30px;
}

.f navigator:first-child{
  border-bottom: 2px solid black;
}

.w{
  display: flex;
  flex-wrap: wrap;
}
.w view{
  width: 140px;
  height: 140px;
  background-color: red;
  text-align: center;
  line-height: 170px;
  margin:8px ;
}

代码效果