今天要講的是 金魚都能懂的網頁切版 : 多層次收合選單 NO015，不過我要講的只有多層次選單的 part，收合的部分計畫明天再來打。 本篇關鍵字 ul、l...
我假設你已經會... 使用 CSS 定義樣式（選用適當的選擇器定義屬性與屬性值） 已配置 Sass 編譯 CSS 的開發環境（若還沒，使用線上編輯器 Cod...
Day26 六角 RWD #2 簡單小語 這次看到了兩個版型就毫不猶豫合併並且加入最近所學的JS功能(ToDoList及Time Clock)，這個heade...
因為現在發現 HTML 和 CSS 都會交替用到，標題不好區分，就當個綜合應用吧！ 區塊元素 CSS 設定：display: block 盡可能佔滿版面 會...
線上範例：JIT 線上範例 - Tailwind Play 因為 Tailwind CSS 的設計原理，在開發時會先幫你產生好超多的 class，CSS 檔...
當瞭解完彈性容器的屬性後，接下來就是進入彈性項目的部分，如果你還不了解什麼是彈性容器，可以回顧第四天flexbox基礎 .container { dis...
今天要來講 金魚都能懂的網頁切版 : 導覽列 NO007，切版網頁，免不了得製作導覽列，算是非常非常基本的要求，前期我在練習切版的時候，常常莫名其妙的就卡住做不...
text-align 的規則 text-align主要的用途用於文字的水平對齊，基本上僅需指定一個值，其作用的對象是物件內的文字，例如我對p設定text-ali...
熟練 CSS 選擇器的各種花式(?)運用可以大幅減少你對元素定義 class / id 值，也可以輕易地實踐設計師各種(龜毛)精緻的樣式要求。 例如動態生成的數...
線條 border：四周的框線，分別定義粗細、樣式、顏色，前後順序沒關係 樣式：實心線 (solid)、虛線 (dashed)、點線 (dotted)...
今天想要分享一下我看 Youtube 看到的效果，先分享連結，裡面有使用到的 wave.png 請直接 YT 下載。 本篇關鍵字 animation @...
接下來幾個屬性都和對齊有關，其中 align-items 這個屬性擅長於操控"相交軸上彈性項目的對齊位置"，也非常適合拿來調整內容。 如果你...
昨晚在電腦前莫名其妙被周公抓走，還好趕在灰姑娘的午夜 12 點前魂魄歸來、踩線發文，看來這幾天的文都在敘述概念（Git / HTML)……實在太催眠了。 為防...
Day25 六角 RWD #1 簡單小語 一開始看到覺得應該不難，結果RWD直接卡住不知道Table該怎麼排，後來發現參考樣板的方式，利用dataset的方式...
Day24 六角 Off Canvas #3 簡單小語 沒想到OffCanvas練習了三篇，看到這個版覺得有趣，立馬又想寫一個，雖然有些效果不同但大部分應該是...
Color 的規則 color基本上僅需指定一個值，其撰寫方式像是這樣 color: red; color的作用是設定文字的色彩，其中設定的值有多種方式，其中...
選擇器 補充另外 2 個選擇器 type selector (標籤選擇器)：Day07 Pseudo-classes (擬態選擇器)：Day07 desc...
今天要來講 金魚都能懂的網頁切版 : 不規則邊緣 NO021通常這類的圖都會直接請設計師作圖出來，只是讓大家知道有做圖之外的方式，藉此能更靈活的運用 CSS 。...
昨天我們成功地從資料管理系統拉取了資料放在網頁上顯示，但由於目前的網頁實在還是太醜，再繼續將其他資料抓下來之前，就讓我們先來將網頁美化一下吧！ CSS 語言...
接下來幾個屬性都和對齊有關，其中 align-content 這個屬性擅長於操控"相交軸上彈性項目的分布"，也非常適合拿來調整內容。 如果你...
選擇器 (Selector) 似乎也稱為選取器，介紹幾個常用的選擇器 標籤選擇器 type selector：又稱型態選取器，就是之前舉例時修改標籤的樣式...
CSS的優點就是很容易上手，很好使用，無論怎麼命名、怎麼使用，只要對應的到都可以。甚至如果有相同的命名，還會去計算權重，使用權重最高的那個。幾乎不用擔心會出錯，...
Day23 六角 Off Canvas #2 簡單小語 CodePen看看高手們的OffCanvas的模樣，一看到這個照片的樣板，就決定嘗試做做看了，做完發現...
昨天介紹了多重背景的用法，今天想挑戰一樣的畫面，用不同的方法做出來。 切版沒有絕對的對跟錯，只有適合什麼情境或是在什麼條件下相比起來比較好，多嘗試練習才能發掘...
Line-height 的規則與概念 line-height基本上僅需指定一個值，其撰寫方式像是這樣 line-height: 1; line-height的...
有在寫Html的小夥伴可能會想問這個按鈕 <button></button> 這麼醜，我能不能去自訂一個我想要的樣式?答案當然是~~~可...
接下來幾個屬性都和對齊有關，其中 justify-content 這個屬性擅長於操控"主軸上彈性項目的分布"，非常適合拿來調整內容。 注意：...
Day22 六角 Off Canvas #1 簡單小語 選單選單選單，各式各樣，基礎練習不能少，每次在RWD時的menu轉換都是一種練習，掌握每個物件的位置及...
寫CSS最痛苦的事情是什麼？ 介紹SCSS之前，先想想寫CSS最痛苦的地方是什麼？ 寫法很囉唆 不容易維護 例如以下這個例子 div { color: #...
今天要來講 金魚都能懂的這個網頁畫面怎麼切: No.001 - 圖文滿版區塊 未來的程式碼範例，前面都會有一個 css reset * { margin:...
Zombie@Dump
Eudora
TerryYu
hokou
placeholder name
CSScoke
灆洢 a.k.a Maplewing
tso1158687
kyminjob
iThome鐵人賽
看影片追技術