iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 2392 瀏覽

鐵人賽自我挑戰組 DAY 19

如何架出github.io的個人網頁-html的30天自由式筆記系列第 19 篇

技術檔案路徑的絕對與相對？

就像地圖有絕對座標和相對座標～如果你不想以網址決定檔案的位置，要從自己所在的網頁位址當作基準點，指出檔案的方向，這也能辦到！推薦閱讀：絕對路徑和相對路徑...

IrisAndMimi ‧ 2018-11-03

3 Like 0 留言 4322 瀏覽

鐵人賽自我挑戰組 DAY 18

前端之 " wow~原來是這樣啊 " 系列第 18 篇

技術 Day18 來一個 Google Pie Chart 吧

資訊呈現中，免不了以圖表作視覺化資訊呈現，那就不能錯過好用的 Google charts 了！ Google charts 提供了一系列圖表供開發者使用，例如...

Lai ‧ 2018-11-02 ‧團隊好想工作室第二屆鐵人賽

0 Like 0 留言 4229 瀏覽

鐵人賽自我挑戰組 DAY 18

如何架出github.io的個人網頁-html的30天自由式筆記系列第 18 篇

技術 URL究竟是什麼？網址嗎？

在前一篇的超連結的語法，我們看見了href屬性。之後，這個href屬性，將會經常活躍於你的程式碼中～它的功能是用於指定超鏈接目標的URL。如果觀察大多網...

IrisAndMimi ‧ 2018-11-02

1 Like 0 留言 1110 瀏覽

鐵人賽自我挑戰組 DAY 17

前端之 " wow~原來是這樣啊 " 系列第 17 篇

技術 Day17 CSS 動畫 Animation 實作練習(下)

利用 Animation 製作美美的動畫吧上上篇我們介紹了 Animation 的相關設定，在上一篇也實作了字體模糊動畫效果，本篇來試試看經典的球球追隨運動吧...

Lai ‧ 2018-11-01 ‧團隊好想工作室第二屆鐵人賽

0 Like 0 留言 1313 瀏覽

鐵人賽自我挑戰組 DAY 16

如何架出github.io的個人網頁-html的30天自由式筆記系列第 16 篇

技術除了主頁之外，我想開其他分頁，該怎麼辦？

由於前一篇提到了和子資料夾衝突的問題，我們必須談談檔案路徑。沒想到這樣雞毛蒜皮的問題，曾經也讓菜鳥時期的我苦惱很久。首先index.html是瀏覽一個網...

IrisAndMimi ‧ 2018-10-31

1 Like 0 留言 1321 瀏覽

鐵人賽自我挑戰組 DAY 16

前端之 " wow~原來是這樣啊 " 系列第 16 篇

