绝对定位实现初始化页面

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,撑起整个页面。
标题和按钮,通过绝对定位定在上面。

posted @ 2020-09-23 14:52  TBHacker  阅读(224)  评论(0编辑  收藏  举报