微信小程序学习笔记之页面布局

本次主要学习页面的一些基本布局

本次页面布局分成三段，第一段，屏幕上的滑动页面
（原谅我电脑上没有正常图片hiahiahia）

{{background}}" wx:key="*this">
 "2077.png">   
 "timg.jpg"> 
 "首杀.jpg">  

.selection{  border-bottom: 2px solid #ddd;}

需要注意的是，wx：for这个条件渲染，并不是必须使用的，因为教程里用了，所以我也使用了，我对条件渲染这个内容还不是特别精通。
如有错误，还请指正。
以上，滑动页面就做好了
如果需要设置更多关于swiper的属性，可以自行去官网查看。
下面来看第二块布局
（我就全部用一张图片了，电脑里图片实在不多）
代码

"selection">
"header">精品推荐
"text-all">全部精品
"content">
"content-item">"2077.png">  "content-item-text">赛博朋克2077 
"content-item">"2077.png">  "content-item-text">赛博朋克2077 
"content-item">"2077.png">  "content-item-text">赛博朋克2077 
"content-item">"2077.png">  "content-item-text">赛博朋克2077 

css

.header{  border-left-width: 2px;
  border-left-style: solid;
    border-left-color: limegreen;
      display: flex;
        justify-content: space-between;
          align-items: center;
          }，
          .text-all{  color: greenyellow;  font-size: 10px;}，
          .content{  display: flex;  flex-direction: row;  flex-wrap: wrap;  justify-content: center;}
          .content-item{height: 250rpx;width: 45%;margin: 2px;position: relative;}
          .content-item image{  width: 100%;  height: 100%;}
          .content-item-text{  position: absolute;  bottom: 0px;color: white;font-size: 10px;background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.8),rgba(0,0,0,0));height: 125px;width:98%;display: flex;flex-direction: column;justify-content: flex-end;padding-left: 1%;padding-right: 1%;padding-bottom: 1%;}
          

以上，第二块实现，这里到没什么需要特别注意的，好好调整页面颜色，让他看起来更顺眼一点。
第三块

还是熟悉的图片

"selection">
"header">热门评测"text-all">全部评测
"list-item">
"list-item-images">
"2077.png" >"timg.jpg" class="avater">

"list-item-text" >
"list-item-text-title"> 标题 "list-item-text-content"> 内容赛博朋克2077 

css

.list-item{  height: 500rpx;  width: 100%;}
.list-item-image{  height: 300rpx;  width: 100%;  position: relative;}
.list-item-image image{  height: 100%;  width: 100%;  }
.list-item-text{  height: 200rpx;  width: 96%;margin-top: 20rpx;padding-left: 2%;padding-right: 2%;}
.avater{  width: 100rpx;  height: 100rpx;  border-radius: 50%;  position: absolute;  bottom: -50rpx;  right: 30px;  top: 630px;}
.list-item-text-content{  font-size: 10px;  color: #999;  margin-top: 20rpx;}

以上，第三块布局完成。
需要注意的是，相对布局和绝对布局，两者相辅相成。
相对布局要注意的是，与之相称的是哪一块绝对布局。
到此，三块布局完成，剩下就是需要微调了。
新人初学，如有错误，请多多指正。