鐵人檔案
使用開發者工具看圖片時，發現下方有個空隙，這是為什麼? 因為預設img為行內元素，和示意圖文字一樣留出空間給y,g英文字母。 去除空隙的辦法 codepen參...
可以看以下的程式碼和截圖，或者看codepen範例：https://codepen.io/rochelwang1205/pen/LYMQMMP 個別設定的方式...
先在HTML設定，撐出高度。 <div class="element"> <p>#從零開始：backgroun...
還記得在#從零開始9️⃣：都只用div不行嗎? 為甚麼要用ul li語意化標籤，我們討論了要使用語意化標籤，非不得已的情況下再使用如div的非語意化標籤。其中使...
在比較熟悉如何架構網頁、呈現出想要的樣子後，應該多少會覺得：希望能夠更快、更有效率地描繪出來。 最直接想到的或許是提升英文打字速度，這會有幫助，但還不夠。 我們...
設定圖片高度，要寫死高度還是不要寫死高度? 就像最開始提到，響應式網頁超級超級重要，所以如果在不同螢幕大小，圖片太大超出畫面(或著太小)的話，體驗感覺就會大大地...
接續上一篇#從零開始15：怎麼設定照片大小，這篇要討論@media(max-width)和@media(min-width)。 在網頁設計中，響應式網頁設計（R...
在前端開發中，CSS 的組織和管理變得至關重要，特別是當項目變得越來越龐大時。為了使 CSS 更易於維護、擴展和協作，有三種常見的設計模式被廣泛使用：SCSS、...
OOCSS（Object-Oriented CSS） OOCSS（Object-Oriented CSS）強調了分離結構和外觀的概念。以下是 OOCSS...
當一個專案變得越來越大，CSS的複雜性也隨之增加，要管理龐雜的程式碼變得很麻煩。這篇開始要介紹的Sass，可以幫助我們解決這些問題，並將CSS代碼組織得更加結構...
