绝对定位实现初始化页面
page {
height: 100%; /* 必须有这个,下面的才有效 */
}
.main {
width: 750rpx;
height: 100%;
position: relative;
image {
width: 750rpx;
height: 100%;
}
.title {
font-size: 52rpx;
font-family: FZLanTingHeiS-R-GB;
font-weight: 400;
color: #FFFFFF;
text-shadow: 0rpx 2rpx 10rpx #000000;
position: absolute;
text-align: center;
top:255rpx;
width: 750rpx;
left: 50%;
margin-left: -375rpx; /* 宽度的一半 */
}
.enter {
position: absolute;
bottom: 60rpx;
left:50%;
margin-left: -217rpx;
text-align: center;
width: 434rpx;
height: 87rpx;
background: rgba(24, 126, 254, 0.1);
border-radius: 43rpx;
font-size: 35rpx;
font-family: Source Han Sans CN;
line-height: 87rpx;
font-weight: 400;
color: #187EFE;
}
}
<view class="main">
<image src="/images/init/bg.png" />
<view class="title">
xx平台
</view>
<view class="enter">
立即体验
</view>
</view>
背景图是一个div,撑起整个页面。
标题和按钮,通过绝对定位定在上面。