iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
0
自我挑戰組

向CSScoke重新學習CSS系列 第 29

第二十九天:版面組合與重構

金魚都能懂的網頁切版: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,抽出來做整合,來減少肥大的程式碼。
因此,想要寫出乾淨的程式碼,是不可缺少的,就像考試一樣,答題答完時,也要做檢查一樣。


上一篇
第二十八天:文字排版
下一篇
第三十天:整理自己的 CSS
系列文
向CSScoke重新學習CSS30

尚未有邦友留言

立即登入留言