导航栏

页面名.json（json中不能有注释，在此处及后面写上只是为了方便理解和记忆）

{
  //标题
  "navigationBarTitleText":"关于",
   //导航栏背景色（任何颜色）
  "navigationBarBackgroundColor":"#fff",
   //标题颜色（只有黑色/白色）
  "navigationBarTextStyle":"white"
}

注：没有单个标签

布局

一 传统布局

about.wxml

<!-- view  容器元素控制其内元素 -->
<view class="container">
  <image src="/images/about.jpg"></image>
  <text>电影周周看</text>
  <text>我每周推荐一部好片</text>
  <text>我的微博weibo.com/simbasong</text>
</view>

about.wxss

/* .info{
   font-weight:bold;
   font-size:30px;
} */
/* 100vh:高度为100% */
.container{
  background-color:#eee;
  height:100vh;
  text-align: center;
}  
/* text元素变为块级元素 */
text {
  display:block;
}
/* 设置image text的下外边距 */
image,text {
  margin-bottom:60px;
}

截图：

在这里插入图片描述

二 弹性盒子

整体布局

/* 100vh:高度为100%
display:flex  实现view的弹性盒子布局
flex-direction:column; 主轴方向为从上到下
justify-content:space-around;主轴方向上每个元素两侧有相同的空余空间
align-items:center; 元素居中
 */
.container{
  background-color:#eee;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
} 

元素大小自适应-rpx

• 所有屏幕的宽 高均为750rpx
  上面代码后面加：

/* border-radius:50% 对应图片设置为圆形
 */
.about-banner {
  width:375rpx;
  height:375rpx;
  border-radius:50%;
}

领取限量云产品优惠