一、真實案例 聽說網頁按右鍵就可以列印了? 但簡直就像卸了妝一樣 , 慘不忍睹啊!!! 二、那位來至邊緣地帶的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製作彈跳視窗...
文字跑馬燈偶爾會在一些運動品牌或是潮牌看到,裝飾效果很棒又很炫,以前也是傻傻以為要用JS寫,偵測跑完了再放下一段......但在Youtube看到這個教學影片)...
前言 SCSS 是 CSS 的預處理器,就是替原本的 CSS 再加上一些強大的語法,讓我們在寫 CSS 的時候可以更加直觀,相關說明可以查閱 官方文檔 ,本篇就...
繼上次的 ESLint 後,這次要來介紹的是 StyleLint,那就廢話不多說開始吧! StyleLint StyleLint 一個檢查 CSS Coding...
你有以下困擾嗎? 常常不知道要怎麼命名Class嗎?(還一直去 Google 英文字的是你ㄇ ?)還是常常寫了一個Class樣式後就被另一個Class樣式給覆...
SASS / SCSS 簡介 SASS 是 CSS 的預處理器,它能編譯出原生 CSS,且提供了更多程式面的東西來撰寫 CSS,讓其更簡潔、更好維護,而 SAS...
昨天的第三個按鈕動態提案:文章傳送門 使用了CSS動態的動態的主菜——Animation。其實有很多特效,只要能夠拆解他的原理,就可以使用Animation達成...
Day 1 介紹了用CSS 偽元素的方式放大縮小變寬去做連結特效。傳送門今天也選了幾個button的特效,使用位移的方式,簡單使用CSS特性就可以。 先來看看成...
現在網頁為了 RWD ,在 layout 的 navbar 跟 footer 都會固定,而網頁最上方都會有一個 navbar,裡面會有 logo 還有一些選項,...
今天我們要來介紹 Sass的變數啦~~介紹之前我們必須先了解為什麼我們需要它呢??當我們原先在撰寫 css的時候假設有100個地方的顏色皆為紅色但有一天我們需要...
終於來到第一個網頁的內容結尾,通常結尾會有一個表尾,我們俗稱 footer,用來做最後的資訊用,但我個人比較喜歡簡單的樣式,所以就來寫一簡單的 footer 吧...
網站必備!連結動態 連結的Hover動態算是網頁動態最基本款,一個好的動態絕對可以幫網頁 點擊率(CTR) 加分。 (話說當時菜鳥的我根本不知道什麼是hover...
一直改來改去,你改夠了沒:SCSS 太棒了,經過了前幾章的磨練,我們終於可以寫出一個有新增與刪除功能的超簡易部落格了。既然部落格已經可以動了,那我們來調一下 C...
前幾天都比較專注在文字上的CSS動態,今天就來看看圖片的吧!比起一堆文字,放圖片絕對能夠說個好故事!可是一張圖片不夠說明怎麼辦?那就在使用者Hover的時候才把...
音樂網頁一定要有影音可以聽,這次來分享怎麼把 youtube 影片嵌入網頁中,預計畫面如下: 看起來好像很難,是不是要寫什麼播放語法,還是怎麼寫入影片啊...其...
一個網頁的產生,除了跟消費者介紹產品與提供資訊外,最重要的就是要提供下單服務啦!!這次要寫的樣式如下 這次要用 ul li 的清單方式來寫一個產品下單的列表,H...
本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 雖...
分享與記錄個人使用 scss 時的那些 wow 點 在前端學習進度上,目前走到了 Javascipt,幾週前開啓 scss 時,感到有點陌生啊~~ 人的記憶不可...
今天在這個網頁內嵌入一個 map 跟寫一個 form,左邊放入地圖,右邊放入註冊資訊,會如下方所示 HTML會長這樣 <section3>...
網站中最重要的主視覺大圖,大部分會落在 header 上,今天就來寫個 header 吧!!預計會長這樣HTML 的寫法很簡單,如下方 <div cla...
常常看到有些網站的漢堡選單用換圖的方式從 三 --> X會覺得有點可惜,其實漢堡選單的動態一樣CSS 就可以搞定!說不定會因為動得太可愛,讓大家一直點 (...
在鐵人賽正式開始之前,想先寫一下SCSS。因為我的CSS全部都是SCSS寫的...怕大家看不懂馬上棄看 QQ這一篇是簡易的SCSS小抄說明,主要針對文章中出現S...
Sass/Scss是一個非常好用的預處理器,所謂預處理器,就是可以在我們轉變成CSS之前,更有結構性寫、簡潔、清晰且好維護的 CSS 程式碼,在大型專案中可說是...