小程序开发—第二弹：WXSS样式

弹窗提示

消息提示弹窗

微信官方文档

wx.showToast({ // 显示Toast
   title: '已发送',
   icon: 'success',
   duration: 1500
})

确认消息弹窗

wx.showModal({
  title: '标题',
  content: '告知当前状态，信息和解决方法',
  confirmText: '确定',
  cancelText: '返回',
  success: function(res) {
    if (res.confirm) {
      console.log('用户点击主操作')
    } else if (res.cancel) {
      console.log('用户点击次要操作')
    }
  }
})

盒模型

#widthFix{
  width:187.6px;  /*表示只改变content宽度*/
  padding-left:20px;
  box-sizing:border-box;/*说明width定义的是整个标签的宽度，算法padding*/
  //结果如第二个腾讯课堂所示
}

尽量不要使用px，使用%号，因为手机不同，界面大小不同。

position定位

position 属性	说明
static	静态
relative	相对，相对于自己原来的位置偏移
absolute	绝对，相对于最近的非static，如果没有就相对于page
fixed	固定，一般来说相对于整个屏幕，滑动屏幕也不会改变位置

flex使用

使用flex可以去flex实例网站做测试

初始学习成果

主要分为三大部分
头部，身体，底部
没有实现具体功能，只是样式
具体实现代码连接
github-小程序基础

居中显示文本

在view中上下居中，并且水平居中显示文本

  /*flex 布局*/
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  /*实现水平居中*/
  justify-content: center;

效果图