iT邦幫忙

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

技術 Day 16 Side Project : Theme Clock 動態時鐘(上)

今天我們要來做動態時鐘 ♪(^∇^*),搭配上背景的黑白兩色切換,因篇幅較長(ㄟ看到這就不想看了),會分成「上」、「下」兩篇來講解 功能拆解 時針每一小...

鐵人賽 影片教學 DAY 7

技術 Day07【從麻瓜變成前端魔法師】HTML 表單 form (下集)

接續上集附上連結 Day05【從麻瓜變成前端魔法師】HTML 表單 form (上集) 、Day06【從麻瓜變成前端魔法師】HTML 表單 form (中集)...

鐵人賽 自我挑戰組 DAY 15

技術 [Day 15] Bicyclopter: 腳踏車還是直升機? 我要腳踏直升機!

事情是發生在Thibe高中的時候,當時放學時間緊迫,我急著回家打LOL,就在我加速騎著Ubike,頭上剛好飛過一台直升機,我心裡想:「要是能搭直升機就好了!」這...

鐵人賽 自我挑戰組 DAY 8

技術 Day 08:臺灣郵遞區號

組件實作 : Demo 一、前言 當我們在填寫表單資料的時候,有時候會帶入一些郵遞區號的資料,這些資料要一個個去建立,可能需要花滿多時間,這時候我們就可以...

鐵人賽 Modern Web DAY 9

技術 Day 09:Form 組件實作

組件實作 : Demo 一、前言 Form 表單組件主要出現在需要取得使用者的資訊,比如商品訂單、問卷填寫、選擇操作等等各種需要使用者輸入資料的行為,都可...

鐵人賽 Modern Web DAY 8

技術 Day 08:RWD 響應式排版實作

組件實作 : Demo 一、前言 在行動裝置當道的時代,網頁的版面也隨著手機出現而有所改變,為了符合各種裝置較好的閱讀體驗,RWD 技術【1】也隨之誕生。...

鐵人賽 自我挑戰組 DAY 7

技術 Day 7 CSS 基本認識

前言 前面HTML的網頁架構的地方已經建立好了,那當然就是開始要想辦法讓網頁看起來美美的啦~ 這時候使用CSS來統一定義每個HTML標籤的位置大小,讓網站的風格...

鐵人賽 自我挑戰組 DAY 14

技術 [Day 14] User Gallery: 來曬一下你的相片集!

大家出門去玩的時候,多少會拍下一些相片,其中有些特別值得紀念的相片,這時候就可以考慮製作個自己的相片集來呈現~今天我們來實作Day #13 User Galle...

鐵人賽 影片教學 DAY 6

技術 Day06【從麻瓜變成前端魔法師】HTML 表單 form (中集)

接續上集 附上連結 Day05【從麻瓜變成前端魔法師】HTML 表單 form (上集) 我們來練習做下圖這樣的表單: 因為是 【每天5分鐘】學前端 的影片...

鐵人賽 自我挑戰組 DAY 7

技術 Day 07:色彩的基本入門

一、前言 在寫網頁時,除了命名規則、排版會讓我們感到困擾之外,顏色搭配也是我們會感到糾結的一部分。配色是一種直觀的感受,所以要掌握它並不是那麼的容易,接下來我...

鐵人賽 Modern Web DAY 7

技術 Day 07:Card 組件實作

組件實作 : Demo 一、前言 Card 組件通常會出現在像是購物網站的商品資訊,或是影片追劇等電影介紹中,其實只要是文字加上圖片的一個群組,都可以是一...

鐵人賽 Software Development DAY 6
React框架白話文運動 系列 第 6

技術 React白話文運動06-React運作原理

前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...

鐵人賽 Modern Web DAY 9

技術 Day9 - 養分 (Selectors,link)

營養標示 選擇器 (Selectors) 順著黃光燈泡看向餐桌上的保健品與藥罐,玲瑯滿目就像是黃昏時都市中的大樓,參差不齊的排列總是很難一眼看見要挑選的目標,...

鐵人賽 Modern Web DAY 10
手把手web初學者 系列 第 10

技術 用CSS把這些Box定位

