小程序启动页面的设计

说明,略


wxml

<!--pages/start/start.wxml-->
<view class='page-body'>
  <image class='start' src='/images/start.jpg'>
    <view class='containr-view'>
      <view class='btn-view'>
        <van-button class='start-btn' size="large" plain round type="default" open-type="getUserInfo">立即体验</van-button>
      </view>
    </view>
  </image>
</view>

wxss

/* pages/start/start.wxss */
.page-body{
  width: 100%;
  height: 100%;
}

.containr-view{
  position: absolute;
  width: 100%;
  height: 200px;
  /* background: red; */
  text-align: center;
  top: 60%;
}
.btn-view{
  /* background: blue; */
  margin-left: auto;
  margin-right: auto;
  width: 33%;
  height: 10px;
}

.start{
  width: 100%;
  height: 100%;
  position: relative;
  align-items: center;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容