• 移动端的网页试做


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script src="../js/rem.js"></script>
    <style>

    *{margin: 0;padding: 0;}
    body{
    background: #DFDFDF;
    }
    .header{
    16 rem;
    height: 11.52rem;
    background-image: url(../img/621/phbanner_d8a9fb8.png);
    background-size: 100% 100%;
    margin-bottom: .6rem;}

    .content{ 15.146666666666667rem;
    height: 100rem;
    background-color: #FFFFFF;
    margin: 0 auto;}

    .content{
    padding-top: .5rem;
    }

    .tip{
    5.12rem;
    height: 1.024rem;
    background: orange;
    border-radius: 0 12px 12px 0;

    color: #FFFFFF;
    text-align: center;
    font-size: 50px;


    }

    .model{
    display: flex;

    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    }
    .model_l{
    5rem;
    font-size: 20px;

    margin-left:.5rem;

    }

    .model_r{
    5.973333333333334rem;
    height: 8.96rem;
    background: url(../img/621/1_05274d6.png) ;
    background-size: 100% 100%;
    flex: none;
    -webkit-flex: none;

    margin-right: .5rem;

    }

    </style>
    </head>
    <body>
    <div class="container">
    <div class="header">

    </div>
    <div class="content">
    <div class="tip">抢票攻略</div>
    <div class="model">
    <div class="model_l">
    <h1>第一步:打开</h1>
    <p>这里有个严肃的问题</p>
    <p>这玩意儿之后怎么处理?</p>
    </div>
    <div class="model_r"></div>
    </div>
    <div class="model">
    <div class="model_r"></div>
    <div class="model_l">
    <h1>第一步:打开</h1>
    <p>这里有个严肃的问题</p>
    <p>这玩意儿之后怎么处理?</p>
    </div>

    </div>

    </div>

    </div>

    </body>
    </html>

  • 相关阅读:
    小错误
    创建表空间
    mysql
    myeclipse
    linux命令小结
    jquery
    java基础
    【学习笔记】【多项式】多项式插值相关_个人学习用
    SHUoj 神无月排位赛
    SHUoj 字符串进制转换
  • 原文地址:https://www.cnblogs.com/thestudy/p/5604951.html
Copyright © 2020-2023  润新知