CSS --- 圣杯布局

最新推荐文章于 2023-06-19 09:11:32 发布
最新推荐文章于 2023-06-19 09:11:32 发布
阅读量682 收藏
点赞数
分类专栏： CSS 文章标签： css 圣杯布局


2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>圣杯布局</title>


<style type="text/css">

body {background-color: #ffffff; font-size:14px;}

#hd, #ft {

padding:20px 3px;

background-color: #cccccc;

text-align: center;

}


.bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {

margin:10px 0; min-width:400px;

}



.main {

background-color: #03a9f4;

color:#ffffff;

}


.aside, .aside-1, .aside-2 {

background-color: #00bcd4;

color:#ffffff;

}


p {

margin:0; padding:20px;

text-align: center;

}

/* 左侧栏固定宽度，右侧自适应 */

.bd-lft {

zoom:1;

overflow:hidden;

padding-left:210px;

}

.bd-lft .aside {

float:left;

width:200px;

margin-left:-100%; /*= -100%*/

position:relative;

left:-210px; /* = -parantNode.paddingLeft */

_left: 0; /*IE6 hack*/

}

.bd-lft .main {

float:left;

width:100%;

}



/* 右侧栏固定宽度，左侧自适应 */

.bd-rgt {

zoom:1;

overflow:hidden;

padding-right:210px;

}

.bd-rgt .aside {

float:left;

width:200px;

margin-left:-200px; /* = -this.width */

position:relative;

right:-210px; /* = -parantNode.paddingRight */

}

.bd-rgt .main {

float:left;

width:100%;

}



/* 左中右 三栏自适应 */

.bd-3-lr {

zoom:1;

overflow:hidden;

padding-left:210px;

padding-right:210px;

}

.bd-3-lr .main {

float:left;

width:100%;

}

.bd-3-lr .aside-1 {

float: left;

width:200px;

margin-left: -100%;

position:relative;

left: -210px;

_left: 210px; /*IE6 hack*/

}

.bd-3-lr .aside-2 {

float: left;

width:200px;

margin-left: -200px;

position:relative;

right: -210px;

}


/* 都在左边，右侧自适应 */

.bd-3-ll {

zoom:1;

overflow:hidden;

padding-left:420px;

}

.bd-3-ll .main {

float:left;

width:100%;

}

.bd-3-ll .aside-1 {

float: left;

width:200px;

margin-left: -100%;

position:relative;

left: -420px;

_left: 0px; /*IE6 hack*/

}

.bd-3-ll .aside-2 {

float: left;

width:200px;

margin-left: -100%;

position:relative;

left: -210px;

_left: 210px; /*IE6 hack*/

}


/* 都在右边，左侧自适应 */

.bd-3-rr {

zoom:1;

overflow:hidden;

padding-right:420px;

}

.bd-3-rr .main {

float:left;

width:100%;

}

.bd-3-rr .aside-1 {

float: left;

width:200px;

margin-left: -200px;

position:relative;

right: -210px;

}

.bd-3-rr .aside-2 {

float: left;

width:200px;

margin-left: -200px;

position:relative;

right: -420px;

}

</style>

</head>

<body>


<div id="hd">头部</div>

<div class="bd-lft">

<div class="main">

<p>主内容栏自适应宽度</p>

</div>


<div class="aside">

<p>侧边栏固定宽度</p>

</div>

</div>

----------------------------------------

<div class="bd-rgt">

<div class="main">

<p>主内容栏自适应宽度</p>

</div>


<div class="aside">

<p>侧边栏固定宽度</p>

</div>

</div>

----------------------------------------

<div class="bd-3-lr">

<div class="main">

<p>主内容栏自适应宽度</p>

</div>


<div class="aside-1">

<p>侧边栏1固定宽度</p>

</div>


<div class="aside-2">

<p>侧边栏2固定宽度</p>

</div>

</div>

----------------------------------------

<div class="bd-3-ll">

<div class="main">

<p>主内容栏自适应宽度</p>

</div>


<div class="aside-1">

<p>侧边栏1固定宽度</p>

</div>


<div class="aside-2">

<p>侧边栏2固定宽度</p>

</div>

</div>

----------------------------------------

<div class="bd-3-rr">

<div class="main">

<p>主内容栏自适应宽度</p>

</div>


<div class="aside-1">

<p>侧边栏1固定宽度</p>

</div>


<div class="aside-2">

<p>侧边栏2固定宽度</p>

</div>

</div>

<div id="ft">底部</div>


</body>

</html>

