布局设计

1，全部都是占满行。

2，使用百分比定义宽度，100%; 或者max-1200px; min-800px;

3，块级元素添加margin:0 auto; 左右自适应宽度居中。

4， height=line-height; text-align:center; 块级元素单行水平居中

1，宽度固定

2，使用百分比定义宽度，100%; 或者max-1200px; min-800px;

3， .navigator{100%; height:50px; position:fixed; top:0px;} //使用了fixed相对视口定位不动，脱离文档流。后面的banner会晚上跑，被导航遮住50px;

　　 .banner{margin-top:-50px;} //被导航遮住50px; 使用margin-top:-50px; 往下移动50px;，不会被遮住。

　　这里可以使用position:sticky; top:0px; 这是新属性，兼容性不好，所以可以使用上述fixed 代替，写在.nav中。
<div class="navgator">   固定导航栏，不随滚动条滚动而滚动 </div>

<div class="banner"> 广告栏 </div>

如下代码：

.nav{
            100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #333;
            color: #fff;
            margin: 0 auto;
            position: fixed;
            top: 0px;
        }
        .banner{
            1200px;
            height: 300px;
            background: green;
          /*   line-height: 300px;
          text-align: center; */
            color: red;
            margin: 0 auto;
            margin-top: 50px;
        }

    <div class="nav">导航栏</div>
    <div class="banner">banner栏</div>
    <div class="content">内容</div>
    <div class="footer">footer</div>

---------------------------

经典行布局

复制运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
            font-size: 16px;
            list-style-type: none;
        }
        .header{     /*网页头部，居中显示*/
            1600px;
            height: 100px;
            background: #333;
            margin: 0 auto;
            overflow: hidden; /*清除浮动*/
            zoom:1; /*兼容低版本的IE浏览器*/
            position: fixed; /*相对视口进行固定*/
            top: 0;
            left: 50%; /*向左移动父元素宽度的50%*/
            margin-left: -800px; /*向左移动自身宽度的一半*/
        }
        .header img{   /*logo 左浮动*/
            height: 100px;
            300px;
            float: left;
            margin-left: 30px;
        }
        .header ul{    /*导航右浮动*/
            float: right;
            margin-right: 30px;
        }
        .header ul li{   /*具体导航项左浮动*/
            display: block;
            float:right;
            line-height: 100px; /*单行居中显示 height=line-height;*/
            text-align: center;
            font-size: 20px;
            color: #fff;
            margin-right: 40px;
        }
        .content{/*居中显示*/
            1600px;
            height: 1450px;
            margin: 105px auto 100px;
        }

        .footer{    /*页面尾部居中显示*/
            1600px;
            height: 100px;
            background: #333;
            line-height: 100px; /*单行垂直居中显示 height=line-height;*/
            text-align: center; /*水平居中*/
            font-size: 20px;
            color: #fff;
            position: fixed; /*相对视口进行固定*/
            bottom: 0;
            left: 50%; /*向左移动父元素宽度的50%*/
            margin-left: -800px;    /*向左移动自身宽度的一半*/
        }
    </style>
</head>
<body>
    <div class="header">
        <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
        <ul>
            <li>课程</li>
            <li>职业导航</li>
            <li>手记</li>
            <li>问题</li>
            <li>反馈</li>
        </ul>
    </div>
    <div class="content">
        <div><img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg"></div>
        <div><img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg"></div>
        <div><img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg"></div>
    </div>
    <div class="footer">footer</div>
</body>
</html>

========================================================

------------

经典列布局

两列布局固定宽度和自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0; margin: 0; color: red; font-size: 16px;}
        .container{ 90%; height: 1800px; margin: 0 auto; overflow: hidden; zoom:1;} /*清除浮动，兼容低版本IE浏览器*/
        .main_left{ 70%; height:1800px; color: red; float: left; background: blue;} /*这里可以使用具体数字，也可以使用百分比设置*/
        .main_right{ 30%; height:1800px; color: red; float: right; background: green;} /*这里可以使用具体数字，也可以使用百分比设置*/
    </style>
