iT邦幫忙

html相關文章
共有 441 則文章
鐵人賽 自我挑戰組 DAY 19

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

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

鐵人賽 自我挑戰組 DAY 18

技術 Day18 來一個 Google Pie Chart 吧

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

鐵人賽 自我挑戰組 DAY 18

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

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

鐵人賽 自我挑戰組 DAY 17

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

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

鐵人賽 自我挑戰組 DAY 16

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

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

鐵人賽 自我挑戰組 DAY 16

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

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

鐵人賽 自我挑戰組 DAY 15

技術 Day15 CSS 動畫 Animation - 基礎篇

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

鐵人賽 自我挑戰組 DAY 14

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

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

鐵人賽 自我挑戰組 DAY 13

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

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

鐵人賽 自我挑戰組 DAY 13

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

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

鐵人賽 自我挑戰組 DAY 12

技術 Day12 講講 CSS3 動畫 - Transitions

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

鐵人賽 自我挑戰組 DAY 12

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

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

鐵人賽 自我挑戰組 DAY 11

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

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

鐵人賽 自我挑戰組 DAY 11

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

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

鐵人賽 自我挑戰組 DAY 10

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

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

鐵人賽 自我挑戰組 DAY 9

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

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

鐵人賽 影片教學 DAY 11

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

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

鐵人賽 自我挑戰組 DAY 8

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

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

鐵人賽 自我挑戰組 DAY 8

技術 線上編輯器的介紹

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

鐵人賽 自我挑戰組 DAY 7

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

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

鐵人賽 自我挑戰組 DAY 6

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

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

鐵人賽 自我挑戰組 DAY 6

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

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

鐵人賽 自我挑戰組 DAY 5

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

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

鐵人賽 自我挑戰組 DAY 5

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

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

鐵人賽 影片教學 DAY 4

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

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

鐵人賽 Software Development DAY 18
Emacs 來寫程式 系列 第 18

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Software Development DAY 17
Emacs 來寫程式 系列 第 17

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

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

鐵人賽 Modern Web DAY 2

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

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

鐵人賽 自我挑戰組 DAY 1

技術 Day1 如何開始前端之路

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