Position HTML先設定出3個BoxBox的顏色分別為:box1 box2 box3 div.container{ width: 500px;...

鐵人賽 自我挑戰組 DAY 6

技術 Day6 HTML 終於來到最後一個Part啦!

前言 花了前五天的時間,把HTML的結構還有許多標籤等等的都嘗試解釋完畢。 *之前沒有說明到檔案名稱為什麼設定是「 index.html 」,這邊補上: 檔案...

鐵人賽 Modern Web DAY 6

技術 Day6 - 練習成就完美 (head,body)

調查問券 練習(practice) 兩個警察大哥站在門外等著,「來了來了」,看來是最近附近發生了小偷行竊的事件,這附近的路燈總是昏昏暗暗的,我像他們簡單說明了...

鐵人賽 自我挑戰組 DAY 13

技術 [Day 13] Tooltip: 引經據典 製作自己的小圖釘

在我們成長過程中,多多少少看過一些名言佳句,總有幾句特別地打動自己的內心,也許其中有些文字是不太熟悉,這時候就可以用小圖釘把他的意思給記錄下來~ 今天我們來實作...

鐵人賽 Modern Web DAY 9
手把手web初學者 系列 第 9

技術 與切版相遇的這天,用CSS把HTML切一切打包進Box中

所有的HTML的元件都是一箱箱的箱子(Box) 今天來到網頁很重要的一部分是Box Modle Box Model 主要由四個部分組成由內而外分別是 :...

鐵人賽 影片教學 DAY 5

技術 Day05【從麻瓜變成前端魔法師】HTML 表單 form (上集)

★ 註: <label> for 和 <input> id 值設定 一樣 就能夠 綁定 ,不要真的打上星星符號啊~囧 我們來練習做下圖...

鐵人賽 Software Development DAY 5
台南不需要米其林 系列 第 5

技術 Day05 美食地圖首頁

前言 工欲善其事,必先利其器。花費一番心力,將環境與開發模式都弄好後,可以心無旁騖開始建立首頁,今天會一口氣畫好首頁的版面。 概念說明 Django的設計理...

鐵人賽 自我挑戰組 DAY 14

技術 Day 14 Side Project : Incrementing Counter 遞增計數器

今天要來做的是動態計數效果,隨著固定的時間遞增固定的數字上去,因為時間設得很短,所以視覺上看起來像是連續的,如圖中那樣! 事前準備 引入 fontAwes...

鐵人賽 Modern Web DAY 4

技術 第 4 幅 - 風格文字:致敬時代的眼淚「文字藝術師」

昨天畫完畫,今天來看看如何用 Canvas 寫出文字吧!不知道大家對 Word 的文字藝術師有沒有印象?以前超多海報和宣傳單上都會出現文字藝術師做出來的經典風格...

鐵人賽 Modern Web DAY 5

技術 Day5 - 問候 (form)

註冊表單 表單 (form) 「不好意思,麻煩您填寫一下這份表單。」在艷陽下專程來訪的社會局妹妹,就算戴著厚重的粗框眼鏡與淡妝,也遮掩不了精緻的五官。我在門口與...

鐵人賽 影片教學 DAY 4

技術 Day04【從麻瓜變成前端魔法師】HTML 表格 table

今天要來做下圖這樣的表格 附上 CSS 樣式設定 <style> table, th, td{ border: 1px...

鐵人賽 自我挑戰組 DAY 12

技術 [Day 12] Walking Boots: 行走的紅鞋子~咯噔咯噔

說時遲,那時快,身後傳來咯噔咯噔的腳步聲,我一回頭不見人影,暗自低喃:「奇也怪哉!」,瞥向一旁卻見一雙紅靴子一起一落,從我身邊走過...那是何人? 今天我們來實...

鐵人賽 自我挑戰組 DAY 13

技術 Day 13 Side Project : Drink Water 沒事多喝水

今天要來做的主題還蠻有趣滴~ 如圖中所示,我們的目標水量是要把整個大杯子填滿(2L),點選下方的小杯子(250ml),可以把水加入大杯子中,並且顯示目前水量以...

鐵人賽 自我挑戰組 DAY 6

技術 Day 06:Git 學習筆記

一、前言 不管前端或是後端,Git 都是一個重要的工具,Git 其實就是一堆用來控制版本狀態的指令(版本控制),還有另外一個東西叫做 GitHub,它能夠遠端...

鐵人賽 自我挑戰組 DAY 5

技術 Day 05:寫作帶給我的人生意義

一、前言 從不會寫文章,到開始經營 Blog 這個過程,經歷了一些波折,從最早「無名小站」(時代的眼淚)開始經營第一個 Blog 到租借虛擬主機架設 Word...

鐵人賽 Modern Web DAY 6

技術 Day 06:Loader 組件實作

組件實作 : Demo 一、前言 今天我們要來製作 Loader 的組件,Loader 組件主要會出現在換頁或是網頁刷新(例如 AJAX)的等待時間,除了...

鐵人賽 Modern Web DAY 5

技術 Day 05:Slideshow 組件實作

組件實作 : Demo 一、前言 slideshow 幻燈片組件可以為網頁帶來動態的效果,與使用者產生互動,我們用 6 張圖片組成一個輪播視窗。你除了可以...