我在學習 flexbox 時，發現有好多容易混肴的排版屬性值，例如: start, flex-start, self-start 在 Chrome 的...
今天工作期間有遇到一個問題：因公司是醫療體系，所以系統裡有很多病患的名字，而人的名字就會有一些特殊的字。當時公司的解決辦法就是建了自己的造字，並一直沿用到現在，...
本來今天沒有要寫這篇文章，但寫AC課程的作業時，對自己使用 :hover的用法感到迷惘竟然不夠聰明，只好花時間勤能補拙啦~研究一下:hover的使用方式 今天練...
甜點烘焙店使用過的屬性，為大家整理了前 5 名常用排行榜 ❶ box-shadow❷ liner-gradient❸ rotate❹ perspective❺...
使用網頁時，我們通常會希望中間層的內容可以滿版，讓底下可以靠在畫面的最下方，此時可以使用flex對畫面進行修正，讓中間層在放大時，自動擴增。 <div c...
CSS 選擇器 CSS 選擇器怎麼用? 有哪些? 每次都被CSS選擇器多種變化搞得頭昏腦脹不然就是忘記如何將querySelector選中的節點裡的所有子元素選...
前言 昨天完成框架跟HTML 今天當然就是希望可以順利完成CSS的部分，以及使用SCSS 讓樣式跟排版都順利完成啊～～～ 先從最上方的首頁還有導覽列開始更改（...
您好，歡迎光臨CSS甜點烘焙店 今天終於是第30天了，就讓最後的小動畫來完結這一切吧~ 一、抖抖森林(.forest) 首先看一下原本.forest的設定 po...
一、前言 終於寫到第 30 天啦～真是可喜可賀（超感動的）！沒想到在比賽的這一個月裡，時間居然可以過的這麼快，每當寫完文章後，不知不覺間天也跟著黑了，更沒想到...
您好，歡迎光臨CSS甜點烘焙店 一、店面出場(.store) 先設定好@keyframes，預設的效果是從天而降，以及有點彈跳的感覺，所以在rotateX做角度...
一、前言 終於完成鐵人賽啦！可怕的不是每天的截稿期限，而是要在同一天寫兩篇「完賽心得」，而且內容還不能一樣，雖然我是有點想直接複製貼上，不過這樣子好像有點說不...
就算已經參加過兩屆了，到了這一天還是會有「天啊，沒想到我終於走到終點了啊！」的感覺。 如果有讀過我的 「Day01 參賽前言」的讀者就會知道，我今年絕對擁有 一...
一、前言 本篇要來整理常見的面試題目，整理的目的只是為了日後方便閱讀，文章內的資訊都是從網路上收集而來，若是有侵權情況，煩請告知謝謝！ 二、非關技術問題 2...
功能實作 : Demo 一、前言 今天的目標是將現有的組件組成一個 SPA 網頁，最終目標是先把網頁寫出來，至於優化和除錯的部分，就要等整個功能都實作出來...
您好，歡迎光臨CSS甜點烘焙店 今天要讓2隻吉祥物動起來~ 要使用到CSS Animation，做基礎的動畫的不複雜，只要有影格的觀念，不管過程要有幾格，甚至只...
情境 z-index 可以幫助我們決定當元素重疊的時候，誰在上面，誰在下面。 那我們該如何使用 z-index 呢？首先，因為 z-index 只用於「重疊」的...
您好，歡迎光臨CSS甜點烘焙店 店裡已經有鎮店貓貓，今天要再邀請一位神祕嘉賓 沒錯！就是樹懶先生 Html如下 .sloth .limbs.right.fr...
一、前言 測試是前端裡面的一個重要單元，雖然說很重要，但是在一般的練習專案中，不會特別的去撰寫測試單元，自然就不會去研究相關的資料。趁這次鐵人賽的機會，來好好...
情境 有時候我們會需要隱藏網頁上的元件。 舉幾個例子來說，例如我們為了使用者體驗的目的，我們希望在某某情境下，某些按鈕不要被使用者誤觸，或是為了畫面上排版的簡潔...
一、前言 Hook 的東西不太可能用幾篇就可以全部介紹完畢，所以在這邊先列出一些使用 Hook 時可能要注意的地方，再慢慢將這些知識點給補上。在第二章節介紹...
功能實作 : Demo 一、前言 本篇主要在探討「各種 CSS 置中排版的技巧」，這些技巧主要是參考 Amos 大的「CSS垂直置中技巧，我只會23個，你...
組件實作 : Demo 一、前言 今天要來實作CSS Selectors（選擇器），選擇器的最主要用途，就是讓 CSS 可以更精準的選取到想要的元素，如果...
您好，歡迎光臨CSS甜點烘焙店 今天邀請了一位貓咪，來當鎮店店貓 Html架構如下 .cat .ear .eye .mouth .body .tail...
企鵝 transform 3D 上一篇說明了脫離文件流的概念，這時候就會想到之前任務常用到的屬性了吧：z-index這就是給那些重疊的元素重新排序的好東西，後...
情境 CSS 選擇器的分組，能夠幫助我們用更簡潔又更容易維護的寫法來達到同樣的效果。 舉個例子來說，假設我們要讓兩個元素都改變顏色，不用分組選擇器的寫法會是這樣...
一、前言 今天來談談一些比較輕鬆的話題，由於國慶日放假陪伴家人，我就沒有去研究 React 的相關用法。雖然這篇不是純技術的文章，但是應該會是一個很好的經驗談...
組件實作 : Demo 一、前言 今天要來研究一下 Flexbox 的寫法，它是一個用來排版的神器，可以很有效的處理元素水平與垂直置中對齊，本篇主要是參考...
情境 響應式設計(Responsive Web Design)可使網站在不同的裝置上瀏覽時對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和捲動等操作行為...
您好，歡迎光臨CSS甜點烘焙店 今天我們來加上幾朵飄飄雲 Html架構如下 .all .sky .cloud.left .cloud.right...
一、前言 昨日誠摯的建議（洗腦）各位學習 React 的 Class 寫法之前，可以先學習強大的 Hook，或許是一種不錯的入門方式。今天要持續的來探討 Ho...
Isha Wang
candy82202
東尼先生
Taiming
前端小小咖
iThome鐵人賽
看影片追技術