圣杯布局简单结构代码!

圣杯布局

　　目的:加载文档时优先加载中间区域,在加载左右两边.

　　特点:内容区域可以根据屏幕大小改变而改变,左右两边内容保持不变.

　　实现:

　　　　1.在最大的div里嵌套三个div,并且中间(center)的div放在最前面.

　　　　2.给内容(content)左右设置margin,center宽度设置100%;

　　　　3.给左边 div (left)和右边 div (right)设置一个宽度,同时嵌套的三个div需要加上左浮动(float:left).

　　　　4.给左边的div设置margin-left:-100%;左边的div就会重叠在中间的div之上,且靠着最左边.

　　　　5.给右边的div设置margin-left:(盒子的宽度负数);,右边的div会重叠在中间div之上的右边.

　　　　6.给左右连个盒子设置position:relative;(相对定位),顶部(top)为0;这样左右的盒子就会贴着顶部显示,

　　　　　左边的盒子设置一个left:负的盒子的宽度;右变的盒子设置一个left:盒子的宽度;(注意这个的宽度不需要负数).

　　　　我们在这里面用到了三个技术:1.浮动 2.定位 3.margin的负数

　　补充:

　　　　position:relative;

　　　　 1.设置了相对定位的元素没有脱离标准流,并且元素在页面上占据了位子.

　　　　 2.相对定位不会改变元素显示方式.

　　　　　3.没有设置top right bottom left 的相对定位不会改变位子会以标准流显示.设置了top right bottom left会以原来的位子平移.

　　　　　4.相对定位的元素会覆盖标准流的元素之上.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

*{　　　　　　/*通配符清除页面标签样式,通配符的性能差不建议使用*
padding: 0;
margin: 0;
}
.content{
margin: 0 210px;　　/*设置板块居中*/
height: 100px;
background: pink;
min-width: 800px;　　/* 允许浏览器改变大小但是最小不能小于800px,浏览器宽度低于八百时底部会出现滚动条*/
}
.center{
width: 100%;　　/*这里是100%是以父元素content宽度*/
height: 100px;
background: red;
float: left;　　　　/*左浮动*/

}
.left{
width: 200px;
height: 100px;
background: blue;
float: left;
margin-left: -100%;
position: relative;
top: 0px;
left: -210px;
}
.right{
width: 200px;
height: 100px;
background: green;
float: left;
margin-left: -200px;
position: relative;
top: 0px;
left: 210px;

}
</style>
</head>
<body>
<div class="content">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/qq364735538/p/6005634.html

圣杯布局简单结构代码!相关推荐

圣杯布局原来这么简单！！
文章目录什么是圣杯布局圣杯布局的特点怎么实现圣杯布局完整代码展示双飞翼布局什么是圣杯布局圣杯布局是一个两侧宽度固定,中间宽度自适应的三栏布局圣杯布局的特点中间部分在DOM结构上优先, ...
[css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现
[css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现一: section{height: 100%; overflow: hidden;clear:both; } .left{ height: ...
CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...
css圣杯模式的HTML代码,css圣杯布局是什么？
圣杯布局是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染.下面本篇文章就来给大家介绍一下css圣杯布局,希望对大家有所帮助. 圣杯布局是什么三列布局,中间宽度自适应,两边 ...
【CSS】圣杯布局和双飞翼布局（包括完整代码）
1. 前言圣杯布局和双飞翼布局是各类网站经常使用的布局,本文将通过两种布局的示例图.布局过程.以及完整代码进行讲解,如果你想进行练习,可以到我的 github地址上获取已去除了关键代码的 ...
【布局】圣杯布局双飞翼布局
背景随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码 "如果三排布局能将中间的模 ...
三种方式实现圣杯布局
圣杯布局的三种实现圣杯布局是一种很常见的css布局.他要求: 上部和下部各自占领屏幕所有宽度. 上下部之间的部分是一个三栏布局. 三栏布局两侧宽度不变,中间部分自动填充整个区域. 中间部分的高度是三 ...
圣杯布局与双飞翼布局全解
圣杯布局和双飞翼布局基本上是一致的,都是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染.解决方案大体相同,都是三栏全部float:left浮动,区别在于解决中间栏div的 ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...

圣杯布局简单结构代码!

圣杯布局简单结构代码!相关推荐

最新文章

热门文章