CSS3之圣杯布局和双飞翼布局
圣杯布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<!--圣杯布局：-->
<!--1 搞一个容器，里面放三个盒子-->
<!--2 设置两侧盒子的宽度 固定-->
<!--3 设置中间盒子的宽度等于容器的宽度(100%)-->
<!--4 设置容器的padding等于两侧盒子的宽度-->
<!--5 让三个盒子在同一方向上浮动-->
<!--6 设置左边盒子的margin-left = -100%-->
<!--7 通过定位调整左边的盒子，让左边的盒子不要盖住中间的区域-->
<!--8 设置右边盒子的margin-left = -自身的宽度-->
<!--9 通过定位调整右边的盒子，让右边的盒子不要盖住中间的区域-->
<!--10 给容器设置一个最小的宽度，防治缩小后变形--> <style>
*{
margin: 0;
padding: 0;
}
.box
{
background-color: purple;
padding-left: 200px;
padding-right: 200px;
overflow: hidden;/*清除浮动，方便观察，不是必须的*/
min-width: 500px;;
}
.center{
width: 100%;
background-color: green;
float: left;
height: 500px; }
.left{
width: 200px;
background-color: yellow;
float: left;
height: 500px;
margin-left:-100%;
position: relative;
left:-200px;
}
.right{
width: 200px;
background-color: skyblue;
float: left;
height: 500px;
position: relative;
margin-left: -200px;
left: 200px;;
} </style>
</head>
<body>
<div class="box">
<div class="center">
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
<div class="left"> </div>
<div class="right"> </div>
</div>
</body>
</html>
双飞翼布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<!--双飞翼实现步骤-->
<!--1 搞一个容器，里面放三个盒子-->
<!--2 设置两侧盒子的宽度(固定)-->
<!--3 设置中间盒子的宽度等于容器的宽度(100%)-->
<!--4 让三个盒子都在同一个方向上浮动-->
<!--5 给中间的盒子添加一个子盒子-->
<!--6 给子盒子设置margin：0 两侧盒子的宽度-->
<!--7 设置左边盒子的margin-left：-100%-->
<!--8 设置右边盒子的margin-left:-自身的宽度--> <style>
*{
margin: 0;
padding: 0;
}
.box
{
background-color: purple; overflow: hidden;
/*min-width: 500px;;*/
}
.center{
width: 100%;
background-color: green;
float: left;
height: 500px; }
.center_in {
margin: 0 200px;
height: 500px;
background-color: pink;
}
.left{
width: 200px;
background-color: yellow;
float: left;
height: 500px;
margin-left:-100%; }
.right{
width: 200px;
background-color: skyblue;
float: left;
height: 500px;
margin-left: -200px; } </style>
</head>
<body>
<div class="box">
<div class="center">
<div class="center_in">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</div>
<div class="left"> </div>
<div class="right"> </div>
</div>
</body>
</html>
效果如下：
CSS3之圣杯布局和双飞翼布局的更多相关文章
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
- 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局
一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...
- CSS_圣杯布局和双飞翼布局
参考: 圣杯布局的来历是2006年发在a list part上的这篇文章: http://alistapart.com/article/holygrail 双飞翼布局介绍-始于淘宝UED: http: ...
- css布局笔记（三）圣杯布局，双飞翼布局
圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...
- CSS布局之圣杯布局和双飞翼布局
其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容 ...
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
- CSS圣杯布局、双飞翼布局详解
三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...
- CSS经典布局——圣杯布局与双飞翼布局
一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...
- css两栏布局、圣杯布局、双飞翼布局
最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...
随机推荐
- Spring Boot框架的自动配置
(图片来源于网络,侵删!!!) l @RestController 因为我们例子是写一个web应用,因此写的这个注解,这个注解相当于同时添加@Controller和@ResponseBody注解 l ...
- 腾讯地图api 地址解析 js版
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" ...
- PTA4
这个作业属于哪个课程 C语言程序设计2 这个作业要求在哪里 \https://edu.cnblogs.com/campus/zswxy/software-engineering-class2-2018 ...
- 例：三位老师对某次数学竞赛进行了预测，他们的预测如下： 甲：学生A得了第一名，学生B得第三名。 乙：学生C得了第一名，学生D得第四名。 丙：学生D得了第二名，学生A得第三名。 结果表明，他们都说对了一半，说错了一半，并且无并列名次，输出A、B、C和D各自的名次。
public class demo { public static void main(String[] args) { int a,b,c,d;//代表四个学生 boolean x1,x2,x3;/ ...
- 学习笔记DL005:线性相关、生成子空间，范数，特殊类型矩阵、向量
线性相关.生成子空间. 逆矩阵A⁽-1⁾存在,Ax=b 每个向量b恰好存在一个解.方程组,向量b某些值,可能不存在解,或者存在无限多个解.x.y是方程组的解,z=αx+(1-α),α取任意实数. A列 ...
- 最新版SEMCMS_PHP_3.5 过滤不严导致sql注入
一.漏洞分析 在分析过程中看到网上已经有人发现semcms V2.4存在过滤不严导致sql注入的漏洞,不知道咋还没改,而且最新版过滤的关键字更少了. 首先查看首页文件index.php的代码 < ...
- 批量找注入 python3+sqlmap结合
注入一直都是用sqlmap 导致本来就不怎么精通的手工注入现在就忘的一干二净 想实战练习 却一时又找不到有注入的网站 于是便有了这篇文章 想找个批量获取域名链接的工具 但都是只是获取域名而 ...
- Scrapy 代理IP
Scrapy 代理IP 一.Scarpy使用代理IP 1.在setting.py 配置 代理服务器IP 2.在middlermares.py 配置 downloadmiddlermare(下载中间件) ...
- Linux----------samba服务的安装使用及简介
一.Samba简介 Samba是在linux和Unix系统上实现SMB协议的一个免费软件,由服务器端和客户端程序组成. Samba与nfs的不同,Samba比nfs多支持Windows SMB ( ...
- C++ 属性类
又一次向目标迈进了... 这次是实现一个物体所拥有的属性类.没什么好说的,非常简单. 因为我是C++新手,不知道对这次的实现有没有什么更好的实现方式.因为这个类对以后的进展很重要,而且,要充分考虑易用 ...