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...
身為前端工程師，除了要實作功能互動以外，還有很重要的就是視覺上的呈現。 在前期的開發階段，為了盡量讓產品的原型看起來有感覺一點，通常前端工程師自己就要先懂一些配...
WordPress架站-附加CSS設置社群Icon 一般經營網站,通常會在選單附近放上社群相關連結和Mail,這個一般有三種方法: 安裝社群連結的外掛軟體...
區塊水平置中 使用 margin-left: auto和margin-right: auto 參考下例會發現區塊區域置中，然後只有最上層(父層) wrap...
word-spacing 的規則 word-spacing 基本上僅需指定一個值，其撰寫方式像是這樣 word-spacing: block; word-sp...
藉由對彈性項目宣告 flex 縮寫屬性，或是 flex 以下個別的彈性屬性，能夠定義彈性項目在容器中的擴張及壓縮係數。 .item { flex: [...
相信大家看完昨天的文章後，已基本會架設在bootstrap，架設bootstrap menu吧。 不過聰明的你，應該也會發現，這看起來不對勁呀。怎麼怪怪的呀，這...
Day29 六角 模仿遊戲#2 簡單小語 一開始看到這個版就覺得很酷可以記錄信用卡資訊，稍微玩了一下動畫起初覺得有難的感覺，但實際寫下去才發現兩行就可以完成了...
藉由對彈性項目宣告 flex 縮寫屬性，或是 flex 以下個別的彈性屬性，能夠定義彈性項目在容器中的擴張及壓縮係數。 .item { flex: [...
Day28 六角 模仿遊戲#1 簡單小語 這個週末偷懶了一下，多花了點時間完成這個模仿遊戲，再次把最近學到的To Do List給放進來刻意練習一遍，Java...
還記得剛學 CSS 的時後老是搞不清楚 position ，每次都盲試。定位是學 CSS 必定要搞清楚的基本功，理清楚各個屬性值的原理及特性才可以隨心所欲的駕...
今天要來講響應式網頁出現頻率超高的漢堡選單啦，先來科普一下為什麼叫漢堡選單？照維基百科的說法，純粹就是覺得外觀長得跟漢堡相似（哪裡像），他有放一個對照圖，可以去...
WordPress架站-附加的CSS調整標題大小 前一篇設定好分類之後,實際開啟文章分類的網頁,發現標題的字體太小,不管是電腦或是手機上閱讀都不太方便,於是開始...
好的~上一篇已經學會了 Sass 基本的語法應用，這篇來介紹 Sass 的進階語法，讓你會一度有 CSS 是程式語言的錯覺。 先記住這兩個語法 定義變數va...
direction 的規則 direction是控制inline物件排列的方向，其撰寫方式像是這樣 direction: ltr; direction的作用是...
margin 與 padding 補充昨日的資訊，可以在 chrome 的開發者模式看到一個 Box，其實會隨著各個區塊的設定而有不同，就搭配程式碼與顯示，比較...
今天一樣要講的是 金魚都能懂的網頁切版 : 多層次收合選單 NO015，昨天講了多層次選單的部分，今天要來講收合的部分啦～ 本篇關鍵字 <input...
Day27 六角 RWD#3 簡單小語 圖片的版型看到就想要練習，又看到這種斜一邊然後小尺寸變正的圖片縮放樣式，模糊效果及觸及事件，看到就忍不這想趕快學習並實...
align-self 和 align-items 和 align-content 的關係，屬性大同小異，差別就像是只操控單一個、操控每個單行、操控整體。 sel...
letter-spacing 是一個控制字元間距的屬性，許多視覺設計師很喜歡做加大字距的視覺設計，這時就是letter-spacing上場發揮的時候了。 let...
我們開始前，先處理一下header的部分吧，我們打開front-page.php,然後輸入編碼: <?php get_header();?> 至於...
選擇器 之前有介紹過選擇器，可參考以下連結，今天介紹後代選擇器 type selector (標籤選擇器)：Day07 Pseudo-classes (擬態...
CSScoke
hokou
Zombie@Dump
placeholder name
TerryYu
Yuri Tsai
Cindy
thewayeasy
Eudora
iThome鐵人賽
看影片追技術