css——圣杯布局
圣杯布局要求
- header和footer各自占领屏幕所有宽度,高度固定
- 中间dontainer部分为左中右三栏式布局
- 三栏布局中左右两侧宽度固定,中间部分自动填充
实现方式
1.浮动
- 先定义header和footer的样式,使其宽度撑满,高度随意
- container中三列设置为浮动和相对定位,且center部分放在最起那么,对footer设置
clear:both;
清除浮动 - 三列中的左右定宽
200px
,中间设置100%
- 由于浮动关系,center会撑满container,左右会被挤下去,给left添加
margin-left:-100%
,使left回到上一行的最左侧 - 会发现left遮住了center部分,给container设置
padding-left:200px;padding-right:200px;
,给left和right腾出位置; - 这时的left由于
padding
的原因并不在最左侧,之前设置了定位,可以给left添加right:200px
,使left回到最左侧 - 对于right可以设置
margin-right:-200px;
,使其回到第一行
最好设置一个最小宽度防止页面变形
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <title>圣杯布局</title>
8 <link rel="stylesheet" href="">
9 </head>
10 <style type="text/css" media="screen">
11 /**
12 圣杯布局要求
13 1.header和footer各自占领屏幕所有宽度,高度固定。
14 2.中间的container是一个三栏布局。
15 3.三栏布局两侧宽度固定不变,中间部分自动填充整个区域。
16 4.中间部分的高度是三栏中最高的区域的高度。
17 */
18 body {
19 min-width: 600px;
20 }
21
22 .header, .footer {
23 width: 100%;
24 height: 100px;
25 background: #ccc;
26 }
27
28 .footer {
29 clear: both;
30 }
31
32 .container {
33 padding: 0 200px;
34 }
35
36 .container .column {
37 float: left;
38 position: relative;
39 height: 400px;
40 }
41
42 #left {
43 width: 200px;
44 right: 200px;
45 background: pink;
46 margin-left: -100%;
47 }
48
49 #right {
50 width: 200px;
51 background: red;
52 margin-right: -200px;
53 }
54
55 #center {
56 width: 100%;
57 background: blue;
58 }
59 </style>
60
61 <body>
62 <div class="header">header</div>
63 <div class="container">
64 <div id="center" class="column">center</div>
65 <div id="left" class="column">left</div>
66 <div id="right" class="column">right</div>
67 </div>
68 <div class="footer">footer</div>
69 </body>
70
71 </html>
2.flex弹性布局
- 先定义header和footer的样式,使其宽度撑满,高度随意
- container中的left、center、right依次排列
- container设置弹性布局
display:flex;
- left、right区域定宽,center部分设置
flex:1;
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>圣杯布局-flex</title>
6 </head>
7 <style>
8 body{
9 min-width: 600px;
10 }
11 .header,.footer{
12 width: 100%;
13 height: 100px;
14 background: #ccc;
15 }
16 .container{
17 display: flex;
18 }
19 .container .column{
20 height: 400px;
21 }
22 #left{
23 width: 200px;
24 background: pink;
25 }
26 #center{
27 flex: 1;
28 background: blue;
29 }
30 #right{
31 width: 200px;
32 background: red;
33 }
34 </style>
35 <body>
36 <div class="header">header</div>
37 <div class="container">
38 <div id="left" class="column">left</div>
39 <div id="center" class="column">center</div>
40 <div id="right" class="column">right</div>
41 </div>
42 <div class="footer">footer</div>
43 </body>
44 </html>
css——圣杯布局的更多相关文章
- css圣杯布局的实现方式
css圣杯布局思路: 外面一个大div,里面三个小div(都是浮动).实现左右两栏宽度固定,中间宽度自适应.中间栏优先渲染. 资源网站大全 https://55wd.com 设计导航https://w ...
- CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...
- CSS 圣杯布局 / 双飞翼布局的实现
工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
- CSS 圣杯布局
前端的两个经典布局想必大家都有多了解--圣杯布局和双飞翼布局,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握. 事实上,圣杯布局其实和双飞翼布局是一回事.它们实现的都是三栏布局, ...
- css圣杯布局、等高布局
所谓圣杯布局,就是自适应浏览器的分辨率,也称双飞翼布局. 例子: <style> body{margin:0;} .center{height:600px;background:#f60; ...
- CSS圣杯布局、双飞翼布局详解
三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...
- css圣杯布局
HTML <div class="container"> <div class="content">content</div> ...
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
随机推荐
- 【C++】从零开始,只使用FFmpeg,Win32 API,实现一个播放器(一)
前言 起初只是想做一个直接读取视频文件然后播放字符动画的程序.我的设想很简单,只要有现成的库,帮我把视频文件解析成一帧一帧的原始画面信息,那么我只需要读取里面的每一个像素的RGB数值,计算出亮度,然后 ...
- C++ 2.0新特性
C++ standard之演化 C++ 98(1.0) C++ 03(TR1, technical Report 1) // 一个实验性的版本 C++ 11(2.0) C++ 14 此次记录涵盖了C+ ...
- MYSQL中TIMESTAMP类型的默认值理解
MYSQL中TIMESTAMP类型可以设定默认值,就像其他类型一样. 1.自动UPDATE 和INSERT 到当前的时间:表:----------- Table Create Table ...
- 【JDK8】Java8 LocalDate操作时间和日期的API
时间项目中的涉及到的时间处理非常多,犹豫SimpleDateFormat的不安全性以及Calendar等类在计算时比较复杂, 往往我们都会使用工具类来封装较多的日期处理函数, 但是JDK8中新增了操作 ...
- 安全之路 —— 无DLL文件实现远程进程注入
简介 在之前的章节中,笔者曾介绍过有关于远程线程注入的知识,将后门.dll文件注入explorer.exe中实现绕过防火墙反弹后门.但一个.exe文件总要在注入时捎上一个.dll文件着实是怪麻烦的,那 ...
- DVWA之 SQL Injection(Blind)
SQL Injection(Blind) SQL Injection(Blind),即SQL盲注,与一般注入的区别在于,一般的注入攻击者可以直接从页面上看到注入语句的执行结果,而盲注时攻击者通常是无法 ...
- c#-全局键盘钩子
using System; using System.Collections.Generic; using System.Text; using System.Windows.Forms; using ...
- C++ 三消游戏基本实现
最近在研究三消算法,我想试试在完全不借助网络资源的情况下搞定这个东西,所以有些地方可能不是最优的. 代码留此备忘. 1. 3x_desk_event.h 1 #pragma once 2 3 #ifn ...
- Java中读取文件的几种路径配置
获取配置文件的两种方式区别 ClassLoader.getSystemClassLoader().getResourceAsStream() //ClassLoader.getSystemClassL ...
- Xshell、Xftp评估过期的解决办法
介绍一个 FTP客户端-IIS7服务器管理工具作为FTP客户端,它支持批量管理ftp站点.定时上传和定时下载,定时备份,且操作简洁.同时iis7服务器管理工具还是vnc客户端.并且支持批量管理 ...