西北马二最代码的gravatar头像
西北马二最代码 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之后,会发现左右栏也缩进来了,所以,此时我们需要采用相对定位的方法,各自相对于自己把自己移出去,此时,得到最后的页面才是我们真正的“圣杯布局”!


打赏
最近浏览
低调人  LV38 2018年5月24日
上世纪风景  LV11 2018年1月12日
203778513  LV9 2017年9月13日
jiky  LV2 2017年5月9日
tian269mu  LV4 2017年5月8日
新手社 2017年3月23日
暂无贡献等级
2479785009  LV2 2017年1月14日
mjzxcyypp  LV13 2016年12月30日
temptation  LV16 2016年12月28日
zxc789  LV2 2016年10月24日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友