iT邦幫忙

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

技術 Day 12 CSS text styling

前言 進入CSS講了這麼多選擇器,終於來到文字的設計啦! 之前在學校做報告時候,常常會使用文件裡面編輯文字,可能這個字體要更改成微軟正黑體,又或是字體的大小需要...

鐵人賽 自我挑戰組 DAY 19

技術 [Day 19] Penrose Triangle: 潘洛斯三角(不可能三角)

今天我們來實作Day #17,潘洛斯三角形為存在於二維空間的三角形,而在現實世界中不可能存在的物體。 潘洛斯三角維基百科 Penrose Triangle...

鐵人賽 自我挑戰組 DAY 20

技術 Day 20 Side Project : Password Generator 密碼生成器(上)

這篇沒有帥哥可以看,不過也是一個非常有趣的projecto( ̄▽ ̄)d 今天要做的是密碼生成器,根據使用者的需求去自動生成密碼,聽起來很厲害,另外考量到這篇的J...

鐵人賽 Modern Web DAY 11

技術 Day 11 - 切版基礎打底(一) : HTML標籤/CSS基礎

Day 11 - 切版基礎打底(一) : HTML標籤/CSS基礎 每日一談 嗨,大家好 ! 我是阿蘇今天是Day 11,不知不覺終於突破 Day10 啦 !...

鐵人賽 自我挑戰組 DAY 12

技術 Day 12:Google Maps API

組件實作 : Demo 一、前言 網頁上要顯示店家、場地等地理位置資訊,都會使用到 Google 地圖來輔助。在這個篇章中,我們要來研究關於 Google...

鐵人賽 自我挑戰組 DAY 11

技術 Day 11 CSS Rules

前言 挑戰快要到一半了!! 剛完成讓人頭昏眼花的選擇器學習,那選擇器在套用的順序上面也是有優先順序的 本篇就是一個補充說明,講一下CSS Rules 幾個規則,...

鐵人賽 Modern Web DAY 12

技術 Day 12:Modal 組件實作

組件實作 : Demo 一、前言 Modal 指的是互動視窗,也就是讓畫面跳出一個蓋板訊息框。使用 Modal 背景大多由半透明黑色覆蓋;訊息框(互動視窗...

鐵人賽 自我挑戰組 DAY 10

技術 Day 10 CSS Selector 最後一趴

前言 CSS選擇器來到第三篇了,沒想到讓頭腦打結的規則越來愈複雜,花了好一段時間好好理解跟運用這些選擇器的規則。 Part.3 介紹的基本選擇器如下 Des...

鐵人賽 自我挑戰組 DAY 19

技術 Day 19 Side Project : Double Vertical Slider雙捲軸

今天要來做的是垂直的輪播圖,點選「上」「下」箭頭可以反方向切換圖片和圖片的描述,做project順便看看帥哥好快樂≡ω≡ 事前準備 引入 fontAwes...

鐵人賽 自我挑戰組 DAY 18

技術 [Day 18] Blobby: 改變形狀的閃耀泡泡

在昨天的文章學習到新的scale, rotate, translate的寫法,可以從transform獨立出來,今天就可以實際運用,配合SVG的圖形,來達到改變...

鐵人賽 自我挑戰組 DAY 11

技術 Day 11:Position 功能實作

組件實作 : Demo、Demo2 一、前言 原本預定這篇要來寫 pug 的學習筆記, 但是對於 CSS 的 Position 的用法還有一點不熟悉,所以...

鐵人賽 Modern Web DAY 11

技術 Day 11:Timeline 組件實作

組件實作 : Demo、Demo2 一、前言 Timeline 時間線的功能很常出現在履歷表,或是各種跟年分有關的介紹。原本參考 W3schools Ho...

鐵人賽 Modern Web DAY 9

技術 Day9 - 養分 (Selectors,link)

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

技術 checkbox 傳送空值?

情況: 在做修改功能時,多筆資料想把 checkbox 傳送空值,也就是如果有勾選,POST 到資料庫紀錄 Y,如果不勾選,資料庫就紀錄空值。 問題: 原本資料...

鐵人賽 自我挑戰組 DAY 18

技術 Day 18 Side Project : Drag N Drop 拖與拉

今天要來做的是滑鼠拖拉事件,點選笑臉圖片可以把它拖放到空的正方形中, 功能拆解 預設情況圖片會放在第一個正方形內 持續按著滑鼠左鍵,可以拖拉照片 抓起圖片經...

鐵人賽 自我挑戰組 DAY 10

技術 Day 10:Webpack 學習筆記

一、前言 Webpack 是網頁的打包工具。當我們的網頁越寫越大,檔案越來越多(例如一個網站有好幾個.html檔案),甚至還有使用到框架。這時候我們可以使用...

鐵人賽 Modern Web DAY 10

技術 Day 10:Form 驗證功能實作

組件實作 : Demo 一、前言 驗證功能(Validate)用途在於能夠避免使用者輸入不符合格式的資料,統一的資料格式方便讓程式處理。Form 表單內容...

鐵人賽 Modern Web DAY 9

技術 用 LinkFree 製作一個 Github Pages 取代 LinkTree (9)

什麼是 LinkTree LinkTree 是一頁傳送門,透過 IG 的個人檔案連結來做相關行銷與各平台的串聯。 透過 LinkTree 整合 Facebook...

鐵人賽 自我挑戰組 DAY 9

技術 Day 9 CSS Selector part2

前言 前面幾個選擇器是比較基礎簡單可以理解的,到這裡就開始需要思考一下… 今天還有好多選擇器的規範,就不多說直接開始。 Part.2 介紹的基本選擇器如下...

鐵人賽 自我挑戰組 DAY 17

技術 Day 17 Side Project : Theme Clock 動態時鐘(下)

下篇我們要接續上篇的時鐘來講解主要圍繞在JS的部分 JS變數的設定 let hour = document.querySelector(".ho...

鐵人賽 自我挑戰組 DAY 16

技術 [Day 16] Upload: 以假亂真的上傳

我們常常在交作業、交報告、分享檔案的時候需要上傳的步驟,那你有想過做一個好看的上傳動畫嗎?今天我們就來實作Day #15,不會實際上傳檔案的好看動畫 Uploa...

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

技術 用CSS把這些Box定位

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

鐵人賽 自我挑戰組 DAY 9

技術 Day 09:UI 設計工具 Figma 快速入門

成果展示: Demo 一、前言 為了逼迫自己學習 Figma 這個線上工具,於是特別寫這一篇。身為一個前端工程師,為什麼需要特別去學習 UI 設計的工具呢...

鐵人賽 Modern Web DAY 9

技術 Day 09:Form 組件實作

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

鐵人賽 自我挑戰組 DAY 8

技術 Day 8 CSS Selector part 1

前言 前面對CSS應該有一些的基本了解跟認識,那接下來要講到的CSS Selectors 基本選擇器 (如果我們想要連結CSS檔案到HTML檔案的話,開新的檔案...

鐵人賽 影片教學 DAY 7

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

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

鐵人賽 自我挑戰組 DAY 16

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

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

鐵人賽 自我挑戰組 DAY 15

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

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

鐵人賽 自我挑戰組 DAY 8

技術 Day 08:臺灣郵遞區號

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

鐵人賽 Modern Web DAY 8

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

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