iT邦幫忙

html相關文章
共有 878 則文章
鐵人賽 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 張圖片組成一個輪播視窗。你除了可以...

鐵人賽 影片教學 DAY 17

技術 Day18 HTML 額外標示

前言 昨天因為一些事情沒有完成文章,但是我會繼續把她補,而今天也是補完所有HTML語法了在明天我們也即將進入CSS的部分這一路呈大家都辛苦了還有兩個語法,大家加...

鐵人賽 自我挑戰組 DAY 5

技術 Day5 Input types

前言 經過昨天說明的form表單之後,有使用了不少input標籤 當然不只這些,所以今天下面再附上一些常用的input標籤介紹 < range >...

鐵人賽 自我挑戰組 DAY 4

技術 Day 4 form表單

前言 在經歷過幾個常見的標籤後,接下來想了解平常在網站上下單,我們要填寫的資料表單,是如何建立出來的呢?? form 表單,是前端連結後端的數據庫一個很重要的地...

鐵人賽 影片教學 DAY 3

技術 Day03【從麻瓜變成前端魔法師】HTML 標籤

有一部分字幕是簡體字沒有改到繁體字 若有錯字還請大家多多包涵,謝謝我會認真研究快速上繁體字的方法的 (> _ <); 若想知道更多資訊,可參考文...

鐵人賽 自我挑戰組 DAY 11

技術 [Day 11] Watch: Watch me (Whip/Nae Nae)

Watch me whip(whip), watch me Nae Nae ~ 早上起來洗臉刷牙,戴上手錶錢包鑰匙手機,出門去玩囉~今天我們來實作Day #10...

鐵人賽 自我挑戰組 DAY 4

技術 Day 04:論如何學習

一、前言 你是不是曾經有過一種經驗,就是當你努力的讀書,努力的學習,網路上查了一堆資料,也寫了一堆筆記,記在腦袋裡面的東西過了幾天之後就全部遺忘,彷彿不存在過...

鐵人賽 Modern Web DAY 4

技術 Day 04:多媒體資源匯入

一、前言 在製作網頁時,我們會需要一些文字或是圖片來裝飾我們的頁面,這些資料可能來自設計師或是後端工程師。但是我們在前端製作頁面時,沒有這些文字與圖片資源時該...

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

技術 用CSS打造繽紛的網頁

今天會來介紹比較常用style的屬性~ color color 有好幾種表達顏色的方法,像是可以用 Reserved color、RGB、HEX、HSL等等 ▼...

鐵人賽 自我挑戰組 DAY 12

技術 Day 12 Side Project : Dad Jokes 爸爸的冷笑話

今天要來做的賽project叫「爸爸的冷笑話」,需要對API有基本的認識,因為這篇要串接外部API來取得冷笑話集,並使用postman來進行測試,若要下載po...

鐵人賽 Modern Web DAY 2

技術 Day2 - 從喵喵開始 (標籤,巢狀結構)

第一步 咪喵相簿 按下開始進入課程的響應式網頁設計第一堂第一節課, 然後就看到一堆英文被嚇死,(目前已經全部繁體中文化了)先別緊張,google翻譯是你的好朋友...

鐵人賽 影片教學 DAY 2

技術 Day02【從麻瓜變成前端魔法師】HTML 簡介

HTML(架構):好比房子的鋼筋、水泥、磚頭CSS(樣式):就像房子的裝潢、油漆JavaScript(動態效果):霍爾的移動城堡,跑起來~~ 如何快速生...

鐵人賽 Modern Web DAY 3

技術 第 3 幅 - 藝起寫 Code,復刻蒙德里安抽象畫

昨天練習了許許多多的幾何圖形,今天來休息一下,順便沾沾藝術氣息吧!不知道大家知不知道蒙德里安?他是 19 世紀的荷蘭畫家,他將抽象派推至極限,僅通過構圖和色彩等...

鐵人賽 自我挑戰組 DAY 10

技術 [Day 10] Rainy Night: 一個人度過多少寂寞的雨夜?

Hello, Gang! It's Thibe! 雖然今天天氣很好,但在寂寞雨夜的時候,還是有Thibe的文章陪著你的,我們就來實作Day #9吧~ Rainy...

鐵人賽 自我挑戰組 DAY 3

技術 Day 03:提高 2 倍工作效率的方法

一、 前言 有時候覺得自己明明很努力做事,可是總是覺得好像事情一直都無法在規劃的時間內完成。發現自己在訂定目標時,除了會加入一堆多餘的步驟,以及使用了錯誤的方...

鐵人賽 Modern Web DAY 3

技術 Day 03:Navbar 組件實作

組件實作 : Demo 一、前言 Navbar 導覽列是每個網站幾乎都會有的組件之一,就是網頁最上面的那一條橫幅,Navbar 的實作上,我們專注在兩個重...