zoukankan      html  css  js  c++  java
  • 绝对定位实现初始化页面

    page {
        height: 100%; /* 必须有这个,下面的才有效 */
    }
    .main {
         750rpx;
        height: 100%;
        position: relative;
        image {
             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;
             750rpx; 
            left: 50%;
            margin-left: -375rpx;    /* 宽度的一半 */
        }
    
        .enter {
            position: absolute;
            bottom: 60rpx;
            left:50%;
            margin-left: -217rpx;
            text-align: center;
             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,撑起整个页面。
    标题和按钮,通过绝对定位定在上面。

  • 相关阅读:
    css3
    js的去重
    mongodb的db.collection is not function
    mongoose的关联查询 :populate
    html/css杂题
    经典的Foo和getName
    AngularJS控制器
    AJAX请求小项目
    AngularJS 依赖注入
    Canvas画布实现自定义时钟效果
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/13718373.html
Copyright © 2011-2022 走看看