zoukankan      html  css  js  c++  java
  • css横向 弹性盒子布局的一些属性

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap-3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <style type="text/css">
    html,body{

    }
    header{
    position: relative;
    }
    header .center{
    position: relative;
    100px;
    height: 50px;
    background: url(../image/***.png);
    background-size: 74px 19px;
    background-repeat: no-repeat;
    background-position:center center;
    }
    /* 横向 弹性盒子布局 */
    nav{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient:horizontal;
    -webkit-flex-flow:row;
    flex-flow:row;
    position: relative;
    100%;
    height: 40px;
    background-color: #e1017e;
    }
    nav .menu{
    -webkit-box-flex:1;
    -webkit-flex: 1;
    flex: 1;
    100%;
    height: 40px;
    line-height: 40px;
    font-size:13px;color:#fff; text-align: center;
    }
    </style>
    </head>
    <body>
    <header>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
    </header>
    <nav>
    <div class="menu">水果</div>
    <div class="menu">零食</div>
    <div class="menu">食材</div>
    <div class="menu">牛奶</div>
    <div class="menu">蔬菜</div>
    </nav>
    <div></div>
    </body>

  • 相关阅读:
    pl2303 驱动
    tomcat 启动脚本
    Linux下Shell命令加减乘除计算
    定时删除文件夹"$1"下最后修改时间大于当前时间"$2"天的文件
    mysql 拼接字符
    jquery iframe父子框架中的元素访问方法
    在线工具
    js对数组对象的操作以及方法的使用
    HTML 设置字体
    10月1号 备忘录
  • 原文地址:https://www.cnblogs.com/moli-/p/6322841.html
Copyright © 2011-2022 走看看