iT邦幫忙

html相關文章
共有 269 則文章

技術 【javascript+php】【紀錄】寫php的時候需要傳值給javascript該怎麼辦--遇到問題的解決方式

這是第一次在這裡發文,這是一篇記錄自己在寫php的時候遇到的問題紀錄與找到的解決方法。 遇到的問題:按下按鈕之後要呼叫寫在同一頁的Javascript func...

鐵人賽 自我挑戰組 DAY 29

技術 CSS的Class和id到底誰比較大牌?(原始碼比對版)

相較於前一篇用文字記憶法,這篇則是用原始碼做為比較,詳細列出一眼辯英雄的矛盾大對決! 從第5項實驗,我們成功證明了id確實強過class的效果! 但是這時我突...

鐵人賽 自我挑戰組 DAY 27

技術 連我都沒看過的特殊字符編碼

或許你可能曾在FB或是Dcard的留言板上,看過諸如此類的奇怪文字: 因為大家都不知道怎麼辦到的,所以紛紛複製貼上,演變成大量洗版的詭異流行。 現在就來介...

鐵人賽 自我挑戰組 DAY 27
開源組織生態觀察筆記 系列 第 27

技術 [Day27] 網頁教學開源社群 --- freeCodeCamp

想轉職當網頁工程師,你有聽過 freeCodeCamp 嗎? 轉職寫網頁? 每當朋友說想要轉職當工程師,我都會推薦直接去寫網頁,因為資源豐富啊!而且市場需求...

技術 15分鐘,教你用Python爬網站數據,並用BI視覺化分析!

作為一名在資料行業打拚了兩年多的資料分析師,雖然目前收入還算ok,但每每想起房價,男兒三十還未立,內心就不免彷徨不已~ 兩年時間裡曾經換過一份工作,一直都是從事...

鐵人賽 自我挑戰組 DAY 25

技術 打不出特殊的符號?

就在寫前一篇範例的時候,突然想起了這項也很重要的問題: 當我想在內容編寫程式碼的語法時,導致網頁誤以為那也是一段要執行的語法,該怎麼辦? 這時就需要請出HTM...

鐵人賽 自我挑戰組 DAY 24

技術 網頁的皮膚──CSS階層式樣式表

如果HTML是人,那CSS就決定了他的髮膚顏色,而JS則是這個人的行為。 其中,HTML負責確定網頁中有哪些內容。 CSS確定如何展現元素的外觀(比如:大小、...

鐵人賽 自我挑戰組 DAY 21

技術 Day21 實作一個簡單的 Todolist (上)

第一個入門 JS 的實作學習目標 身爲 JS 剛入門的新手,把做出第一個 Todolist 當作第一個實作學習目標。一開始還不確定能利用哪些語法做出 Todol...

鐵人賽 自我挑戰組 DAY 20

技術 斜槓與反斜槓

這是接續了前一篇推薦的教學網址,對其談到的斜槓稍作內容延伸。 這個符號 「/」就是斜槓,呈現上右下左。 而 「\」是反斜槓,呈現上左下右。 斜線的方向,有時...

鐵人賽 自我挑戰組 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:有趣的前端技術 2.1:HTML -- HTML URL Encode (網址編碼) -- Default En...

鐵人賽 自我挑戰組 DAY 8

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

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

鐵人賽 自我挑戰組 DAY 8

技術 線上編輯器的介紹

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

鐵人賽 自我挑戰組 DAY 7

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

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

鐵人賽 自我挑戰組 DAY 6

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

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