什麼是跑版？跑版，簡單來說，畫面不是你預期，東西待在它不該待的地方，畫面不忍直視，有興趣可自行查詢關鍵字。事情是這樣得，隨著每次Code Review做調整後，...
一、導覽列(navbar)是網頁或應用程式界面中常見的一種元素，用於幫助使用者導航和定位到網站或應用的不同部分或功能。它通常位於網頁或應用的頂部或側邊，提供了一...
(一)陰影(二) 定位、文繞圖一、定位1.一般定位position2.圖層定位利用到z-index屬性來設定元件層次，z-index 數字越大的在越上面，反之則...
您在瀏覽其他網站時，是否常常被突如其來的彈跳視窗惹到心煩呢？不論是廣告、強迫訂閱、最新資訊…等，網頁常常使用彈跳視窗來宣傳。雖然惱人，但無法否認使用者確實被吸引...
CSS串接樣式表，可控制版面位置、網頁配色以及產生文字與圖片特效(一) 在HTML文件裡面使用CSS樣式，有三種方式1.行內宣告:將CSS寫在html標記裡，&...
本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解網頁上...
記得當初Code-Review常常被問為何這樣命名？於是展開對於命名的追尋啊～看似簡單的一個Class命名，往往會影響到整個網頁的可讀性、維護性，甚至可能引發不...
CSS 的數值可以做簡單的運算，今天我們要介紹 CSS 的數學函式，數學函式可以讓你在設計網頁時更靈活操控元素的尺寸和位置。 實用的 CSS 數學函式共用四個...
前些日子裡，我們將網頁三件套的基礎語法都大致講解完畢了，但理論往往是需要以實作結果去支持的，雖然有了計算機這一作品，但網頁中幾乎是用不到該功能 ── 所以本日的...
在網頁設計中，我們會使用到各種單位來調整尺寸和排版，而單位分成絕對單位和相對單位。 ↓ 今日學習重點 ↓ 了解好用的 CSS 單位並使用它們 本...
當我正疑惑要不要寫篇時，想說這大家都應該都知道吧？但回想小白白如我，還真的不知道這玩意。以下分享是跟切版比較有關係，做個簡單介紹，細節的話可能夠出一個鐵人系列...
如何讓愛心、讚、FB的button在右下角? 在這個案例中我們先寫HTML <section> <h1>進階定位...
CSS 為什麼需要 Reset？ 不同的瀏覽器會有不同的預設樣式，可能包含字體大小、邊距、填充、行高等等。 這會導致網頁的外觀不一致，所以通常我們在最一開始開...
display 屬性是一個極為重要且強大的屬性，它控制著元素在網頁中的呈現方式。這次要搭配的是CSS Display Module Level 3以下為部分摘要...
了解了昨天的定位之後，今天我們做一個小練習， 如何讓兩個方塊重疊呢? HTML程式碼我們這樣打: ⋮ <h3>...
在網頁中，每個 HTML 元素都是一個方塊，我們又稱之為「盒子 Box」。 這個盒子包含了它的內容、內部間距、邊框線與外部間距，光用說的有點抽象，讓我們以 F...
記得初次接觸Transition，是要做個畫面效果，搞了老半天，差點....不做了（還是有生出來），這是要搭配服用『熱騰騰』的W3C CSS Transitio...
上篇我們了解了寫 Code 的三大方向，主要都是為了更簡單、更好維護。 所以，以此延伸，有許多 CSS 的模組化命名方法論就此而生，其中包括 OOCSS、SM...
初次碰CSS Animation是為了做出某動畫要求，然後饅頭對我說，以後JS有點什麼了，也盡可能用CSS實作動畫啊，當下的我想說，為傻？JS動畫庫這麼多，為何...
在進入寫 CSS（或其他程式碼）的世界之前，有幾個重要的原則值得我們了解和牢記。這些能夠提高 code 的品質，讓他們未來容易維護和擴增。以下將介紹三個重要的...
影片教學 重點回顧 padding：content 與 border之間的距離 margin：元素間的距離 border：框出元素的範圍 以上是今天的教...
記得初學的時候就讀了規範9 Visual formatting model，以至於懷疑CSS可不可以學起來？有了些實作經驗後，再回來看看，看看有什麼新發現！本次...
以往 CSS 要使用巢狀管理要透過 Sass (SCSS) 或 Less 等預處理器才能實現，現在原生的 CSS 巢狀也可以使用了。前陣子在 Firefox...
影片教學 重點回顧 color: 色彩名稱 | rgb(rr,gg,bb) | #rrggbb | rgba(rr,gg,bb,alpha) opacity...
今天是CSS最後一章，最後來講講CSS動畫，運用CSS能夠製作一些基本的動畫，讓畫面更有趣！除了前面說過的transition屬性能利用過渡效果呈現簡單的小動畫...
嗨～從今天開始是一系列的CSS內容，前一章說到瀏覽器會讀取HTML轉譯成視覺化網頁，並搭配CSS、JavaScript使用。CSS負責網頁呈現的樣式、外觀，Ja...
嗨～今天是第15天！終於一半啦！！！今天要來談談CSS的偽元素，有了偽元素讓元素能添加更多效果、變化，網頁設計也能更多樣，是很常用的設定之一。前面的天數有談到：...
先祝大家中秋節快樂！雖然是休假，但鐵人賽不能休息啊嗚嗚不管怎麼說，還是趕快進入今天的內容吧～昨天談到CSS的基本認識並介紹了選擇器、常用屬性，忘記的記得回去看。...
在前幾日中，我們總共講解了六篇CSS的基本屬性，內容之多，但都僅是蜻蜓點水的帶過而已，可見CSS的上限非常之高，學習它必然是一段漫長之路。 以前在設計網頁時，我...
Jessie
ttdragon0722
Eva Chen
ThisIsFrankTsai
coding19
luna0228
iThome鐵人賽
看影片追技術