搜索
博主信息
博文 11
粉丝 0
评论 0
访问量 9066
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
327双飞翼和圣杯经典布局实现-2018年4月2日16时52分
huang2018的博客
原创
849人浏览过

一、实现原理和代码

1、双飞翼布局:用浮动定位结合margin实现三列布局。

在dom布局的主体中,与气体两种实现方式不同的是用一个外部div包住中部div区块,其原因就是为了方便通过中部的main类div的margin或padding的设置把被left和right盖住的内容显示出来。这样不影响wrap类、left类和right类之间的浮动关系。实现代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.经典三列双飞翼布局</title>
<style type="text/css">
.header, .footer {
width: 100%;
height: 60px;
background-color: lightgray;
}
.content {
width: 1000px;
min-height: 100%;
background-color:gray;
margin:auto;
text-align: center;
line-height: 60px;
}
/*为保证底部正确位置,一般要在此清除浮动*/
.footer {
clear: both;
}
.container {
width: 1000px;
margin: auto;
background-color: yellow;
overflow: hidden;
}
.wrap {
width: 100%;
float: left;
background-color: cyan;
}
.wrap .main {
min-height: 600px;
margin: 0px 200px;
/*用margin或padding均可:*/
/*padding-left: 200px;
padding-right: 200px;*/
background-color: wheat;
}
.left {
width:200px;
min-height: 600px;
float:left;
/*margin-left: -1000px;*/
margin-left: -100%;
background-color: lightskyblue;
}
.right {
width:200px;
min-height: 600px;
float:left;
margin-left: -200px;
background-color: lightgreen;
}
</style>
</head>
<body>
<!-- DOM布局 -->
<!-- 头部 -->
<div>
<div>网站头部</div>
</div>
<!-- 主体 -->
<div>
<!-- 下面要用一个div包住中部的原因:就是为了方便通过中部的main类div的margin或padding的设置把被left和right盖住的内容显示出来。这样不影响wrap类、left类和right类之间的浮动关系。 -->
<div>
<div>中部</div>
</div>
<div>左侧</div>
<div>右侧</div>
</div>
<!--底部 -->
<div>
<div>网站底部</div>
</div>
</body>
</html>

2、经典圣杯布局:结合了浮动与相对定位来实现

核心:先浮动,再采用相对定位(相对浮动后的新位置的原点的再定位(移动到新新位置))。实现代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.经典圣杯布局</title>
<style type="text/css">
/*头部和底部设置样式*/
.header, .footer {
width: 100%; 
height: 60px;
background-color: lightgray;
}
.content {
width: 1000px;
/*height: 100%;*/
min-height: 100%;
background-color: gray;
margin: auto;
text-align: center;
line-height: 60px;
}
.footer{
clear:both;
}

.container {
width: 600px;
margin: auto;
padding: 0px 200px;
overflow: hidden;
background-color: yellow;
}
.container .main {
width: 100%;
min-height: 650px;
float: left;
}

.container .left {
width: 200px;
min-height: 650px;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
background-color:lightskyblue;
}
.container .main {
width: 100%;
min-height: 650px;
float: left;
background-color: wheat;

}
.container .right {
width: 200px;
min-height: 650px;
float: left;
margin-left: -200px;
position: relative;
left: 200px;
background-color:lightgreen;

}

</style>

</head>
<body>
<!-- DOM布局 -->
<!-- 头部 -->
<div>
<div>网站头部</div>
</div>
<!-- 主体 -->
<div>
<div>中部</div>
<div>左侧</div>
<div>右侧</div>
</div>
<!-- 底部 -->
<div>
<div>网站底部</div>
</div>
</body>
</html>

二、布局效果如下:

1522660970589856.jpg

三、体会

要理解实现包括双飞翼与圣杯布局,以及采用绝对定位实现以上经典三列布局,关键在于要理解几种定位方式的定义。三种定位:绝对定位(absolute)、相对定位(relative)和静态定位(static)特别是前两种定位方式的具体概念,以及浮动(float)的物理意义。


批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学