就像地圖有絕對座標和相對座標~ 如果你不想以網址決定檔案的位置,要從自己所在的網頁位址當作基準點,指出檔案的方向,這也能辦到! 推薦閱讀:絕對路徑和相對路徑...
資訊呈現中,免不了以圖表作視覺化資訊呈現,那就不能錯過好用的 Google charts 了! Google charts 提供了一系列圖表供開發者使用,例如...
在前一篇的超連結的語法,我們看見了href屬性。 之後,這個href屬性,將會經常活躍於你的程式碼中~ 它的功能是用於指定超鏈接目標的URL。 如果觀察大多網...
利用 Animation 製作美美的動畫吧 上上篇我們介紹了 Animation 的相關設定,在上一篇也實作了字體模糊動畫效果,本篇來試試看經典的球球追隨運動吧...
由於前一篇提到了和子資料夾衝突的問題,我們必須談談檔案路徑。 沒想到這樣雞毛蒜皮的問題,曾經也讓菜鳥時期的我苦惱很久。 首先index.html是瀏覽一個網...
利用 Animation 製作美美的動畫吧 上一篇我們介紹了 Animation 的相關設定,Animation 有多個屬性供設定,比起 Transitions...
利用 keyframes (影格)來設定更細節的動畫吧! 之前講解過 Transitions 的動畫效果,也實作一些範例。這一篇文章我們來講講另一個動畫實現方式...
續上上篇我們對 Transitions 的學習,我們實現幾個效果試試看吧! 在上篇實作中完成了上方兩個動畫效果,本篇我們繼續實作下方兩個動畫效果吧! 左下動畫...
在Day11和Day12的時候,我們做了一些有趣的惡整: 藉由隨意嘗試和修改,是一種輕鬆卻還很初階的探索學習。 雖然按照這樣的方式繼續學習會很快樂,但若是急著完...
續上篇我們對 Transitions 的學習,我們實現幾個效果試試看吧! 接下來我們分爲上下篇依序實作這四個效果。上篇我們先實作上方兩個動畫。在這四個效果中,...
在網頁中設定動畫效果,可以吸引使用者目光到特定區域,也可以與使用者間有更好的互動關係,以提升使用者經驗。 在 CSS3 當中有兩個主要用來實現動畫的方式,分別爲...
假設你想要知道Google搜尋的按鈕,只求它那一段的原始碼,可以在它的位置上點擊右鍵,選擇檢測元素,並不需要檢測原始碼自虐。 這時候是不是看見兩個地方跟它的...
將來的你可能會想藉由別人的網頁,參考學習各個網頁中元素的使用方式,快快獲得EXP、迅速升等成為大大,彷彿開掛偷用金手指。 但是一打開落落長的原始碼,才發現自己在...
瞭解 position 設定,讓網頁元素想去哪裡就去哪裡 在網頁排版設計中,並不是所有元素都會依照水平及垂直的一定流向排列,有時其中一個元素需偏向某一個方向,或...
在網頁中常常會需要各式各樣的圖片,如何讓它按照你的想像,好好呈現在網頁上呢? 讓圖片呈現在網頁上,一般我們會想到使用 img 標籤。我們先試試看最單純的一張圖片...
利用僞元素爲你的頁面在添加點東西吧 初接觸僞元素時,覺得有點不直覺,但後續發現它真的滿好用的,很值得好好瞭解它。那麼~什麼是僞元素呢?其中的 " 僞...
[Day 11] Web前端基礎 2.0:有趣的前端技術 (10min) 2.1:HTML (22min + 15min) -- HTML URL Enco...
陰影在很多版型中都會出現,那麼它到底如何設定的呢? 陰影可以讓畫面上的靜態元素看起來更立體,或是也能利用陰影增加與使用者之間的互動性。首先我們來看看它可以被設定...
W3School TIY 如果你已經養成了自學的習慣,一定不會不知道w3schools這個廣泛而詳細的教學網。 這裡是我最早發現並使用的線上測試器;它原本的...
考慮 RWD 網站中,一定要來一個美味的漢堡! 第一次聽到前輩跟我說可以在手機面板時考慮把選單切成漢堡,我心裡真的只有那好吃香香的漢堡啊~就是這個啊~ 所以~...
給Mac的教學: 蘋果的設計適合工程師寫程式,但是卻有一點難度,其實並不適合給初學者使用(尤其是那些剛從Windows跳槽,還沒適應Mac系統的夥伴們)。 後來...
常常聽到響應式網頁,但是怎麼做呢? 響應式設計(Responsive web design)指的是使網頁內容在不同裝置下,都可以呈現出適切的內容。在說明如何設定...
建議先將檔案的副檔名顯示出來。 以下提供了Win7和Win10顯示副檔名的教學(其他版本還請自行搜尋): 這是Windows7版本的方法── https://...
打開每一個網頁,百分之 99.999999999 一定會有 header ,那我們就來切一個吧! 在切版的學習過程中,就是一直找東西來切,切久了就會從各種狀況中...
教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 標籤屬性是甚麼 HTML標籤因為用途的關係,每個標籤本都可能帶有不同...
用一個 Landing Page 來介紹 Emacs 功能 我們簡單用一個首頁來介紹 Emacs 的相關功能,完成後的網頁 建立 index.html 用 E...
想在分析研究 javascript code 之前想來探討一下這個網頁是如何被瀏覽器讀取的,這樣以後寫網站才能把網頁寫的更好,速度更快 網頁的讀取順序 當瀏覽...
Emacs 對於編輯 html/css 的功能 html 程式自動補全: 使用 web-mode 的 Company-web 語法檢查: 使用 Tidy 為...
前言 假設今天學校或者工作要做的第一個互動式網站是待辦清單的話,你會怎麼做。如果都毫無頭緒 html, css, javascript 是什麼都不會,要怎樣刻出...
抉擇從來不難,難在下定決心執行 開始之前,說說自己 踏入前端可能從來不在以前的自己想像中,也不會是長期規劃後的結果。大約兩個半月前,我還在前公司擔任 IE 工程...