雖然說網格線會隨著網格項目自動生成，但既然要使用網格系統，就要了解怎麼操控網格線，才能劃出各種多變的網格區域，然而畫網格線有很多種做法，且每種做法的語法也不同，...
今天要講的是金魚都能懂的網頁切版 : 訊息對話紀錄 NO018，像我這樣的邊緣人，可以用這個來製造出有人跟我對話的假象，好像也是滿實用的啦 本篇關鍵字 ju...
做個簡單的並排選單練習 HTML 將基本列表完成，使用 <ul> 和 <li> 因為是要點擊連結，所以加入 <a> 最...
.container { display: grid | inline-grid; } 當我們對 container 宣告 display: grid...
當一個 div 內包含 多個 div 子物件，因為 div 為 block 塊狀屬性，故預設撐滿整列、並由上往下排列： .box .item 1...
延續昨日的部分，把外容器補完 flex-wrap flex-wrap：就是換行屬性，當內元件數量超過外容器大小時，就會超出 各屬性如下，假設 flex-di...
前情提要，從上一篇我們了解到背景圖片的多個設定，以及可以設定多重背景之後，這一篇我們要來了解的是背景的漸層，如果還沒看過上一篇的朋友，建議先去看一下「backg...
今天就來整理，如何消除使用 inline-block 時，那個惱人的安全社交距離吧（痾不是啦，是空白間距）。 怕有人不理解我在講什麼，我先上範例檔讓大家知道是什...
今天要講的是金魚都能懂的網頁切版 : 互動圖文卡片 NO002 本篇關鍵字 position: absolute top: 0、right: 0、bot...
軸線 主軸 (main axis) 與交錯軸 (cross axis) 的關係如下表 二者一定是垂直關係 交錯軸只有上至下與左至右 2 種 主軸...
Day32 玩轉同樂 簡單小語 最近莫名看到這種特效很炫的就會想要寫來練習，又是為元素的應用，當然還有flex的排版，大致上沒太大問題，不過現在對於Body的...
Background-image 的規則 background-image作用是設定背景圖片，其撰寫方式像是這樣 background-image: url(&...
關於文字流 前幾天都提到了關於尺寸的事情，主要都圍繞在 Media Query 與 Grid, Flex 的容器「尺寸」的議題上。我們今天回到一開始的初衷，所謂...
Grid（網格），全名 CSS grid Layout Module Level 1（https://www.w3.org/TR/css-grid-1/） Gr...
這篇文章，主要是介紹wordpress數字按鈕：the_posts_pagination，以及該如何去用css裝飾的，有興趣就看下去吧。 數字按鈕 我們可以簡單...
應用連結 source code 今天介紹的是 YURI 個人常用的字型工具 - Google Webfonts Helper。 當專案需要設定外部...
預設中，彈性項目會以檔案中出現的順序做排列，但如果你想要做到不一樣的順序時怎麼辦呢？這時就可以使用 order 了指定順序。 order .item {...
今天想要來整理一下清除浮動 float 的方式，只要有使用到 float，腦袋一定要自動聯想到清除浮動，他們兩個就是這麼密不可分～ 1. clearfix 在浮...
今天想要分享一些按鈕被 hover 時的效果，我的參考來源來自以下兩個 Youtube 頻道：Online TutorialsDarkCode 本篇關鍵字...
Day31 來杯咖啡 簡單小語 看似簡單卻又充滿挑戰細節的咖啡杯，一開始的躍躍欲試到後面的苦惱煩惱，運用各種偽元素拼拼湊湊，最後的波浪顏色區分，還是想不到方法...
Background-color 的規則 background-color基本上僅需指定一個值，其撰寫方式像是這樣 Background-color: red;...
外容器 (Container) 參考 CodePen 連結，試著將註解的行數依描述進行調整 try01：要加display才會顯示 Flex 的效果 try0...
鐵人賽終於過去一半了～今天要講的是金魚都能懂的網頁切版 : 時間軸 NO019，滿適合用在歷史沿革，或是一些活動時間紀錄。 本篇關鍵字 float tr...
藉由對彈性項目宣告 flex 縮寫屬性，或是 flex 以下個別的彈性屬性，能夠定義彈性項目在容器中的擴張及壓縮係數。 .item { flex: [...
Font 的規則 font 是一個文字相關屬性的縮寫屬性，也是目前金魚都能懂的CSS必學屬性中第一個遇到的CSS縮寫屬性，font 可同時設定了包括文字樣式、小...
Day30 鐵人煉成 中點 是中點不是終點，沒想到30天的挑戰成功了，在工作及休息時間找到平衡點，利用自己的時間加緊練習並學習，雖然目前的作品不是非常有競爭力...
Flex from：https://www.w3.org/TR/css-flexbox-1/#property-index Flex Box：是一個 (Box...
之前被朋友敲碗，叫我寫一篇解釋 inline 跟 block，今天就來講一下他們好了，雖然我前面的 CSS 筆記有稍微講過了，但就想說拉一些想要獨立講的內容出來...
今天要來講的就是 金魚都能懂的網頁切版 : 交錯漂浮版 NO004，滿適合用在介紹公司的服務，或是關於我們這類的區塊使用。 本篇關鍵字 flex-shrin...
身為前端工程師，除了要實作功能互動以外，還有很重要的就是視覺上的呈現。 在前期的開發階段，為了盡量讓產品的原型看起來有感覺一點，通常前端工程師自己就要先懂一些配...
placeholder name
Zombie@Dump
hokou
Eudora
CSScoke
TerryYu
閃光洽
thewayeasy
Yuri Tsai
iThome鐵人賽
看影片追技術