zoukankan      html  css  js  c++  java
  • 一个简单的手机端页面布局

    一个简单的手机端页面的布局
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>demo</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
            <div class="box">
                <div class="header"></div>
                <div class="main"></div>
                <div class="footer"></div>
            </div>
    </body>
    </html>
    css
    
    @import url("m_reset.css");
    .wh(@w,@h){
      width:@w;
      height:@h;
    }
    .box{
      .wh(100%,100%);
      .b(green);
      display:-webkit-box;/*定义一个弹性盒*/
      -webkit-box-orient:vertical;/*将弹性盒设置为垂直*/}
    .header{
      .wh(100%,43px);.b(yellow);
    }
    .main{
      -webkit-box-flex:1;/*内容总体分为一份*/
      overflow:scroll;/*滚动条*/
      .b(blue);
    
    }
    .footer{
      .wh(100%,43px);.b(red)
    
    }
  • 相关阅读:
    [HNOI2004]L语言
    [TJOI2018]异或
    如何定位低效SQL?
    索引失效的情况有哪些?
    trace的作用?
    show profile的作用?
    索引的使用原则
    MySQL主从复制的步骤
    什么是聚簇索引
    什么是全文索引?
  • 原文地址:https://www.cnblogs.com/heyiming/p/7007640.html
Copyright © 2011-2022 走看看