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  2  3  4     
      5      6     
      7  8  9     
     
       页面头部
     
10     
     
      11         
      
       左导航栏
      
12         
      
       内容部分
      
13         
      
       右边栏
      
14     
     
15     
     
      页面底部
     
16 17 18