一、真實案例 聽說網頁按右鍵就可以列印了？ 但簡直就像卸了妝一樣 , 慘不忍睹啊!!! 二、那位來至邊緣地帶的Print 小明：欸 , P....? ,...
什麼是SCSS SCSS是個能用更有效率的方法來編寫CSS的程式語言語法跟CSS大同小異，但是比CSS來得好寫且更容易閱讀 SASS跟SCSS差別在那? 個人覺...
程式設計的世界有一句俗話叫做，不要重複造輪子，意思就是說，別人已經寫好了的程式，就不要再自己重複寫了，除非是想要練習，想要了解原理，讓自己將來也有機會為別人造...
這次來練習寫一個 Search Bar，要寫的樣式如下我習慣在最外層寫一個 .wrap，在繼續將裡面要完成的 HTML 先寫完所以程式碼會如下， <div...
鐵人賽 Day4 自己做一個價值幾十萬的動態網站 第四課：了解Scss與React Component與首頁概念圖與UI實作 part2 前言Day3 Gith...
鐵人賽 Day5 自己做一個價值幾十萬的動態網站 第五課：了解useState與完成在SearchBar與其介面上part1 前情提要，前兩天Day3~4我們完...
今天我們將改變 CSS 引用方式，改為使用 SASS 開發，管理我們的 CSS，因此 style tag 也可以寫 SCSS 囉！ 今天目標： 移除從 st...
鐵人賽 Day6 自己做一個價值幾十萬的動態網站 第六課：實作useState與完成在SearchBar的彈跳視窗上part2 利用useState製作彈跳視窗...
前言 SCSS 是 CSS 的預處理器，就是替原本的 CSS 再加上一些強大的語法，讓我們在寫 CSS 的時候可以更加直觀，相關說明可以查閱 官方文檔 ，本篇就...
文字跑馬燈偶爾會在一些運動品牌或是潮牌看到，裝飾效果很棒又很炫，以前也是傻傻以為要用JS寫，偵測跑完了再放下一段......但在Youtube看到這個教學影片）...
繼上次的 ESLint 後，這次要來介紹的是 StyleLint，那就廢話不多說開始吧！ StyleLint StyleLint 一個檢查 CSS Coding...
你有以下困擾嗎？ 常常不知道要怎麼命名Class嗎？（還一直去 Google 英文字的是你ㄇ ？）還是常常寫了一個Class樣式後就被另一個Class樣式給覆...
SASS / SCSS 簡介 SASS 是 CSS 的預處理器，它能編譯出原生 CSS，且提供了更多程式面的東西來撰寫 CSS，讓其更簡潔、更好維護，而 SAS...
現在網頁為了 RWD ，在 layout 的 navbar 跟 footer 都會固定，而網頁最上方都會有一個 navbar，裡面會有 logo 還有一些選項，...
終於來到第一個網頁的內容結尾，通常結尾會有一個表尾，我們俗稱 footer，用來做最後的資訊用，但我個人比較喜歡簡單的樣式，所以就來寫一簡單的 footer 吧...
昨天的第三個按鈕動態提案：文章傳送門 使用了CSS動態的動態的主菜——Animation。其實有很多特效，只要能夠拆解他的原理，就可以使用Animation達成...
今天我們要來介紹 Sass的變數啦~~介紹之前我們必須先了解為什麼我們需要它呢??當我們原先在撰寫 css的時候假設有100個地方的顏色皆為紅色但有一天我們需要...
Day 1 介紹了用CSS 偽元素的方式放大縮小變寬去做連結特效。傳送門今天也選了幾個button的特效，使用位移的方式，簡單使用CSS特性就可以。 先來看看成...
一直改來改去，你改夠了沒：SCSS 太棒了，經過了前幾章的磨練，我們終於可以寫出一個有新增與刪除功能的超簡易部落格了。既然部落格已經可以動了，那我們來調一下 C...
網站必備！連結動態 連結的Hover動態算是網頁動態最基本款，一個好的動態絕對可以幫網頁 點擊率（CTR） 加分。 (話說當時菜鳥的我根本不知道什麼是hover...
前幾天都比較專注在文字上的CSS動態，今天就來看看圖片的吧！比起一堆文字，放圖片絕對能夠說個好故事！可是一張圖片不夠說明怎麼辦？那就在使用者Hover的時候才把...
音樂網頁一定要有影音可以聽，這次來分享怎麼把 youtube 影片嵌入網頁中，預計畫面如下： 看起來好像很難，是不是要寫什麼播放語法，還是怎麼寫入影片啊...其...
一個網頁的產生，除了跟消費者介紹產品與提供資訊外，最重要的就是要提供下單服務啦!!這次要寫的樣式如下 這次要用 ul li 的清單方式來寫一個產品下單的列表，H...
分享與記錄個人使用 scss 時的那些 wow 點 在前端學習進度上，目前走到了 Javascipt，幾週前開啓 scss 時，感到有點陌生啊~~ 人的記憶不可...
今天在這個網頁內嵌入一個 map 跟寫一個 form，左邊放入地圖，右邊放入註冊資訊，會如下方所示 HTML會長這樣 <section3>...
本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。 雖...
網站中最重要的主視覺大圖，大部分會落在 header 上，今天就來寫個 header 吧!!預計會長這樣HTML 的寫法很簡單，如下方 <div cla...
Sass/Scss是一個非常好用的預處理器，所謂預處理器，就是可以在我們轉變成CSS之前，更有結構性寫、簡潔、清晰且好維護的 CSS 程式碼，在大型專案中可說是...
之前介紹過 SCSS 的基礎功能了，沒看過可以看這裡唷，這次來介紹一些小知識與進階的功能吧! SCSS 小知識 註解 SCSS 的註解有分為兩種，一種會被輸出一...
★ 首先這篇文章適合以下背景的人閱讀： 1.大概了解什麼是格線系統，甚至有用過2.有使用過 Sass 管理及撰寫 CSS，並且對基礎 Sass 語法 (SCS...
只是顆米荳
Alec
Tim Hsu
K.o
Jacky
神Q超人
Global Rachel
huli
Lai
Jasper
iThome鐵人賽
看影片追技術