iT邦幫忙

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

技術 Day29 網頁前端-刻意練習(模仿遊戲#2)

Day29 六角 模仿遊戲#2 簡單小語 一開始看到這個版就覺得很酷可以記錄信用卡資訊,稍微玩了一下動畫起初覺得有難的感覺,但實際寫下去才發現兩行就可以完成了...

鐵人賽 自我挑戰組 DAY 28

技術 Day28 網頁前端-刻意練習(模仿遊戲#1)

Day28 六角 模仿遊戲#1 簡單小語 這個週末偷懶了一下,多花了點時間完成這個模仿遊戲,再次把最近學到的To Do List給放進來刻意練習一遍,Java...

鐵人賽 Modern Web DAY 12
HTML 與 CSS 學習筆記 系列 第 12

技術 Day12 - HTML 與 CSS (3) - Box Model

margin 與 padding 補充昨日的資訊,可以在 chrome 的開發者模式看到一個 Box,其實會隨著各個區塊的設定而有不同,就搭配程式碼與顯示,比較...

鐵人賽 自我挑戰組 DAY 12
網頁學習雜記 系列 第 12

技術 Day 12 | 我的 HTML 筆記

分享一下之前看金魚系列時整理的筆記,附上金魚原本的連結:金魚都能懂的網頁設計入門:再談HTML Html 標籤 主標題:h1 副標題:h2 小標題:h3(...

鐵人賽 自我挑戰組 DAY 27

技術 Day27 網頁前端-刻意練習(RWD#3)

Day27 六角 RWD#3 簡單小語 圖片的版型看到就想要練習,又看到這種斜一邊然後小尺寸變正的圖片縮放樣式,模糊效果及觸及事件,看到就忍不這想趕快學習並實...

鐵人賽 Modern Web DAY 11
HTML 與 CSS 學習筆記 系列 第 11

技術 Day11 - HTML 與 CSS (2) - 選擇器、margin、padding

選擇器 之前有介紹過選擇器,可參考以下連結,今天介紹後代選擇器 type selector (標籤選擇器):Day07 Pseudo-classes (擬態...

鐵人賽 自我挑戰組 DAY 26

技術 Day26 網頁前端-刻意練習(RWD#2)

Day26 六角 RWD #2 簡單小語 這次看到了兩個版型就毫不猶豫合併並且加入最近所學的JS功能(ToDoList及Time Clock),這個heade...

鐵人賽 Modern Web DAY 10
HTML 與 CSS 學習筆記 系列 第 10

技術 Day10 - HTML 與 CSS (1) - 區塊元素、行內元素

因為現在發現 HTML 和 CSS 都會交替用到,標題不好區分,就當個綜合應用吧! 區塊元素 CSS 設定:display: block 盡可能佔滿版面 會...

鐵人賽 Modern Web DAY 9
HTML 與 CSS 學習筆記 系列 第 9

技術 Day09 - CSS (4) - 線條、容器、重置 CSS

線條 border:四周的框線,分別定義粗細、樣式、顏色,前後順序沒關係 樣式:實心線 (solid)、虛線 (dashed)、點線 (dotted)...

鐵人賽 自我挑戰組 DAY 25

技術 Day25 網頁前端-刻意練習(RWD#1)

Day25 六角 RWD #1 簡單小語 一開始看到覺得應該不難,結果RWD直接卡住不知道Table該怎麼排,後來發現參考樣板的方式,利用dataset的方式...

鐵人賽 自我挑戰組 DAY 24

技術 Day24 網頁前端-刻意練習(Off Canvas #3)

Day24 六角 Off Canvas #3 簡單小語 沒想到OffCanvas練習了三篇,看到這個版覺得有趣,立馬又想寫一個,雖然有些效果不同但大部分應該是...

鐵人賽 Modern Web DAY 8
HTML 與 CSS 學習筆記 系列 第 8

技術 Day08 - CSS (3) - 選擇器、文字排版

選擇器 補充另外 2 個選擇器 type selector (標籤選擇器):Day07 Pseudo-classes (擬態選擇器):Day07 desc...

鐵人賽 Modern Web DAY 8

技術 [HTML] 關於 HTML

HTML HTML (是簡稱所以大寫) HTML 是標記語言不是程式語言(標記 Markup、沒有程式邏輯) 超文本標記語言:重點是「標記」-把文件用標記標...

鐵人賽 Modern Web DAY 7
HTML 與 CSS 學習筆記 系列 第 7

技術 Day07 - CSS (2) - 選擇器、隨機假文

選擇器 (Selector) 似乎也稱為選取器,介紹幾個常用的選擇器 標籤選擇器 type selector:又稱型態選取器,就是之前舉例時修改標籤的樣式...

鐵人賽 自我挑戰組 DAY 23

技術 Day23 網頁前端-刻意練習(Off Canvas #2)

Day23 六角 Off Canvas #2 簡單小語 CodePen看看高手們的OffCanvas的模樣,一看到這個照片的樣板,就決定嘗試做做看了,做完發現...

鐵人賽 自我挑戰組 DAY 22

技術 Day22 網頁前端-刻意練習(Off Canvas #1)

Day22 六角 Off Canvas #1 簡單小語 選單選單選單,各式各樣,基礎練習不能少,每次在RWD時的menu轉換都是一種練習,掌握每個物件的位置及...

鐵人賽 Modern Web DAY 6
HTML 與 CSS 學習筆記 系列 第 6

技術 Day06 - CSS (1) - Element、位置

開始之前先補充一下 Element (元素)的說明 Element (元素) Element:簡單說元素就是一個前後完整的標籤 + 內容的組合,如下會是一個段...

鐵人賽 Modern Web DAY 5
HTML 與 CSS 學習筆記 系列 第 5

技術 Day05 - HTML (3) - 列表、a、img

列表清單 (List) List 標籤:主要分成 2 種,有順序和無順序的,清單內還可以再放其他清單 <ul>:代表無順序 (unordere...

鐵人賽 自我挑戰組 DAY 21

技術 Day21 網頁前端-刻意練習(名片練習)

Day21 六角 名片練習 簡單小語 一看到名片就想接著昨天的練習做結合,讓每點擊一次名片就會更換,而且職稱還越來越高呢,現在練習的問題在於配色,對於美籍顏色...

鐵人賽 Modern Web DAY 7
前端開發 30 個問題 系列 第 7

技術 CSS Specificity / 權重

前言2020 秋天,我將用 30 天的時間,來嘗試回答和網路前端開發相關的 30 個問題。30 天無法一網打盡浩瀚的前端知識,有些問題可能對有些讀者來說相對簡...

鐵人賽 自我挑戰組 DAY 20

技術 Day20 網頁前端-刻意練習(Flex時光屋#2)

Day20 六角 Flex時光屋#2 簡單小語 自己切了這個版,才發現原來Bootstrap真的很好用,觸發的事件自己寫過才知道,要如何去撰寫,要如何設計架構...

鐵人賽 Modern Web DAY 4

技術 【Day 4】Html基本結構大分析,讓新手的你也能簡單了解(後篇)

昨天我們大致上地說了<!DOCTYPE html>,<html></html>,<head></head&...

鐵人賽 Modern Web DAY 4
HTML 與 CSS 學習筆記 系列 第 4

技術 Day04 - HTML (2) - head、body

<head> 延續昨天的說明,<head> </head> 主要說明這個網頁的資訊,如編碼、標題,只會有一個 <h...

鐵人賽 自我挑戰組 DAY 19

技術 Day19 網頁前端-刻意練習(Flex時光屋#1)

Day19 六角 Flex時光屋#1 簡單小語 看到當時時光屋練習的作品,想說挑兩個來整併,當作練習的機會,這次的結構不一樣的是,header及footer使...

鐵人賽 Modern Web DAY 4

技術 【Day 4】網頁設計入門:基礎 HTML、CSS 線上課程推薦

昨天分享的教學是以文章資源為主,好處是一目了然,所有大綱和分類都可以快速尋找。但文字看久難免會想睡呀! 學習時搭配一些互動式影片教學,可以幫助吸收和複習,一步一...

鐵人賽 Modern Web DAY 6
前端開發 30 個問題 系列 第 6

技術 z-index and stacking context

前言2020 秋天,我將用 30 天的時間,來嘗試回答和網路前端開發相關的 30 個問題。30 天無法一網打盡浩瀚的前端知識,有些問題可能對有些讀者來說相對簡...

鐵人賽 Modern Web DAY 19

技術 Day 19:批改系統網頁 (1) - 建立基本 Kotlin/JS 網頁專案

在完成了審核程式後,接著就要讓我們將實作完成的資料管理系統以及審核程式能夠有個可以讓使用者方便使用的介面,因此就讓我們開始來實作批改系統的前端網頁吧! 網頁架...

鐵人賽 Modern Web DAY 3

技術 從 W3Schools 學習基本頁面佈局 - 版面【30天切版臨摹 D3】

W3Schools 首頁有用到他們自家出產的 w3.css,這是一套類似 Bootstrap 的 CSS Framework,把很多常用的css屬性包成許多cl...

鐵人賽 Modern Web DAY 3
ReactJS 疑難排解 系列 第 3

技術 ReactJS 疑難排解:為什麼按下取消,form 卻 submit 了

先來看一段簡單的 code <form onSubmit={handleSubmit}> ... <button onClick={h...

鐵人賽 Modern Web DAY 3

技術 【Day 3】基礎 HTML、CSS 線上教學資源分享

學習 HTML、CSS 的路上,買過不少線上教學,也蒐集了很多免費資源。有時候買下來才驚覺太過艱深,或是上到一半發現跟自己的工作內容相去甚遠,這時候不用覺得浪費...