圣杯布局和双飞翼布局

1，圣杯布局：适用：侧边栏宽度固定，内容区宽度随着浏览器窗口宽度改变而改变

优点：没有额外的div，允许任何列是最高的？？（什么意思??）

2，可以实现主内容区优先加载，

3，需要hack很少

缺点：在宽度缩小时可能会对圣杯布局发生破坏，因此可以设置最小宽度：

body{

　　min-width:600px;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #hd{
            height:50px;
            background: #666;
            text-align: center;
        }
        #bd{
            /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
            padding:0 200px 0 180px;
            height:100px;
        }
        #middle{
            float:left;
            width:100%;/*左栏上去到第一行*//*设置宽度自适应*/
            height:100px;
            background:blue;
        }
        #left{
            float:left;
            width:180px;
            height:100px;
            margin-left:-100%;/*负外边距百分号是相当于#middle的宽度的百分数*/
            background:#0c9;
            /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
            position:relative;
            left:-180px;/*确定left的位置信息*/
        }
        #right{
            float:left;
            width:200px;
            height:100px;
            margin-left:-200px;//设置-200px后，right块会跳上去
            background:#0c9;
            /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
            position:relative;
            right:-200px;
        }
        #footer{
            height:50px;
            background: #666;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="hd">header</div>
<div id="bd">
    <div id="middle">middle</div>
    <div id="left">left</div>
    <div id="right">right</div>

</div>
<div id="footer">footer</div>
</body>
</html>

　　笔记：是对于margin-left负外边距的理解特别当其为百分数时，这个百分数是相对于谁的??,如何定位？？

二：

双飞翼布局：

双飞翼布局是在圣杯布局的基础上改进的布局，特点，在圣杯布局的main（上面的middle）内部添加一个div，取消right和left部分的positon：relative，而同时对于main内部的div元素内添加margin-left和margin-right，给中间内容留下空间，取消bd中的padding，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            min-width: 700px;
        }
        #hd{
            height:50px;
            background: #666;
            text-align: center;
        }
        #middle{
            margin-left: 180px;
            margin-right: 200px;
        }
        #bd{
            /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/

            height:100px;
        }
        #main{
            float:left;
            width:100%;/*左栏上去到第一行*/
            height:100px;
            background:blue;
        }
        #left{
            float:left;
            width:180px;
            height:100px;
            margin-left:-100%;
            background:#0c9;
            /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/

            
        }
        #right{
            float:left;
            width:200px;
            height:100px;
            margin-left:-200px;
            background:#0c9;
            /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/

            right:-200px;
        }
        #footer{
            height:50px;
            background: #666;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="hd">header</div>
<div id="bd">
    <div id="main">
        <div id="middle">middle</div>
    </div>
        <div id="left">left</div>
        <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>

　　三：变化，两栏布局，侧栏宽度固定，主内容区宽度随窗口大小改变而改变

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .main,.left{
           float: left;
           height: 100px;
       }
        .main{
            width: 100%;
            background-color: red;
        }
        .left{
            width: 200px;
            margin-left: -100%;/*注意，这里加了百分号就不一样了，百分号表示相当于main元素的百分号*/
            background-color: blue;
        }
        .inner{
            margin-left: 200px;/*让main内元素显示不会在侧栏之下，给侧边栏留出空间来*/
        }
      //侧栏在右边的情况，注意侧栏的margin—right  or margin-left根据侧栏位置是不同的
        .main2,.right{
            float: left;
            height: 100px;
        }
        .main2{
            width: 100%;
            background-color: red;
        }
        .right{
            width: 200px;
            margin-left: -200px;
            background-color: blue;
        }
        .inner2{
            margin-right: 200px ;
        }
    </style>
</head>
<body>
<!--布局1,侧栏在左边，中间部分可以调整宽度-->
<div class="main"><!--main元素位于前面，表示优先渲染-->
    <div class="inner">main</div>
</div>
<div class="left">left</div>
<!--布局二，侧栏在右边，宽度固定-->
<div class="main2">
    <div class="inner2">main</div>
</div>
<div class="right">right</div>
</body>
</html>

　　

posted @ 2017-03-13 21:16  张宁宁  阅读(203)  评论(0)    收藏  举报