技術 Day 1 - [UI] 01-通過UI設計師嚴格的檢查-排版&點擊範圍

第二次參賽，這次不講 Code，來講工具！ 工作以來，發現很多我自己常用的小技巧或 Debug 工具，其實有些是同事不知道的。我打算用這30天的文章，紀錄平時工...

技術 Day08 Box Modle: Margin? Collapsing margins外距折疊？Padding?

初學時Margin、Padding傻傻分不清楚，心想反正畫面有就好了，被問了『你何時用Margin?何時用Padding?』，於是針對這個議題展開了追尋。這裡會...

技術 [快速入門前端 26] CSS Box Model 盒子模型

Box Model Box Model 其實就是把元素比喻為我們很常見的盒子，如下圖我們可以看到主要分為四個部分：盒子中的內容物 (電腦)、電腦與盒子間的空隙...

技術 Day 06：專案01 - 超簡單個人履歷05 | CSS版面佈局、Flex

昨天講完的CSS的文字和區塊屬性後，今天要接續介紹版面佈局的屬性，以及一個非常好用的佈局容器 - Flex，上完這堂課，你的網頁佈局就可以更加彈性囉~ 那麼，我...

技術 前端工程學習日記第４天

#使用 margin（向外）、padding（向內） 來推擠距離css:.box{border:10px solid #000;padding-left:30p...

技術 Day 26 | 打破規則，勇敢創新 - 破格式設計

今天要講的是金魚都能懂的網頁切版 : 破格式設計 NO011，破格式的設計在很多樣版網站可以見到，近期工作中也有接觸到，滿多時候就是拿來製造兩物件重疊的效果。...

技術 Day 11 用 WordPress 看 CSS 樣式：「這裡空間大一點」

大家好，我是 Eric。 昨天我們介紹完 CSS 中與字型有關的樣式，在了解這些樣式屬性後，其實我們已經看得懂超過一半以上的 Twenty Twenty 佈景主...

技術 Day17-HTML(13) – CSS盒子模式(下)

上次提到設定 border 的樣式，這次接著繼續說下去～ 我們可以用一行來設定所有樣式 p{       border: thick orange dashed...

技術 Day11 : 切版(二) ： 基礎樣式 1 : 內距與外距

那今天就從我們在排版很常用到的內距 padding ＆ 外距 margin 首先從title區開始先上個設計圖的樣式那我們在title裡的大頭照是圓形的我們如果...