zoukankan      html  css  js  c++  java
  • css3 flex写的移动端界面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .wrap-box {
              display: -webkit-box;
            }
    
            .flex-inner {
                -webkit-box-flex: 1;
                display: -webkit-box;
            }
    
            .flex-item {
                -webkit-box-flex: 1;
                background:#ccc;
                position: relative;
            }
            .wrap-6 {
                  -webkit-box-orient: horizontal;
            }
            .wrap-6 .flex-inner {
                  -webkit-box-flex: 0;
                  -webkit-box-orient: vertical;
            }
            .wrap-6 .flex-inner:first-child {
                  width: 66.6%;
            }
            .wrap-6 .flex-inner:last-child {
                  width: 33.3%;
            }
            .wrap-6 .flex-item {
                  padding-top: 100%;
            }
            .wrap-6 .flex-box2 .flex-item {
                  padding-top: 50%;
            }
            .wrap-6 .flex-box2 {
                  display: -webkit-box;
                  -webkit-box-orient: horizontal;
            }
            .wrap-6 .flex-inner:first-child,
            .wrap-6 .flex-box2 .flex-item:first-child {
                  margin-right: 1px;
            }
            .wrap-6 .flex-box1,
            .wrap-6 .flex-inner:last-child .flex-item:first-child,
            .wrap-6 .flex-inner:last-child .flex-item:nth-child(2) {
                  margin-bottom: 1px;
            }
        </style>
    </head>
    <body>
        <div class="wrap-box wrap-6">
            <div class="flex-inner">
              <div class="flex-box1 flex-item"></div>
              <div class="flex-box2">
                <div class="flex-item"></div>
                <div class="flex-item"></div>
              </div>
            </div>
            <div class="flex-inner">
              <div class="flex-item"></div>
              <div class="flex-item"></div>
              <div class="flex-item"></div>
            </div>
        </div>
    </body>
    </html>

    呵呵呵

  • 相关阅读:
    [HDU3487]Play with Chain
    [HDU3436]Queue-jumpers
    [HDU2475]Box
    [HDU1890]RoboticSort
    [BZOJ1500]维修数列
    [POJ3580]SuperMemo
    [POJ3481]Double Queue
    [BZOJ1269]文本编辑器editor
    简单的sql注入
    图片马的制作以及菜刀的使用
  • 原文地址:https://www.cnblogs.com/wysdddh/p/6054699.html
Copyright © 2011-2022 走看看