第二十九天：版面组合与重构

金鱼都能懂的网页切版：26、27

版面组合

https://codepen.io/mikeyam/pen/abZvZrN?editors=1000

这章节主要是把先前运用到的各个版面做组合，其中要注意地方，在做各个版面时，有写到许多相同的 class，这时要做组合时，很容易相互影响，因此可以透过以下方式，把最外层的 class 写在css来做区分版面。

.footer{
    padding: 150px 0 0;
    background: linear-gradient(-20deg,#3F5494,#08c7a5);
}
.footer .container{
    display: flex;
    max-width: 1200px;
    margin: auto;
}
.footer .footer-item{
    width: 0;
    flex-grow: 1;
    margin: 0 20px;
}
.footer .footer-item nav{
    display: flex;
    flex-direction: column;
}
.footer .footer-item nav a{
    color: #fff;
    line-height: 1.4;
    text-decoration: none;
    padding: 5px 0;

重构

简单说，重构是把相同结构的 CSS，抽出来做整合，来减少肥大的程序码。
因此，想要写出乾净的程序码，是不可缺少的，就像考试一样，答题答完时，也要做检查一样。