最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

第18题 CSS如何进行圣杯布局

圣杯布局如图:

圣杯布局

而且要做到左右宽度固定,中间宽度自适应。

首先我们把公共的HTML和CSS代码附上,以下方法中都可使用,不做重复工作。

公共HTML代码:

<body>
    <div class="header">这里是头部</div>
    <div class="container">
        <div class="left">左边</div>
        <div class="middle">中间部分</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">这里是底部</div>
</body>

公共CSS代码:

*{
  margin: 0;
  padding: 0;
}
.header,.footer{
	height:40px;
	width:100%;
	background:red;
}

1. 利用flex布局

CSS代码:

.container{
	display: flex;
}
.middle{
	flex: 1;
	background:yellow;
}
.left{
	width:200px;
	background:pink;
}
.right{
	background: aqua;
	width:300px;
}

2.绝对定位

.container{
  min-height: 1.2em;
  position: relative;
}

.container>div {
  position: absolute;
}

.middle {
  left: 200px;
  right: 250px;
  background: yellow;
}

.left {
  left: 0;
  width: 200px;
  background: pink;
}

.right {
  right: 0;
  width: 250px;
  background: aqua;
}

3. grid布局

HTML代码:

<div id="header">header</div>
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>     
<div id="footer">footer</div>

CSS代码:

body{
	display: grid;
}
#header{
	background: red;
	grid-row:1;
	grid-column:1/5;
}
	
#left{
	grid-row:2;
	grid-column:1/2;
	background: orange;
}
#right{
	grid-row:2;
	grid-column:4/5;
	background: cadetblue;
}
#middle{
	grid-row:2;
	grid-column:2/4;
	background: rebeccapurple
}
#footer{
	background: gold;
	grid-row:3;
	grid-column:1/5;
}

看看grid布局,其实也挺简单的吧,里面的参数应该不言而喻了。另外我之前也写过一篇关于grid布局文章:CSS Grid网格布局实例教程,感兴趣的小伙伴可以看一下。

另外说一点,到2019年为止,grid现在绝大多数浏览器已经可以兼容了,可以着手使用了。

当然,还有table布局,年代比较久远了,而且对SEO不友好,知道就可以,这里就不浪费篇幅了。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 第18题 CSS如何进行圣杯布局

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发