三栏布局zblog模板(三栏布局的实现方式)
- ZBLOG
- 2022-12-19 12:06:01
- 23
本篇文章给大家谈谈三栏布局zblog模板,以及三栏布局的实现方式对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
- 1、三栏布局 两栏布局
- 2、实现三栏布局的六种方式
- 3、QQ空间个人中心怎么排版
- 4、三栏布局
三栏布局 两栏布局
实现三栏等高布局,且两边的侧栏宽度固定,中间一栏占用剩余的空间。
1.flex:
container{display:flex;}
.left,.right{width:200px;}
.main{flex-grow:1;}
两列布局
1.flex
.container{
display: flex;
height: 100px;
}
.container.left{
width: 100px;
height: 100%;
background-color: red;
}
.container.right{
flex:1;
height: 100%;
background-color: green;
}
2、浮动
.container.left {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.container.right {
margin-left: 100px;
height: 100px;
background-color: green;
}
3、定位
.container{
position: relative;
width: 100%;
height: 100px;
}
.container.left{
position: absolute;
width: 100px;
height: 100%;
background-color: red;
}
.container.right{
margin-left: 100px;
width: 100%;
height: 100%;
background-color: green;
}
如何实现左边两栏一定比例,左栏高度随右栏高度自适应?
实现三栏布局的六种方式
六种布局方式总结:圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。
圣杯布局是指布局从上到下分为header、container、footer,然后container部分定为三栏布局。
基础HTML:
基础CSS:
对于container,给它设置一个 overflow: hidden 使其成为一个 BFC ,使三栏浮动,并相对定位,给左右两个容器设置 200px 的宽度中间的容器设置 100% 的宽度。
此时 left 和 right 被相对于父元素 container 宽度的 100% 的 center 挤到下面。
BFC 的作用:
步骤:
这时,圣杯布局就完成了,但是在拖到很小的时候,布局会乱,以下是最终样式。
这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于 center 是在 container 的 padding 中的,因此宽度小的时候会出现混乱。
双飞翼布局给 center 部分包裹了一个 main 通过设置 margin 主动地把页面撑开。
基础HTML:
步骤 1 和 2 同圣杯布局
区别:
第三步:
给 main 设置 margin: 0 200px ,同时设置 overflow: hidden 使其成为一个 BFC
这时窗口宽度过小时就不会出现混乱的情况了,关键点在于内容部分是包裹在 main 中。
以下是最终样式:
Flex布局是由CSS3提供的一种方便的布局方式。
基础HTML:
步骤:
flex-shrink :
定义项目的缩小比例,默认为1,如果空间不足则项目缩小,如果有一项为0,其他为1,当空间不足时,前者不缩小。
可以看到,flex 布局是一种极其灵活的布局方式。
以下是最终样式:
基础HTML:
步骤:
这种方式的缺点是依赖于left 和 right 的高度,如果两边栏的高度不够,中间的内容区域的高度也会被压缩。
表格布局的好处是能使三栏的高度统一。
基础HTML:
步骤:
这种布局方式能使得三栏的高度是统一的,但不能使center放在最前面得到最先渲染。
网格布局可能是最强大的布局方式了,使用起来极其方便,但目前而言,兼容性并不好。网格布局,可以将页面分割成多个区域,或者用来定义内部元素的大小,位置,图层关系。
基础HTML:
步骤:
仅仅四条样式命令就能完成三栏布局,可见网格布局之强大
QQ空间个人中心怎么排版
进入QQ空间点击“小齿轮”“空间设置”“个人中心”“三栏布局模”或者“两栏布局;
设置成“三栏布局”模式后的页面显示图:
设置成“两栏布局”模式后页面显示,如图:
提示:若在“三栏布局模”勾选“取消标题栏”,那么空间的标题栏就不会显示。
三栏布局
三栏布局,左右两栏宽度固定,中间栏宽度自适应。
假设我们有以下 HTML 结构:
基本样式如下:
本文将介绍几种实现三栏布局的方式。
这里会有一点不一样,我们需要调整一下类为 .right 标签的位置。
三栏布局zblog模板的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于三栏布局的实现方式、三栏布局zblog模板的信息别忘了在本站进行查找喔。
本文由admin于2022-12-19发表在靑年PHP官网,如有疑问,请联系我们。
本文链接:http://www.qnphp.com/post/76391.html