軸線 主軸 (main axis) 與交錯軸 (cross axis) 的關係如下表 二者一定是垂直關係 交錯軸只有上至下與左至右 2 種 主軸...
關於文字流 前幾天都提到了關於尺寸的事情,主要都圍繞在 Media Query 與 Grid, Flex 的容器「尺寸」的議題上。我們今天回到一開始的初衷,所謂...
Background-image 的規則 background-image作用是設定背景圖片,其撰寫方式像是這樣 background-image: url(&...
預設中,彈性項目會以檔案中出現的順序做排列,但如果你想要做到不一樣的順序時怎麼辦呢?這時就可以使用 order 了指定順序。 order .item {...
應用連結 source code 今天介紹的是 YURI 個人常用的字型工具 - Google Webfonts Helper。 當專案需要設定外部...
今天想要來整理一下清除浮動 float 的方式,只要有使用到 float,腦袋一定要自動聯想到清除浮動,他們兩個就是這麼密不可分~ 1. clearfix 在浮...
今天想要分享一些按鈕被 hover 時的效果,我的參考來源來自以下兩個 Youtube 頻道:Online TutorialsDarkCode 本篇關鍵字...
Day31 來杯咖啡 簡單小語 看似簡單卻又充滿挑戰細節的咖啡杯,一開始的躍躍欲試到後面的苦惱煩惱,運用各種偽元素拼拼湊湊,最後的波浪顏色區分,還是想不到方法...
藉由對彈性項目宣告 flex 縮寫屬性,或是 flex 以下個別的彈性屬性,能夠定義彈性項目在容器中的擴張及壓縮係數。 .item { flex: [...
Background-color 的規則 background-color基本上僅需指定一個值,其撰寫方式像是這樣 Background-color: red;...
外容器 (Container) 參考 CodePen 連結,試著將註解的行數依描述進行調整 try01:要加display才會顯示 Flex 的效果 try0...
之前被朋友敲碗,叫我寫一篇解釋 inline 跟 block,今天就來講一下他們好了,雖然我前面的 CSS 筆記有稍微講過了,但就想說拉一些想要獨立講的內容出來...
鐵人賽終於過去一半了~今天要講的是金魚都能懂的網頁切版 : 時間軸 NO019,滿適合用在歷史沿革,或是一些活動時間紀錄。 本篇關鍵字 float tr...
Day30 鐵人煉成 中點 是中點不是終點,沒想到30天的挑戰成功了,在工作及休息時間找到平衡點,利用自己的時間加緊練習並學習,雖然目前的作品不是非常有競爭力...
Font 的規則 font 是一個文字相關屬性的縮寫屬性,也是目前金魚都能懂的CSS必學屬性中第一個遇到的CSS縮寫屬性,font 可同時設定了包括文字樣式、小...
藉由對彈性項目宣告 flex 縮寫屬性,或是 flex 以下個別的彈性屬性,能夠定義彈性項目在容器中的擴張及壓縮係數。 .item { flex: [...
Flex from:https://www.w3.org/TR/css-flexbox-1/#property-index Flex Box:是一個 (Box...
今天要來講的就是 金魚都能懂的網頁切版 : 交錯漂浮版 NO004,滿適合用在介紹公司的服務,或是關於我們這類的區塊使用。 本篇關鍵字 flex-shrin...
WordPress架站-附加CSS設置社群Icon 一般經營網站,通常會在選單附近放上社群相關連結和Mail,這個一般有三種方法: 安裝社群連結的外掛軟體...
身為前端工程師,除了要實作功能互動以外,還有很重要的就是視覺上的呈現。 在前期的開發階段,為了盡量讓產品的原型看起來有感覺一點,通常前端工程師自己就要先懂一些配...
Day29 六角 模仿遊戲#2 簡單小語 一開始看到這個版就覺得很酷可以記錄信用卡資訊,稍微玩了一下動畫起初覺得有難的感覺,但實際寫下去才發現兩行就可以完成了...
相信大家看完昨天的文章後,已基本會架設在bootstrap,架設bootstrap menu吧。 不過聰明的你,應該也會發現,這看起來不對勁呀。怎麼怪怪的呀,這...
word-spacing 的規則 word-spacing 基本上僅需指定一個值,其撰寫方式像是這樣 word-spacing: block; word-sp...
區塊水平置中 使用 margin-left: auto和margin-right: auto 參考下例會發現區塊區域置中,然後只有最上層(父層) wrap...
藉由對彈性項目宣告 flex 縮寫屬性,或是 flex 以下個別的彈性屬性,能夠定義彈性項目在容器中的擴張及壓縮係數。 .item { flex: [...
WordPress架站-附加的CSS調整標題大小 前一篇設定好分類之後,實際開啟文章分類的網頁,發現標題的字體太小,不管是電腦或是手機上閱讀都不太方便,於是開始...
還記得剛學 CSS 的時後老是搞不清楚 position ,每次都盲試。定位是學 CSS 必定要搞清楚的基本功,理清楚各個屬性值的原理及特性才可以隨心所欲的駕...
Day28 六角 模仿遊戲#1 簡單小語 這個週末偷懶了一下,多花了點時間完成這個模仿遊戲,再次把最近學到的To Do List給放進來刻意練習一遍,Java...
今天要來講響應式網頁出現頻率超高的漢堡選單啦,先來科普一下為什麼叫漢堡選單?照維基百科的說法,純粹就是覺得外觀長得跟漢堡相似(哪裡像),他有放一個對照圖,可以去...
好的~上一篇已經學會了 Sass 基本的語法應用,這篇來介紹 Sass 的進階語法,讓你會一度有 CSS 是程式語言的錯覺。 先記住這兩個語法 定義變數va...