快乐的小小编
关注
专栏目录
圣杯布局与双飞翼布局
qq_44743216的博客
08-02 1858
圣杯布局与双飞翼布局实现
CSS经典布局 -- 圣杯布局 & 双飞翼布局
Sun_blog
06-10 476
文章目录引言圣杯布局圣杯布局DOM结构圣杯布局样式圣杯布局总结双飞翼布局双飞翼布局DOM结构双飞翼布局样式双飞翼布局总结总结 引言 圣杯布局和双飞翼布局都是比较经典的三栏布局，两种布局的页面效果基本相同。两种布局都是两侧宽度固定， 中间宽度自适应 且 中间内容优先渲染 的三栏布局。 圣杯布局 圣杯布局DOM结构 <header>this is the header</header> <main> <div class="center"&gt
前端之移动端圣杯布局
你来啦????
07-20 271
前端之移动端圣杯布局
移动端怎么实现圣杯布局？
weixin_42242810的博客
05-19 783
如图需要顶部和底部不变，中间内容实现滚动方法：body display：flex ；flex-direction: column; height：100%；header头部固定高度section部分flex：1；overflow-y: scroll;footer部分也是固高...
css快速实现移动端圣杯布局
chengxue_123的博客
11-12 203
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ...
H5移动开发布局之-------流式布局~弹性布局(flex) ----圣杯布局
weixin_45176415的博客
11-03 1374
布局形式 1. 流式布局 百分比布局:使用场景比较传统，通过百分比控制盒子宽度 demo : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
用flex实现css经典布局------圣杯布局
suandfei的博客
10-26 3876
圣杯布局： 圣杯布局就是上下定高，中间自适应。中间左右的定宽但是高度自适应。 首先在讲圣杯布局之前，问你一个问题 flex:1 你是否真正的理解？ 首先flex:1 时是 flex-basis:0 flex-grow:1 flex-shrink:1 好的我们一一来讲下 flex-basis:0 首先代替的是flex项目中的宽度，什么意思呢 就是给一个项目中同时设置 宽度和 flex-basis...
CSS布局之圣杯布局与双飞翼布局
09-24
圣杯布局与双飞翼布局是CSS布局领域中经典的两种布局方法，主要用来创建一种具有左右两栏固定宽度，中间内容部分自适应宽度的布局结构。这两种布局技术在Web页面设计中应用广泛，尤其是在响应式设计中，它们能够很好...
CSS----利用flex 圣杯布局 双飞翼布局
梦想待招前端实习生 的博客
04-12 145
介绍两个布局中使用的flex属性 order: 根据值来进行排序 可为负值 box-grow: grow意为成长 可以使 items增长 flex: (flex-grow||flex-shrink||flex-basis) 圣杯布局： <style> .container{ width: 100%; display: flex; } .left,.right,.center{
3.移动端特点,百分比布局,Flex布局,圣杯布局
m0_72430529的博客
07-20 311
移动web的初步认识
圣杯布局
Tien的博客
08-02 155
第1步 建立框架 先写 header, footer 和 container 三个 div 我们将 container 的内边距设置为左右两边各自的宽度。它看起来就像这样： 第2步 加入三栏 此时我们有了基本框架，可以把三栏塞进去了。 接着我们给每一栏配上合适的宽度，并将它们设为浮动。同时我们需要清除 footer 的上下环境，以免跟上面三栏一起浮动。 注意这里中间一栏的 100% 宽是基...
Flex圣杯布局(简易)
vGuYi的博客
05-14 301
就像圣杯一样无论中间的内容大小如何改变(自适应)两边的盒子都是不变的 圣杯布局原理 效果图如下 html部分 <body> <div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div&gt
移动端WEB开发4-flex布局(弹性布局)--子项属性(圣杯布局、双飞翼布局)
weixin_50119334的博客
11-09 261
flex布局子项常见属性 属性 说明 flex 子项目占的份数 align-self 控制子项自己在侧轴的排列方式 order 属性定义子项的排列顺序（前后顺序） 具体用法 1. flex flex属性定义子项目分配剩余空间，用flex来表示占多少份数。默认为0 .item { flex: <number>;/* default o*/ } 圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应 圣杯布局：先设置父盒
两种方式实现圣杯布局
qcj_1004的博客
01-16 749
1.flex实现 具体教程可以参考学习阮一峰的博客：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html点击打开链接 HTML代码 css代码 .body { display: flex; } .left,.right { /*左右两列定宽
一幅图学会圣杯布局
u013348765的博客
03-02 482
圣杯布局
【前端布局篇】浮动、定位、弹性布局，固比固、双飞翼、圣杯布局
最新发布
前端知识分享喵
06-19 2210
布局模型是基于盒模型基础上进行的拓展，关于布局有流式布局（标准的布局），浮动布局、定位布局、flex布局等。。。
页面布局之圣杯布局的实现
前端杂谈一二三
05-10 381
圣杯布局解决方案 浮动解决： <style> .left { float: left; width: 300px; } .right{ float: right; width: 300px; } .center { background: red; } </style> <div class="left"></div> <div class...
圣杯布局的实现过程
SweetoDream
11-28 2836
圣杯布局和双飞翼布局，它们都要求三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染，而双飞翼布局是对圣杯布局的一种改良，下一篇会讲到。圣杯布局：用到浮动、负边距、相对定位，不添加额外标签。DOM结构：<div class="header">Header</div> <div class="bd"> <div class="main">Main</div>
CSS三列圣杯布局详解：实现与技巧
"CSS的三列式'圣杯布局'方案完全解析" 在Web开发中，"圣杯布局"（Holy Grail Layout）是一种常见的三列式页面布局方式，它的核心特点是主要内容区域（main）居中，两侧分别有固定宽度的侧栏（sub和extra），并且在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值