当前阅读教程:Flex Box实战教程 > 圣杯布局 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 固定的底栏 | 下一篇: 输入框的布局 |
圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。 HTML代码如下 <body> <header>...</header> <div> <main>...</main> <nav>...</nav> <aside>...</aside> </div> <footer>...</footer> </body> CSS代码如下 .HolyGrail { display: flex; min-height: 100vh; flex-direction: column; } header, footer { flex: 1; } .HolyGrail-body { display: flex; flex: 1; } .HolyGrail-content { flex: 1; } .HolyGrail-nav, .HolyGrail-ads { /* 两个边栏的宽度设为12em */ flex: 0 0 12em; } .HolyGrail-nav { /* 导航放到最左边 */ order: -1; } 如果是小屏幕,躯干的三栏自动变为垂直叠加。 @media (max-width: 768px) { .HolyGrail-body { flex-direction: column; flex: 1; } .HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content { flex: auto; } } 实战案例2: 完整代码: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圣杯布局</title> </head> <style> .rongqi{display:flex; flex-direction:column; background-color:#9CF; min-height:100vh;} .tou{ background-color:#CCC; height:60px;} .zhong{ background-color:#396;flex:1; display:flex;} .di{ background-color:#999; height:60px;} .c01{ background-color:#FC3;} .c02{ background-color:#C63; flex:1;} .c03{ background-color:#C6C;} </style> <body> <div>头部</div> <div> <div>左边</div> <div> 圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。 </div> <div>右边</div> </div> <div>底部</div> </body> </html> |
|
上一篇: 固定的底栏 | 下一篇: 输入框的布局 |