zoukankan      html  css  js  c++  java
  • html5 流式布局 弹式布局 flex

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>练习 网站导航</title>
        <style>
                  *{
      margin:0;
      padding:0;
      list-style:none;}
      /* 流式布局
      header{
      height:300px;
      80%;
     
      margin:0 auto;}

      section{
      float:left;
     
      height:300px;
      33.333%;}
      section:first-child{
     
      }
      section:last-child{
      }
      */
      /*  flex  弹式布局
      display:flex;
      */
      header{
      height:300px;
      80%;
     
      margin:0 auto;
      display:-webkit-flex;}
        section{
      float:left;
     
      height:300px;
      -webkit-flex:1;}
         section:first-child{
     
      -webkit-flex:2
      }
      section:last-child{
     
      -webkit-flex:1;}
      
        </style>
         <script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
    <header>
        <section></section>
            <section></section>
            <section></section>
        </header>
        <script>
    $(document).ready(function(e) {
               
            });
        </script>
    </body>
    </html>
  • 相关阅读:
    C++模板元编程(二)
    C++模板元编程(一)
    interpret_cast
    Bresenham算法
    Windows中编译Lua源码
    MathJax基础教程与快速参考
    散列表
    Bash脚本实例
    Bash基础
    【iOS】重读《精通Objective-C》(一)
  • 原文地址:https://www.cnblogs.com/lsongyang/p/10618219.html
Copyright © 2011-2022 走看看