css-布局系列

1.1div+css布局demo1

 <!-- html部分 -->
    <div class="header"></div>
    <div class="nav"></div>
    <div class="content">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
 /* css部分 */
         .header{
             width: 100%;
             height: 200px;
             background-color: red;
         }
         .nav{
             width: 100%;
             height: 100px;
             background-color: pink;
         }
         .content{
             width: 100%;
             height: 500px;
             background-color:orange;
         }
         .left,.center,.right{
             width: 33.33%;
             height: 500px;
             float: left;
         }
         .left{
             background-color:palegoldenrod;
         }
         .center{
             background-color:palegreen;
         }
         .right{
             background-color:palevioletred;
         }
         
         .footer{  
             width: 100%;
             height: 200px;
             background-color:deepskyblue;
         }

1.2div+css布局demo2

 <!-- html部分 -->
    <div class="content">
        <div class="left">
            <div class="left-top"></div>
            <div class="left-bottom"></div>
        </div>
        <div class="right"></div>
    </div>
 /* css部分 */
        .content{
            width: 100%;
            height: 500px;
        }
        .left,.right{
            width: 50%;
            height: 500px;
            float: left;
        }
        .left{
            background-color: palevioletred;
        }
        .left-top,.left-bottom{
            width: 100%;
            height: 250px;
        }
        .left-top{
            background-color: pink;
        }
        .left-bottom{
            background-color: green;
        }
        .right{
            background-color: blue;
        }

1.3div+css布局demo3

<!-- html部分 -->
    <div class="content">
        <div class="left"></div>
        <div class="right">
            <div class="top"></div>
            <div class="bottom"> 
                <div class="bottom_left"></div>
                <div class="bottom_right"></div>
            </div>
        </div>
    </div>
 /* css部分 */
        .content{
            width: 100%;
            height: 500px;
        }
        .left{
            width: 30%;
            height: 500px;
            background-color: red;
            float: left;
        }
        .right{
            width:70%;
            height: 500px;
            float: left;
        }
        .top,.bottom{
            width: 100%;
            height: 50%;
        }
        .top{
            background-color: green;
        }
        .bottom{
            background-color: orchid;
        }
        .bottom_left,.bottom_right{
            width: 50%;
            height: 100%;
            float: left;
        }
        .bottom_left{
            background-color: plum;
        }
        .bottom_right{
            background-color: orange;
        }

2.基础而又好玩flex布局（参考mdn）

<!-- html部分 -->
    <p>Flexbox 基础布局</p>
  <div class="flex">
    <div>left</div>
    <div>center</div>
    <div>right</div>
  </div>
 /* css部分 */
        .flex
   {
      /* 基本样式 */
      width: 350px;
      height: 200px;
      border: 1px solid #555;
      font: 14px Arial;

      /*  建立弹性框 */
      display: -webkit-flex;
      -webkit-flex-direction: row;
      display: flex;
      flex-direction: row;
   }
   .flex > div
   {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;

      width: 30px; 
      -webkit-transition: width 0.7s ease-out;
      transition: width 0.7s ease-out;
   }
   /* colors */
   .flex > div:nth-child(1){ background : #009246; }
   .flex > div:nth-child(2){ background : #F1F2F1; }
   .flex > div:nth-child(3){ background : #CE2B37; }

   .flex > div:hover
   {
        width: 200px;
   }

3.圣杯布局

 <!-- html部分 -->
    <header>header</header>
 <div id='main'>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
 </div>
 <footer>footer</footer>
 /* css部分 */
        body {
            font: 24px Helvetica;
            background: #999999;
        }

        #main {
            min-height: 800px;
            margin: 0px;
            padding: 0px;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-flow: row;
            flex-flow: row;
        }

        #main>article {
            margin: 4px;
            padding: 5px;
            border: 1px solid #cccc33;
            border-radius: 7pt;
            background: #dddd88;
            -webkit-flex: 3 1 60%;
            flex: 3 1 60%;
            -webkit-order: 2;
            order: 2;
        }

        #main>nav {
            margin: 4px;
            padding: 5px;
            border: 1px solid #8888bb;
            border-radius: 7pt;
            background: #ccccff;
            -webkit-flex: 1 6 20%;
            flex: 1 6 20%;
            -webkit-order: 1;
            order: 1;
        }

        #main>aside {
            margin: 4px;
            padding: 5px;
            border: 1px solid #8888bb;
            border-radius: 7pt;
            background: #ccccff;
            -webkit-flex: 1 6 20%;
            flex: 1 6 20%;
            -webkit-order: 3;
            order: 3;
        }

        header,
        footer {
            display: block;
            margin: 4px;
            padding: 5px;
            min-height: 100px;
            border: 1px solid #eebb55;
            border-radius: 7pt;
            background: #ffeebb;
        }

        /* 窄到已不足以支持三栏 */
        @media all and (max-width: 640px) {

            #main,
            #page {
                -webkit-flex-flow: column;
                flex-direction: column;
            }

            #main>article,
            #main>nav,
            #main>aside {
                /* 恢复到文档内的自然顺序 */
                -webkit-order: 0;
                order: 0;
            }

            #main>nav,
            #main>aside,
            header,
            footer {
                min-height: 50px;
                max-height: 50px;
            }
        }

4.双飞翼布局

<div class="header"></div>
	<div class="content">
		<div class="middle">
			<div class="inner-middle"></div>
		</div>
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="footer"></div>
.header {
            width: 100%;
            height: 30px;
            background: red;
        }

        .content {
            overflow: hidden;
        }

        .footer {
            width: 100%;
            height: 30px;
            background: red;
        }

        .middle {
            width: 100%;
            float: left;
        }

        .inner-middle {
            width: 100%;
            height: 80px;

            background: green;
        }

        .left {
            width: 100px;
            float: left;
            height: 80px;
            margin-left: -100%;
            background: yellow;
        }

        .right {
            width: 100px;
            float: left;
            height: 80px;
            margin-left: -100px;
            background: pink
        }

5.grid实现九宫格布局

<!-- html部分 -->
    <div id="parent">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
/* css部分 */
        #parent {
            width: 1200px;
            height: 500px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            /*等同于1fr 1fr 1fr,此为重复的合并写法*/
            grid-template-rows: repeat(3, 1fr);
            /*等同于1fr 1fr 1fr,此为重复的合并写法*/
        }
        .item {
            border: 1px solid #000;
        }

生活不易，一切的努力却是为了生存。晚安！
      坚持是一件很不容易的事情。