html5--6-67 阶段练习8-弹性三列布局

学习要点

运用弹性盒子模型完成一个三列布局，加深对学过知识点的综合应用能力。
了解用百分比设置元素高度的方法。

 1 @charset="UTF-8";
 2 *{
 3     margin: 0;
 4     padding: 0;
 5 }
 6  
 7 body, html{
 8     width: 100%;
 9     height: 100%;
10     font:bold 24px 隶书;
11 }
12 
13 header,footer{
14     background:rgba(30,10,10,0.6);
15     padding: 15px;
16     text-align: center;
17     line-height: 2em;
18     color: #fff;
19     
20 }
21 
22 section{
23     background: rgba(5,5,5,0.5);
24     flex-grow: 1;
25 
26     display: flex;
27     flex-flow: row;
28 }
29 
30 article{
31     min-width: 500px;
32     flex: 1;
33     background: orange;
34 }
35 nav,aside{
36     width: 180px;
37     background: rgba(80,20,20,0.8);
38 }
39 
40 
41 body{
42     display: flex;
43     flex-flow: column;
44 }

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>6-67课堂演示</title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>
 9     <header> 页面头部</header>
10     <section>
11         <nav>左导航栏</nav>
12         <article>内容部分</article>
13         <aside>右边栏</aside>
14     </section>
15     <footer>页面底部</footer>
16 
17 </body>
18 </html>