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;
  width:80%;
  background-color:purple;
  margin:0 auto;}

  section{
  float:left;
  background-color:orange;
  height:300px;
  width:33.333%;}
  section:first-child{
  background-color:pink;
  }
  section:last-child{
  background-color:blue;}
  */
  /*  flex  弹式布局
  display:flex;
  */
  header{
  height:300px;
  width:80%;
  background-color:purple;
  margin:0 auto;
  display:-webkit-flex;}
    section{
  float:left;
  background-color:orange;
  height:300px;
  -webkit-flex:1;}
     section:first-child{
  background-color:pink;
  -webkit-flex:2
  }
  section:last-child{
  background-color:blue;
  -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>
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页