一步一腳印工作札記

利用 SCSS 變數來設定背景顏色可以省去不少力氣，別再做個傻傻的碼農了^^ HTML: <div>AAAAA</div> <div>AAAAA</div> <div>AAAAA</div> <div>AAAAA</div> <div>AAAAA</div> SCSS: $colors : (1: #664454, 2: yellow, 3: #00ff75, 4: #985544, 5: #665566);   @for $i from 1 through 5 {     div:nth-child(#{$i}){       text-align: center;     background-color: map-get ( $colors , $i);     }   }

這裡利用 forEach 及加入 function  toggleOpen  來改變所有子元素字體大小顏色，只要一旦在文字上按下，字體會變大及改變顏色。 HTML: <div class="panels">   <div class="panel panel1">123</div>   <div class="panel panel2">123</div>   <div class="panel panel3">123</div>   <div class="panel panel4">123</div>   <div class="panel panel5">123</div> </div> CSS: . tyy {  color: red;   font-size:80px; } JavaScript: const panels = document.querySelectorAll('.panel'); function toggleOpen () {   this.classList.toggle('tyy');   // 或可以直接寫成   this.style.color = "red";   this.style.fontSize = "80px";   this.style.backgroundColor = "green"; } panels.forEach(panel => panel.addEventListener('click', toggleOpen ));

CSS3 裡面在版面配置中，提供了最新 display:flex 裡面可用的參數屬性相當多，今天無意中發現了比較不同的東西，在這裡記錄下來供大家參考: HTML: <section class="sn">   <header>Header</header>   <main>Main</header>   <nav>Nav</nav>   <footer>H</footer> </section> CSS:   section{          display: flex;           flex-wrap : wrap;   // 支援 flex 自動換行   }   section > * {     padding: 1em;     box-sizing : border-box;   // 使用 border-box 模式   }   header{       flex-basis : 100%;    //  佔滿一整行       order: 1;                   //   order 用來顯示呈現畫面的順序，序號由 1 開始   }   main{       flex-grow : 1;    //  讓 main 佔據  1/4 (4 是由 main & nav 合起來計算)       order: 2;   }   nav{        flex-grow : 3;     //  讓 nav 佔據  3/4 (4 是由 main & nav 合起來計算)       order: 3;  }  footer{       flex-basis: 100%;       order: 4; }