RWD 響應式網頁設計該注意的 UI 細節 早期只有電腦上網時期，只要針對電腦設計網頁即可。然而行動上網的普及，也促成了 RWD 的發展。然而設計響應式網頁時，並不是單純讓視窗大小能夠維持不跑版這麼簡單，還有更深入的設計細節。 2021-08-18 CSS CSS RWD UI
運用 CSS 媒體查詢語法開發 RWD 響應式網頁 隨著時代的進步，上網的載具愈來愈方便，從早期的電腦，到後來的平板、手機，甚至於是超大型螢幕，已經不止傳統的 1024 * 768 解析度螢幕。而這麼多變的螢幕大小，正考驗著網頁開發者的功夫啊！因為這樣也衍生出了所謂的 RWD 響應式網頁設計，讓網頁在不同的裝置或視窗大小呈現不同的顯示方式。 2021-08-13 CSS CSS RWD
有哪幾種指定 CSS 樣式的方式？權重又是什麼？能吃嗎？ 網站的開發當中，若要設定 CSS，我們除了能夠針對網頁的標籤、class 進行指定，其實還有其它方式都能夠指定 CSS 樣式至我們希望呈現樣式的區塊，至於有那些呢，這篇文章就會來提到。 另外選用不同的方式，也會有不同的差異，這部分就會關心到 CSS 一種叫做「權重」的觀念，而它又牽涉到語法撰寫先後的問題，我們也會於後面來介紹。 2021-08-11 CSS CSS 選擇器
Flex 強大排版術：align-items、align-content 傻傻分不清楚？align-self 又是什麼？ 前面發了兩篇的 Flex 排版技術文章、也提到了許多主軸的排版方式，今天就要來介紹交錯軸 align-items。不過我在學習 Flex 時，發現到除了 align-items 之外，竟然還有 align-content、align-self 這些屬性，對於我這個小小新手來說整個傻傻分不清楚啊！所以，今天就來一起整理一下思緒吧！ 2021-08-08 CSS CSS Flex
Logo 不只能用 img，來試試 background 圖片取代文字技巧！ 一般來說新手時期在設置 Logo 時都會使用 HTML 的 img 標籤將圖片展示出來，不過其實除了 img 之外，還能夠使用 background 背景圖片，並使用圖片取代文字的技巧來設置 Logo。 什麼是圖片取代文字？ 圖片取代文字技巧，是一個區塊中，設置該區塊的背景圖片，在隱藏其文字只顯示背景的一種方式。其實文字都還在，只是我們透過一些方式讓文字不會顯示在網頁中。 2021-08-01 CSS CSS
Flex 強大排版術：主軸對齊怎麼做？為何都擠在同一排？相應屬性一次解說！ 上一篇 Flex 筆記文章介紹了它的主軸與交錯軸觀念，今天要來介紹的是主軸的對齊，就像文字有所謂的靠左對齊、置中對齊、靠右對齊或是分散對齊，Flex 的排版方式也能夠達成這樣的效果。 2021-07-25 CSS CSS Flex flex-direction justify-content flex-wrap