今天要來做的主題還蠻有趣滴~ 如圖中所示,我們的目標水量是要把整個大杯子填滿(2L),點選下方的小杯子(250ml),可以把水加入大杯子中,並且顯示目前水量以...
CSS顏色標示器 顏色(color) 關於色彩,讓我想起電視機收播時的畫面,在昏暗的客廳之中,唯一的光源僅來自於厚重的映像管螢幕,紅黃藍綠的色塊打在爺爺的臉上...
說時遲,那時快,身後傳來咯噔咯噔的腳步聲,我一回頭不見人影,暗自低喃:「奇也怪哉!」,瞥向一旁卻見一雙紅靴子一起一落,從我身邊走過...那是何人? 今天我們來實...
您好,歡迎光臨CSS甜點烘焙店 今天上架的是銅鑼燒 銅鑼燒主要分成3個部份,上層麵皮、中層紅豆餡、下層麵皮,看似這麼多層的層次,其實只要2層架構就可以完成喔~不...
一、前言 從不會寫文章,到開始經營 Blog 這個過程,經歷了一些波折,從最早「無名小站」(時代的眼淚)開始經營第一個 Blog 到租借虛擬主機架設 Word...
組件實作 : Demo 一、前言 slideshow 幻燈片組件可以為網頁帶來動態的效果,與使用者產生互動,我們用 6 張圖片組成一個輪播視窗。你除了可以...
今天我們來認識六個符號,可以讓你的選取器有更多變化,以下是,/空格/ + / * / ~的說明: 逗號 想成[或]的意思 換言之是可以有多個元素選取器一起編輯,...
本篇文章將提到怎麼透過 BEM、SMACSS、OOCSS、Atomic CSS 的特性來: 縮短開發時間 減少需維護的程式碼 結構與樣式 CSS 選擇器和規...
情境 如下圖,網站中有這樣一塊又一塊的圖形設計,稱之為「卡片」。近年來 卡片式設計 在網站上越來越常見。 矩形的卡片設計能夠順利的與不同視窗大小做搭配,因此無論...
今天要來做的賽project叫「爸爸的冷笑話」,需要對API有基本的認識,因為這篇要串接外部API來取得冷笑話集,並使用postman來進行測試,若要下載po...
我們先來看一張圖,了解一下css的基本寫法: 在大括號左邊的selector是指在頁面上,找到符合選取器的元素,這邊是h1標籤,找到後就套用大括號裡所寫的cs...
咖啡店菜單 樣式 (style) 階層樣式表 (Cascading Stylesheets;CSS)可以讓你在HTML文件中的元素上套用不同的頁面樣式(sty...
Watch me whip(whip), watch me Nae Nae ~ 早上起來洗臉刷牙,戴上手錶錢包鑰匙手機,出門去玩囉~今天我們來實作Day #10...
一、前言 你是不是曾經有過一種經驗,就是當你努力的讀書,努力的學習,網路上查了一堆資料,也寫了一堆筆記,記在腦袋裡面的東西過了幾天之後就全部遺忘,彷彿不存在過...
一、前言 在製作網頁時,我們會需要一些文字或是圖片來裝飾我們的頁面,這些資料可能來自設計師或是後端工程師。但是我們在前端製作頁面時,沒有這些文字與圖片資源時該...
間距、間距、間距! 情境 在討論今天的主題之前,我們先來看看下面這張圖: 第一張圖的情境,有可能是在介面上我們試圖要做一些不可逆的操作,例如你要去刪除某篇文章...
您好,歡迎光臨CSS甜點烘焙店 今天上架的是貝果 主要分成2部份,麵包體和上方的黑白芝麻Html架構如下: .bagel .black-sesame .wh...
CSS 層疊樣式表 CSS (Cascading Style Sheets) 層疊樣式表,不像 HTML 一樣是標記語言,也不是標準的程式語言,但在 SCSS、...
今天要做的是鍵盤代碼轉換器,隨著鍵盤的輸入值不一樣,會動態顯示它的code、key、keyCode這些資訊,相信大家可能在學javaScript的過程中也會用過...
Hello, Gang! It's Thibe! 雖然今天天氣很好,但在寂寞雨夜的時候,還是有Thibe的文章陪著你的,我們就來實作Day #9吧~ Rainy...
一、 前言 有時候覺得自己明明很努力做事,可是總是覺得好像事情一直都無法在規劃的時間內完成。發現自己在訂定目標時,除了會加入一堆多餘的步驟,以及使用了錯誤的方...
組件實作 : Demo 一、前言 Navbar 導覽列是每個網站幾乎都會有的組件之一,就是網頁最上面的那一條橫幅,Navbar 的實作上,我們專注在兩個重...
在寫CSS的時候,我們有不同的撰寫方式比如行內套用以及嵌入套用(更多套用的說明請看這:https://ithelp.ithome.com.tw/articles...
今天是擊敗前端面試大作戰正文的第一篇!我們就先來點輕鬆的吧,今天會討論文章的寫作方式會是以面試問答為主,歡迎讀者先把回答遮住試著答看看,再看回答!。 這一篇文...
相信每個人的童年都有一個幾何積木玩具,今天我們就是要重返童年,一起用 Canvas 完成一些常用的幾何圖形! 準備好畫布 剛開始就先不用框架,以 Vanilla...
您好,歡迎光臨CSS甜點烘焙店 今天上架的是巧克力切片蛋糕 蛋糕主要分成3個部份,上層巧克力、下層蛋糕體,以及巧克力上方的奶油Html結構如下: .chocol...
情境 今天我們來討論一個常見的設計,標題與圖示。下面這是一張很常見的卡片式設計,看起來很正常不是嗎? 我們在生活當中很常遇到類似這樣的設計,就是在一個卡片式的...
今天要來做聲音操控版,點按圖中的每個按鈕,就會播放音檔,而當我同時又點了別的按鈕,就會暫停原本的音檔,播放別的音檔,蠻有趣的 ヽ(✿゚▽゚)ノ 程式碼其實不...
背景脈絡 在社群看到好多前輩於iT參加鐵人賽的通知,來到鐵人賽首頁上面寫著「9/16最後開賽日,別忘了開賽喔!」,於是在今天決定要開賽後發現...要先報名,可報...