css前端开发干活来袭：关于圣杯布局的讲解-博客-最代码

西北马二最代码 2016-09-20 21:18:25

css前端开发干活来袭：关于圣杯布局的讲解

致力于前端开发工作的程序猿/媛，一定了解过双飞翼布局和圣杯布局，接下来，我们就先来学习一下圣杯布局，直接进入我们的代码部分。

HTML代码部分：

<!DOCTYPE html>
<html>
<head>
          <meta charset="utf-8">
          <title>圣杯布局的实现</title>
          <link rel="stylesheet"  type="text/css" href="SFYSB.css">
</head>
<body>
          <div class=“header"></div>
          <div class="bd"></div>
                    <div class= "main">hhhhhhh</div>
                    <div class="left">hhhhhh</div>
                    <div class="right"></div>
          <div class="footer"></div>
</body>
</html>

接下来进行我们的样式设定：

@charset "utf-8"
body{
	padding: 0;
	margin: 0;
}
.Header,.Footer{
	width: 100%;
	background-color: #666;
	height: 30px;
	clear: both;
}
.bd{
	padding-left: 150px;
	padding-right: 190px;
}
.left{
	background: #E79F6D;
	width: 150px;
	float: left;
	margin-left: -100%;
	position: relative;
	left: -150px;
}
.main{
	background: #D6D6D6;
	width: 100%;
	float: left;
}
.right{
    background: #77BBDD;
    width:190px;
    float:left;
    margin-left:-190px;
    position:relative;
    right:-190px;
}

ok，进行完我们的代码部分，接下来我们来学习一下，到底什么是所谓的圣杯布局！！！！！！

首先，我们对样式代码做出如下修改：

        .left{
            background: #E79F6D;
            width:150px;
            float:left;
        }
        .main{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .right{
            background: #77BBDD;
            width:190px;
            float:left;
        }
接下来我们再继续修改样式代码：

 .left{
            background: #E79F6D;
            width:150px;
            float:left;
            margin-left:-150px;
        }

接着来：

.left{
            background: #E79F6D;
            width:150px;
            float:left;
            margin-left:-100%;
        }

        .right{
            background: #77BBDD;
            width:190px;
            float:left;
            margin-left:-190px;
        }

还有呐，哈哈！

       .bd{
            padding-left:150px;
            padding-right:190px;
        }

 .left{
            background: #E79F6D;
            width:150px;
            float:left;
            margin-left:-100%;
            position: relative;
            left:-150px;
        }
        .right{
            background: #77BBDD;
            width:190px;
            float:left;
            margin-left:-190px;
            position:relative;
            right:-190px;
        }

我们这样一步一步操作下去，就能看到我们在上文提到的所谓的圣杯布局，也即把左层-150px;会发现左边的盒子上去了，那么我们可以设置-100%，那么左边的盒子就会和main盒子处在同一层，而且还会排在最前面，同理，我们也可以给right设置为-190px,这时，三个盒子都处在了同一层，但是左盒子和右盒子会影响中间盒子内容的显示，这时我们便可以设置.bd里面的padding属性，哈哈哈哈！！！！以为我们的任务结束了吗？NONONO.

当我们设置完padding之后，会发现左右栏也缩进来了，所以，此时我们需要采用相对定位的方法，各自相对于自己把自己移出去，此时，得到最后的页面才是我们真正的“圣杯布局”！

打赏

2个评论