技術 Day16 CSS 動畫 Animation 實作練習(上）

利用 Animation 製作美美的動畫吧上一篇我們介紹了 Animation 的相關設定，Animation 有多個屬性供設定，比起 Transitions...

Lai ‧ 2018-10-31 ‧團隊好想工作室第二屆鐵人賽

2 Like 0 留言 1979 瀏覽

鐵人賽自我挑戰組 DAY 15

前端之 " wow~原來是這樣啊 " 系列第 15 篇

技術 Day15 CSS 動畫 Animation - 基礎篇

利用 keyframes (影格)來設定更細節的動畫吧！之前講解過 Transitions 的動畫效果，也實作一些範例。這一篇文章我們來講講另一個動畫實現方式...

Lai ‧ 2018-10-30 ‧團隊好想工作室第二屆鐵人賽

2 Like 0 留言 1256 瀏覽

鐵人賽自我挑戰組 DAY 14

前端之 " wow~原來是這樣啊 " 系列第 14 篇

技術 Day14 CSS3 動畫 Transitions實作練習(下）

續上上篇我們對 Transitions 的學習，我們實現幾個效果試試看吧！在上篇實作中完成了上方兩個動畫效果，本篇我們繼續實作下方兩個動畫效果吧！左下動畫...

Lai ‧ 2018-10-29 ‧團隊好想工作室第二屆鐵人賽

0 Like 0 留言 856 瀏覽

鐵人賽自我挑戰組 DAY 13

如何架出github.io的個人網頁-html的30天自由式筆記系列第 13 篇

技術自學第一階：給你快速升級的門路

在Day11和Day12的時候，我們做了一些有趣的惡整：藉由隨意嘗試和修改，是一種輕鬆卻還很初階的探索學習。雖然按照這樣的方式繼續學習會很快樂，但若是急著完...

IrisAndMimi ‧ 2018-10-28

2 Like 1 留言 1944 瀏覽

鐵人賽自我挑戰組 DAY 13

前端之 " wow~原來是這樣啊 " 系列第 13 篇

技術 Day13 CSS3 動畫 Transitions實作練習(上）

續上篇我們對 Transitions 的學習，我們實現幾個效果試試看吧！接下來我們分爲上下篇依序實作這四個效果。上篇我們先實作上方兩個動畫。在這四個效果中，...

Lai ‧ 2018-10-28 ‧團隊好想工作室第二屆鐵人賽

2 Like 0 留言 2244 瀏覽

鐵人賽自我挑戰組 DAY 12

前端之 " wow~原來是這樣啊 " 系列第 12 篇

技術 Day12 講講 CSS3 動畫 - Transitions

在網頁中設定動畫效果，可以吸引使用者目光到特定區域，也可以與使用者間有更好的互動關係，以提升使用者經驗。在 CSS3 當中有兩個主要用來實現動畫的方式，分別爲...

Lai ‧ 2018-10-27 ‧團隊好想工作室第二屆鐵人賽

0 Like 0 留言 503 瀏覽

鐵人賽自我挑戰組 DAY 12

如何架出github.io的個人網頁-html的30天自由式筆記系列第 12 篇

技術暖身活動：來惡搞Google(下)

假設你想要知道Google搜尋的按鈕，只求它那一段的原始碼，可以在它的位置上點擊右鍵，選擇檢測元素，並不需要檢測原始碼自虐。這時候是不是看見兩個地方跟它的...

IrisAndMimi ‧ 2018-10-27

0 Like 0 留言 649 瀏覽

鐵人賽自我挑戰組 DAY 11

如何架出github.io的個人網頁-html的30天自由式筆記系列第 11 篇

技術暖身活動：來惡搞Google(上)

將來的你可能會想藉由別人的網頁，參考學習各個網頁中元素的使用方式，快快獲得EXP、迅速升等成為大大，彷彿開掛偷用金手指。但是一打開落落長的原始碼，才發現自己在...

IrisAndMimi ‧ 2018-10-26

1 Like 0 留言 1708 瀏覽

鐵人賽自我挑戰組 DAY 11

前端之 " wow~原來是這樣啊 " 系列第 11 篇

技術 Day 11 CSS position之想去哪就去哪

瞭解 position 設定，讓網頁元素想去哪裡就去哪裡在網頁排版設計中，並不是所有元素都會依照水平及垂直的一定流向排列，有時其中一個元素需偏向某一個方向，或...

Lai ‧ 2018-10-26 ‧團隊好想工作室第二屆鐵人賽

1 Like 0 留言 1451 瀏覽

鐵人賽自我挑戰組 DAY 10

前端之 " wow~原來是這樣啊 " 系列第 10 篇

技術 Day10 讓圖片好好裝在盒子裡

在網頁中常常會需要各式各樣的圖片，如何讓它按照你的想像，好好呈現在網頁上呢？讓圖片呈現在網頁上，一般我們會想到使用 img 標籤。我們先試試看最單純的一張圖片...

Lai ‧ 2018-10-25 ‧團隊好想工作室第二屆鐵人賽

1 Like 1 留言 2017 瀏覽

鐵人賽自我挑戰組 DAY 9

前端之 " wow~原來是這樣啊 " 系列第 9 篇

技術 Day9 來試試看僞元素吧(before/after)

利用僞元素爲你的頁面在添加點東西吧初接觸僞元素時，覺得有點不直覺，但後續發現它真的滿好用的，很值得好好瞭解它。那麼~什麼是僞元素呢？其中的 " 僞...

Lai ‧ 2018-10-24 ‧團隊好想工作室第二屆鐵人賽

0 Like 0 留言 1288 瀏覽

鐵人賽影片教學 DAY 11

智慧雲端物聯 - 關鍵輕專業（AIoT Cloud - Essential Shallow Expertise）系列第 13 篇

技術 Web前端基礎 (1/2)

[Day 11] Web前端基礎 2.0：有趣的前端技術 (10min) 2.1：HTML (22min + 15min) -- HTML URL Enco...

drm ‧ 2018-10-24

2 Like 0 留言 2140 瀏覽

鐵人賽自我挑戰組 DAY 8

前端之 " wow~原來是這樣啊 " 系列第 8 篇

技術 Day8 如何設定 CSS 陰影效果呢？

陰影在很多版型中都會出現，那麼它到底如何設定的呢？陰影可以讓畫面上的靜態元素看起來更立體，或是也能利用陰影增加與使用者之間的互動性。首先我們來看看它可以被設定...

Lai ‧ 2018-10-23 ‧團隊好想工作室第二屆鐵人賽

0 Like 0 留言 1700 瀏覽

鐵人賽自我挑戰組 DAY 8

如何架出github.io的個人網頁-html的30天自由式筆記系列第 8 篇

技術線上編輯器的介紹

W3School TIY 如果你已經養成了自學的習慣，一定不會不知道w3schools這個廣泛而詳細的教學網。這裡是我最早發現並使用的線上測試器；它原本的...

IrisAndMimi ‧ 2018-10-23

5 Like 1 留言 7610 瀏覽

鐵人賽自我挑戰組 DAY 7

前端之 " wow~原來是這樣啊 " 系列第 7 篇

技術 Day7 利用純 HTML / CSS 來一個好吃的手作漢堡

考慮 RWD 網站中，一定要來一個美味的漢堡！第一次聽到前輩跟我說可以在手機面板時考慮把選單切成漢堡，我心裡真的只有那好吃香香的漢堡啊~就是這個啊~ 所以~...

Lai ‧ 2018-10-22 ‧團隊好想工作室第二屆鐵人賽

1 Like 0 留言 4272 瀏覽

鐵人賽自我挑戰組 DAY 6

如何架出github.io的個人網頁-html的30天自由式筆記系列第 6 篇

技術如何建立一個html檔(for Mac)

給Mac的教學：蘋果的設計適合工程師寫程式，但是卻有一點難度，其實並不適合給初學者使用(尤其是那些剛從Windows跳槽，還沒適應Mac系統的夥伴們)。後來...

IrisAndMimi ‧ 2018-10-21

4 Like 0 留言 21837 瀏覽

鐵人賽自我挑戰組 DAY 6

前端之 " wow~原來是這樣啊 " 系列第 6 篇

技術 Day6 如何做出響應式網頁(RWD)？

常常聽到響應式網頁，但是怎麼做呢？響應式設計(Responsive web design)指的是使網頁內容在不同裝置下，都可以呈現出適切的內容。在說明如何設定...

Lai ‧ 2018-10-21 ‧團隊好想工作室第二屆鐵人賽

0 Like 0 留言 3318 瀏覽

鐵人賽自我挑戰組 DAY 5

如何架出github.io的個人網頁-html的30天自由式筆記系列第 5 篇

技術如何建立一個html檔(for Windows)

建議先將檔案的副檔名顯示出來。以下提供了Win7和Win10顯示副檔名的教學(其他版本還請自行搜尋)：這是Windows7版本的方法── https://...

IrisAndMimi ‧ 2018-10-20

3 Like 0 留言 6364 瀏覽

鐵人賽自我挑戰組 DAY 5

前端之 " wow~原來是這樣啊 " 系列第 5 篇

技術 Day5 來切一個一定會有的 header 吧

打開每一個網頁，百分之 99.999999999 一定會有 header ，那我們就來切一個吧! 在切版的學習過程中，就是一直找東西來切，切久了就會從各種狀況中...

Lai ‧ 2018-10-20 ‧團隊好想工作室第二屆鐵人賽

5 Like 0 留言 4061 瀏覽

鐵人賽影片教學 DAY 4

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 4 篇

技術金魚都能懂網頁設計入門 : 再談HTML -鐵人賽第四天

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧標籤屬性是甚麼 HTML標籤因為用途的關係，每個標籤本都可能帶有不同...

CSScoke ‧ 2018-10-19 ‧團隊阿莫斯の推坑教

0 Like 0 留言 1162 瀏覽

鐵人賽 Software Development DAY 18

Emacs 來寫程式系列第 18 篇

技術 [Emacs-18] 用 Emacs 寫一個 Landing Page

用一個 Landing Page 來介紹 Emacs 功能我們簡單用一個首頁來介紹 Emacs 的相關功能，完成後的網頁建立 index.html 用 E...

洋蔥 ‧ 2018-10-19

1 Like 0 留言 2169 瀏覽

鐵人賽 Modern Web DAY 3

認真學前端開發 - 以 TodoList 為例系列第 3 篇

技術 Day03 - 瀏覽器如何解讀網頁

想在分析研究 javascript code 之前想來探討一下這個網頁是如何被瀏覽器讀取的，這樣以後寫網站才能把網頁寫的更好，速度更快網頁的讀取順序當瀏覽...

傑瑞林 ‧ 2018-10-18 ‧團隊開橋找井

0 Like 0 留言 1240 瀏覽

鐵人賽 Software Development DAY 17

Emacs 來寫程式系列第 17 篇

技術 [Emacs-17] 用 Emacs 來寫 HTML, CSS 設定篇

Emacs 對於編輯 html/css 的功能 html 程式自動補全: 使用 web-mode 的 Company-web 語法檢查: 使用 Tidy 為...

洋蔥 ‧ 2018-10-18

0 Like 0 留言 1904 瀏覽

鐵人賽 Modern Web DAY 2

認真學前端開發 - 以 TodoList 為例系列第 2 篇

技術 Day02 - 用簡單的 TodoList 拉開序幕

前言假設今天學校或者工作要做的第一個互動式網站是待辦清單的話，你會怎麼做。如果都毫無頭緒 html, css, javascript 是什麼都不會，要怎樣刻出...

傑瑞林 ‧ 2018-10-17 ‧團隊開橋找井

3 Like 3 留言 6865 瀏覽

鐵人賽自我挑戰組 DAY 1

前端之 " wow~原來是這樣啊 " 系列第 1 篇

技術 Day1 如何開始前端之路

抉擇從來不難，難在下定決心執行開始之前，說說自己踏入前端可能從來不在以前的自己想像中，也不會是長期規劃後的結果。大約兩個半月前，我還在前公司擔任 IE 工程...

Lai ‧ 2018-10-16 ‧團隊好想工作室第二屆鐵人賽

技術 檔案路徑的絕對與相對？