iT邦幫忙

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

技術 Day 19:jQuery 學習筆記-下

組件實作 : Demo、Demo2 一、前言 今天要來繼續研究 jQuery 的用法,經過我非常努力的看書後,發現勾不起我寫文章的動力,索性就直接在網路上...

鐵人賽 Modern Web DAY 18

技術 Postman challenge Day 17 - 可視化 (Visualizations)

今日主題 今天的主題是可視化(Visualizations),主要的目的是針對每次進行API呼叫後,將回應的資料以圖形的方式來呈現,讓資料本身更容易被理解,不需...

鐵人賽 自我挑戰組 DAY 18

技術 Day 18 進階CSS (排版聖品登場!!登登登登~)

前言繼五花八門的選擇器之後,來到了空間學堂,同樣程度的燒腦啊~ 講到CSS最後的這趴重點就要回想到當初我們的區塊(想當初~~ Day 6講到區塊元素 Day 1...

鐵人賽 自我挑戰組 DAY 26

技術 Day 26 Side Project : Testimonial Box Switcher 人物介紹(仿限時動態)

今天要來做的事人物的介紹,呈現形式有點類似限時動態,固定時間後會自行跳往下一則動態 超白話畫面和功能拆解 進度條會動態前進,紀錄目前跑的進度 主體內容包含...

鐵人賽 Modern Web DAY 18

技術 Day 18:Collapsibles 組件實作

組件實作 : Demo、Demo2 一、前言 Collapsibles 翻譯為折疊的意思,所以它可以像是下拉選單一樣,點擊按鈕後即可展開內容,其實這個組件的作...

鐵人賽 自我挑戰組 DAY 18

技術 Day 18:jQuery 學習筆記-上

一、前言 伴隨著前端框架的不斷演進,jQuery 的使用慢慢地式微,甚至出現了棄用 jQuery 的建議【1】。雖然某些公司專案開上可能不再使用 jQuery...

鐵人賽 自我挑戰組 DAY 25

技術 Day 25 Side Project : Quiz App 小測驗

今天要來做的是小測驗裝置 (ˉ▽ ̄~) 超白話畫面和功能拆解 畫面上每個題目皆為單選題,每一頁只顯示一個測驗 選好答案,,按下submit按鈕,就會自動跳到...

鐵人賽 自我挑戰組 DAY 17

技術 Day 17:Docker 學習筆記

一、前言 這篇文章的主要目的是在記錄學習 Docker 的相關議題,內容包括:「是如何入門?碰上問題時的解決方法?」等等,目標是把環境建立起來,還有整理相關的...

鐵人賽 Modern Web DAY 17

技術 Day 17:Testimonials 組件實作

組件實作 : Demo 一、前言 Testimonials 這個組件意思是「證言」,類似推薦信的感覺,也就是網路上的文章底下常見的留言評論區,先不討論這些...

鐵人賽 自我挑戰組 DAY 16

技術 Day 16 CSS表格樣式設計

前言 挑戰最初的幾天,有說明關於列表跟表格在HTML的架構使用,那針對上述的樣式設計部分,就是今天的重點啦 在學習過程中,一直不斷發現到這個跟以前做報告在編輯文...

鐵人賽 Modern Web DAY 16

技術 Day 16 - 切版進階技巧(二) : 版型規劃、RWD規劃

Day 16 - 切版進階技巧(二) : RWD、版型規劃 每日一談 嗨,大家好 ! 我是阿蘇今天是Day16 ,今天分享的是RWD、版型規劃,目前大部分的網...

鐵人賽 自我挑戰組 DAY 24

技術 Day 24 Side Project : Live User Filter 動態篩選器

今天要做的是動態篩選器 畫面和功能拆解 沒有輸入的情況下,可以看到所有的人名 每輸入一個字母,便動態篩選搜尋結果(類似 google 搜尋 bar)...

鐵人賽 Modern Web DAY 16

技術 Day 16:Tooltip 組件實作

組件實作 : Demo 一、前言 Tooltip 是文字提示的組件,感覺上它很容易被忽略,其實這一個功能在網頁上也很常找到它的芳蹤,其實作的原理,也不會太...

鐵人賽 自我挑戰組 DAY 16

技術 Day 16:Gulp 學習筆記

一、前言 Gulp 是工作流程自動化的工具,可以幫我們處理一些需要重複執行的指令,像這類繁瑣的工作,可以交給 Gulp 來處理,在初學 Gulp 時,可以直接...

鐵人賽 自我挑戰組 DAY 15

技術 Day 15 Position 定位

前言 家裡每個物品都有自己的定位,所以前面講了這麼多設計框架背景等等的,接下來家具等等的要放在哪就很重要了,總不可能鍋子放房間或是枕頭棉被放廚房吧(當然這樣放真...

鐵人賽 Modern Web DAY 28
【每天5分鐘】學前端 系列 第 28

技術 Day28【每天5分鐘】學前端 | 切版實作 HTML 篇

鐵人賽將近尾聲了~時間在不知不覺間也過得很快。 我們來切一個簡單的網頁吧! Wireframe 配置 方框中間有叉叉 : 表示 圖片 方框 : 表示...

鐵人賽 自我挑戰組 DAY 23

技術 Day 23 Side Project : Verify Account UI 帳戶驗證介面

今天要來做的是很常見的用戶驗證介面 超白話畫面和功能拆解 當輸入一個數字後,便會自動跳到下一個輸入框 可以按backspace 按鍵去修改前面的數字 運...

鐵人賽 自我挑戰組 DAY 15

技術 Day 15:偽元素與偽類

組件實作 : Demo 一、前言 在寫某些專案或者是練習,時不時會看到::before、::after這類元素的用法,在第一次接觸時,總是會感到困惑,不清...

鐵人賽 Modern Web DAY 15

技術 Day 15:Animation 組件實作

組件實作 : Demo 一、前言 Animation 動畫是網頁中不可或缺的重要元素,它能夠為網頁帶來生命力,讓整個網頁「活了起來」,在本篇中介紹幾個語法...

鐵人賽 自我挑戰組 DAY 14

技術 Day 14 Box Model

####前言 All html elements are boxes!(with width and height) html版面就像是用一個個盒子組成的,那整...

鐵人賽 影片教學 DAY 13
從麻瓜變成前端魔法師 系列 第 13

技術 Day13【從麻瓜變成前端魔法師】CSS flex 排列實作

我們來做下圖的小卡片: 並補充說明 HTML 的 影片 標籤 及 清單 標籤。 清單分兩種:無序清單(unordered list):使用 <ul&gt...

鐵人賽 自我挑戰組 DAY 22

技術 Day 22 Side Project : Hoverboard 面板

今天要來做的是由多個正方形所組成的hover面板 超白話畫面和功能拆解 面板主要由多個小正方形所組成 當滑鼠經過正方形,就會產生不同的顏色,離開正方形顏色...

鐵人賽 自我挑戰組 DAY 14

技術 Day 14:JS ES6 學習筆記

組件實作 : Demo 一、前言 關於 JavaScript 的故事其實是這樣的:「JavaScript 誕生於 1995 年的景網通訊(Netscape...

鐵人賽 自我挑戰組 DAY 21

技術 [Day 21] Slider with Radio Button: 三點換頁

在我們瀏覽網站時,可能會看到購物網站、風景網站等等使用slider來切換圖片,最常見的應該就是三個小點~今天我們就來實作Day #19 Slider with...

鐵人賽 自我挑戰組 DAY 13

技術 Day 13 background & border

前言 文字樣式設計變化之後那可以試試看更改背景還有框線設計 background color / image 背景顏色 / 圖片 Background-siz...

鐵人賽 Modern Web DAY 14

技術 Day 14:Typing Effect 組件實作

組件實作:Demo 一、前言 Typing Effect 是一種好用的文字效果,看似簡單的語法下,其實藏著一些不太好理解的概念,例如 CSS 的 Anim...

鐵人賽 自我挑戰組 DAY 21

技術 Day 21 Side Project : Password Generator 密碼生成器(下)

接續Day 20,繼續來講解沒完成的JS部分 專案回顧 畫面和功能拆解 畫面中的密碼生成器裡內有標題 > 結果顯示欄 +複製按鈕 > 需求設定...

鐵人賽 Modern Web DAY 12

技術 Day12 - 偽裝(上) (table,虛擬類別;偽類)

資產負債表 表格元素 <table> HTML自帶製作表格或報表專用的標籤,這裡簡單介紹table中標籤代表的意思: <table>...

鐵人賽 自我挑戰組 DAY 13

技術 Day 13:Vim 學習筆記

一、前言 其實,我也不知道自己怎麼會想加入這個主題,只是有點想要學習 Vim 的基本操作,順便紀錄一下學過的操作方法,現階段我也沒有想要背任何的指令或是快捷鍵...

鐵人賽 Modern Web DAY 13

技術 Day 13:Tab 組件實作

組件實作 : Demo 一、前言 Tab 組件是一種高互動性的組件,構造是由一個 Menu 選單和一個訊息框組合而成,當選單項目被選中時,會切換到對應的訊...