</head>
<body>
    <div class="container">
        <div class="main_left">这是左边内容</div>
        <div class="main_right">这是右边内容</div>
    </div>
</body>
</html>

===============================

就是行布局和列布局一起配合

==========================

--------------如下代码就是圣杯布局------------

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>圣杯布局</title>
   <style type="text/css">
       *{margin: 0;padding: 0;} /*重置浏览器默认值*/
       /*设置页头和页尾样式*/
       .header,.footer{ 100%;height: 40px;color: #fff;background: #333;line-height: 40px;text-align: center;}
       /*设定容器上下内边距为0，左右内边距分别为220px 和 200px（这里的220px是留着给下面的.right，另外200px是给下面的.left预留的）*/
       .container{ padding: 0 220px 0 200px;overflow: hidden; }
       /*中间，左右内容使用相对定位，并且全部向左浮动*/
       .middle,.left,.right{
           position: relative;
           float: left;
       }
       .middle{
           100%;
           height: 300px;
           color: #fff;
           background: pink;
       }
       .left{
           200px;
           height: 300px;
           color: #fff;
           background: green;
           margin-left: -100%; /*因为.middle .left .right全部浮动，所有只要一行没有溢出就会排列成一行。
           向移动-100%时，left就会一直往后退，直到向上跳一行，可以使用调试工具查看。*/
           left: -200px; /*这里的-200px，是通过relative定位移动到padding-left:200px;的。正负号表示向后或者向前移动，负数就是向左移动，正数向右移动。*/
       }
       .right{
           220px;
           height: 300px;
           color: #fff;
           background: blue;
           margin-left: -220px;/*因为.middle .left .right全部浮动，所有只要一行没有溢出就会排列成一行。
           这里向左移动220px就会直接跳到上面一行覆盖.middle的右边。具体移动数据可以使用调试工具查看。*/
           right: -220px;/*这里的-220px，是通过relative定位移动到padding-left:220px;的。正负号表示向后或者向前移动，负数就是向左移动，正数向右移动。*/
       }

   </style>
</head>
<body>
   <div class="header">header</div>
   <div class="container">
       <div class="middle">midden</div>
       <div class="left">left</div>
       <div class="right">right</div>
   </div>
   <div class="footer">footer</div>
</body>
</html>

=================================================

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style type="text/css">
        *{padding: 0;margin: 0;font-size: 16px;}
        /*头尾部样式*/
        .header,.footer{ 100%; height: 60px; color: #fff;background: #333;line-height: 60px;text-align: center;}
        /*内容样式*/
        .container,.left,.right{float: left;}/*注意这里是.container进行浮动的，而不是.middle。和圣杯布局相比少了一个定位position:relative*/
        .container{ 100%;min-height: 300px;}
        .middle{height: 300px; margin-left: 250px;margin-right: 300px;background: gray; }
        .left{ 250px;height: 300px;background: red;margin-left: -100%;}/*这里和圣杯布局一样，使用负边距会上移一行。*/
        .right{ 300px;height: 300px;background: green;margin-left: -300px;}/*这里和圣杯布局一样，使用负边距会上移一行。*/
        .clearBoth{clear: both;}/*在最后浮动的元素添加一个块级元素，清除浮动*/
    </style>
</head>
<body>
    <div class="header">网页头部</div>
    <div class="container">
        <div class="middle">中间</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="clearBoth"></div>
    <div class="footer">尾部</div>
</body>
</html>

=====================

圣杯布局和双飞翼布局：

1，必须先渲染中间内容，在渲染两边。

2，而且是三列，两边固定宽度，中间自适应。

圣杯布局的结构：

<body>
   <div class="header">header</div>
   <div class="container">
       <div class="middle">midden</div>
       <div class="left">left</div>
       <div class="right">right</div>
   </div>
   <div class="footer">footer</div>
</body>

双飞翼布局的结构：

====================