運用 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
Flex 強大排版術：flex-direction 如何應用？主軸、交錯軸附圖解說！ 網頁排版技術非常多，包含 float、inline-block、Flex 或是 grid 等等，其中 Flex 是現今滿常見的排版技術，使用這個技術，也能夠較為輕鬆地達到所謂的水平垂直置中，那要如何使用這項技術呢？這篇文章就來說明 Flex 其中一個屬性 flex-direction。 2021-07-22 CSS CSS Flex flex-direction
什麼是 background？跟 img 的差別？image、repeat、color 以及 position 等屬性又該如何設定？ CSS 除了透過 img 顯示圖片外，還有 background 可以用於顯示背景圖片，當然它並不只有背景圖片的技巧，如果要設定背景顏色也是可以的，今天就來介紹一下 background 相關應用。 2021-07-18 CSS CSS background