我转过几个弯 绕过那个小雨楼
- 拿着蒲扇摆着衣衫渡着紧箍咒
- 不问天涯不停留 喝过几壶酒
- 不过年少白头道义放胸口
- 倘若明天之后 遥看前尘剑封侯
- 似那天上神仙无所求
- 朝朝暮暮君如梦醒十分不为何理由
- 是真是假是惶恐是无休
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 又过了几个弯 算尽天量道莫慌
- 踏这田园闻这芳草香
- 跌跌撞撞仗剑天涯折煞不枉无笔良
- 是梦是幻是温柔是家乡
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 谁能与我一醉方休
flex弹性布局和grid格子布局常用5种布局结构
191
0
0
flex弹性布局
flex第一种基本布局
header会占据除去footer的所有高度，footer高度可以自己设置，默认是占满的。
<div id="layout">
<div class="one">header</div>
<div class="two">footer</div>
</div>html,body {
height: 100%;
margin: 0;
padding: 0;
}
#layout {
height: 100%;
color: #fff;
display: flex;
flex-direction: column;
}
.one {
background-color: #4cb4e7;
flex-grow: 1;
}
.two {
background-color: #ffc09f;
}flex第二种三明治布局
这种一般用于非悬浮header，三明治结构，现在大部分都是这种了吧！main会占据除去header和footer的高度。
<div id="layout">
<div class="one">header</div>
<div class="two">main</div>
<div class="three">footer</div>
</div>html,body {
height: 100%;
margin: 0;
padding: 0;
}
#layout {
height: 100%;
color: #fff;
display: flex;
flex-direction: column;
}
.one {
background-color: #4cb4e7;
}
.two {
background-color: #ffc09f;
flex-grow: 1;
}
.three {
background-color: #ffee93;
}flex第三种两栏布局
两栏结构，也是常见布局了
<div id="layout">
<div class="one">header</div>
<div class="two">main</div>
</div>html,body {
height: 100%;
margin: 0;
padding: 0;
}
#layout {
height: 100%;
color: #fff;
display: flex;
}
.one {
background-color: #4cb4e7;
width: 30%;
}
.two {
background-color: #ffc09f;
flex-grow: 1;
}
.three {
background-color: #ffee93;
}flex第四种三明治+两栏
从这里开始，flex和grid的html元素就会出现不同了。flex默认他单向性的，它会将所有子元素在主轴上排列。flex-direction则可以改变主轴的方向。
<div id="layout">
<div class="one">header</div>
<div class="content">
<div class="two">aside</div>
<div class="three">main</div>
</div>
<div class="four">footer</div>
</div>html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#layout {
height: 100%;
color: #fff;
display: flex;
flex-direction: column;
}
.one {
background-color: #4cb4e7;
}
.content {
flex-grow: 1;
display: flex;
}
.two {
background-color: #ffc09f;
width: 30%;
}
.three {
background-color: #ffee93;
width: 70%;
}
.four {
background-color: #e2dbbe;
}flex第五种三明治+三栏结构
这种结构也常用于博客吧，我以前写的主题就用的这种结构，但是 不是flex，是自己瞎鸡儿凑的。233...
aside和sidebar宽度可以自己定，main则会占据剩余的宽度
<div id="layout">
<div class="one">header</div>
<div class="content">
<div class="two">aside</div>
<div class="three">main</div>
<div class="four">sidebar</div>
</div>
<div class="five">footer</div>
</div>html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#layout {
height: 100%;
color: #fff;
display: flex;
flex-direction: column;
}
.one {
background-color: #4cb4e7;
}
.content {
flex-grow: 1;
display: flex;
}
.two {
background-color: #ffc09f;
}
.three {
background-color: #ffee93;
flex-grow: 1;
}
.four {
background-color: #e2dbbe;
}
.five {
background-color: #a3a380;
}grid 布局
grid第一种基本布局
header会占据除去footer的所有高度，footer高度可以自己设置，默认是占满的。
<div id="layout">
<div class="one">header</div>
<div class="two">footer</div>
</div>html,body {
height: 100%;
margin: 0;
padding: 0;
}
#layout {
height: 100%;
color: #fff;
display: grid;
grid-template-rows: auto fit-content(1rem);
}
.one {
background-color: #4cb4e7;
}
.two {
background-color: #ffc09f;
}grid第二种三明治布局
这种一般用于非悬浮header，三明治结构，现在大部分都是这种了吧！main会占据除去header和footer的高度。
<div id="layout">
<div class="one">header</div>
<div class="two">footer</div>
</div>html,body {
height: 100%;
margin: 0;
padding: 0;
}
#layout {
height: 100%;
color: #fff;
display: grid;
grid-template-rows: fit-content(1rem) auto fit-content(1rem);
}
.one {
background-color: #4cb4e7;
}
.two {
background-color: #ffc09f;
}
.three {
background-color: #ffee93;
}grid第三种两栏布局
两栏结构，也是常见布局了
<div id="layout">
<div class="one">header</div>
<div class="two">footer</div>
</div>html,body {
height: 100%;
margin: 0;
padding: 0;
}
#layout {
height: 100%;
color: #fff;
display: grid;
grid-template-columns: 30% auto;
}
.one {
background-color: #4cb4e7;
}
.two {
background-color: #ffc09f;
}
.three {
background-color: #ffee93;
}grid第四种三明治+两栏
grid有好几种方式可以达到这个效果，比如命名线号，命名格子，都可以的，这里用最基础的，最基本的方式完成。
<div id="layout">
<div class="one">header</div>
<div class="two">aside</div>
<div class="three">main</div>
<div class="four">footer</div>
</div>html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#layout {
height: 100%;
color: #fff;
display: grid;
grid-template-columns: 30% 1fr;
grid-template-rows: fit-content(1rem) 1fr fit-content(1rem);
}
.one {
background-color: #4cb4e7;
grid-column: 1 / 3;
}
.two {
background-color: #ffc09f;
}
.three {
background-color: #ffee93;
}
.four {
background-color: #e2dbbe;
grid-column: 1 / 3;
}grid第五种三明治+三栏结构
<div id="layout">
<div class="one">header</div>
<div class="two">aside</div>
<div class="three">main</div>
<div class="four">sidebar</div>
<div class="five">footer</div>
</div>html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#layout {
height: 100%;
color: #fff;
display: grid;
grid-template-columns: fit-content(1rem) 1fr fit-content(1rem);
grid-template-rows: fit-content(1rem) 1fr fit-content(1rem);
}
.one {
background-color: #4cb4e7;
grid-column: 1 / 4;
}
.two {
background-color: #ffc09f;
}
.three {
background-color: #ffee93;
}
.four {
background-color: #e2dbbe;
}
.five {
background-color: #a3a380;
grid-column: 1 / 4;
}
0
评论(0)