iT邦幫忙

html相關文章
共有 476 則文章
鐵人賽 Modern Web DAY 16
淺談web 系列 第 16

技術 鐵人賽DAY16-HTML(四)

一、HTML無序清單 在HTML中無序的清單是以<ul>標籤來定義的,清單內容則是以<li>的標籤來定義,列表開頭也可以使用程式碼sty...

鐵人賽 自我挑戰組 DAY 1

技術 Day 01:前言 - 打開地圖,開始我們的旅程吧!

自我介紹 大家好,我是你們這30天的嚮導,我叫Andy Chiang,目前就讀中興大學資工系,大二升大三。 我喜歡學習新的技術,像海綿一樣有什麼就吸收什麼,除了...

鐵人賽 自我挑戰組 DAY 16
網頁學習紀錄 系列 第 16

技術 鐵人賽 Day16-向 KKBOX 致敬!來一個滿版主視覺吧!!

今天要來寫一個滿版圖片,但不使用 img 的標籤,想呈現下方畫面 這次做法跟先前一個練習類似,但這次有一個地方有優化了一下,就是在這個地方增加下列屬性 .co...

技術 Day33 網頁前端-持續練習(透明人間)

Day33 透明人間 簡單小語 這個練習只看到,哇透明的header並用fixed的方式,不過萬萬沒想到,還是忘記該如何製作透明模糊背景,經過Google後...

鐵人賽 自我挑戰組 DAY 22

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

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

技術 Html筆記

哈囉!這篇是個人用來記錄看過什麼而已的筆記!不是什麼技術文章而且正常要放自己部落格會比較正常 但還是希望能分享一點學習紀錄 此篇文章內容皆來自網路 https...

技術 Day31 網頁前端-持續練習(來杯咖啡)

Day31 來杯咖啡 簡單小語 看似簡單卻又充滿挑戰細節的咖啡杯,一開始的躍躍欲試到後面的苦惱煩惱,運用各種偽元素拼拼湊湊,最後的波浪顏色區分,還是想不到方...

鐵人賽 Modern Web DAY 15
淺談web 系列 第 15

技術 鐵人賽DAY15-HTML(三)

一、HTML表格 在表格中「行」用<tr>元素來定義,「該列的標題」用<th>元素來定義,而「表格內的資料」用<td>元素來...

鐵人賽 Modern Web DAY 2

技術 Day2: HTML之區塊元素與行內元素

區塊元素 1.almost佔滿整個版面 2.區塊元素會另起一行來進行呈現 行內元素 1.比較常用在段落裡面 2.沒辦法設定寬高 以上練習來自六角學院課程練習:...

鐵人賽 Modern Web DAY 14
淺談web 系列 第 14

技術 鐵人賽DAY14-HTML(二)

一、HTML屬性 屬性以name="value"的形式表達,寫在元素的起始標籤內,為該元素增加功能,以下介紹常用的幾個屬性: 1.href:...

鐵人賽 自我挑戰組 DAY 29

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

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

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

技術 Day29 - Float

Float float:用來將區塊並排時可以使用,當設定浮動時,其父層會抓不到子層的高度 left:靠左浮動 right:靠右浮動 none:不浮動...

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

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

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

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

技術 Day28 - HTML 與 CSS (10) - 網頁設計

網頁設計 環境:將多頁面的檔案建立,連結確認彼此間的關係 layout (佈局):評估多個頁面皆會出現的部分,如開頭與結尾,可稱為佈局 保持彈性:內容長度不定...

鐵人賽 Modern Web DAY 13
淺談web 系列 第 13

技術 鐵人賽DAY13-HTML(一)

一、何謂HTML 超文件標示語言(HyperText Makeup Language,HTML)是一種用於呈現網頁結構的標示語言而非程式語言,由Tim Bern...

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

技術 Day26 - HTML 與 CSS (8) - 背景圖片

背景圖片 background-image:使用 url(pic路徑) 來顯示圖片 background-image: url(./img/logo.p...

技術 Day39 網頁前端-持續練習(刻不容緩)

Day39 刻不容緩 簡單小語 這個樣板算是目前最大挑戰,看似簡單但細節超級多,中間又卡了一個出遊因此進度落後,趕快補起來,許多地方並沒有樣板這樣如此細膩及...

技術 Day32 網頁前端-持續練習(玩轉同樂)

Day32 玩轉同樂 簡單小語 最近莫名看到這種特效很炫的就會想要寫來練習,又是為元素的應用,當然還有flex的排版,大致上沒太大問題,不過現在對於Body...

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

技術 Day30 - 結語、推薦

結語 感謝鐵人賽的契機,讓我又完成一門課了,雖然是一門基礎的課程,但是過程中依然放了不少心力,看那幾乎都接近時限前的發文,每天都花 1 ~ 2 小時的時間,上完...

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

技術 Day25 - CSS (6) - 漸層、權重

漸層 linear-gradient:漸層屬性,可以從 background 套用 方向:預設未寫為上至下 to bottom,也可寫成角度,從上以 0...

鐵人賽 自我挑戰組 DAY 26

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

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

鐵人賽 自我挑戰組 DAY 27

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

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

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

技術 Day19 - Position (1) - 相對定位、絕對定位

相對定位與絕對定位 可以用來應用在重疊 static:預設值,代表不會被定位,依照網頁預設排版 absolute:絕對座標,可放在整個網頁視窗的位置,挪動...

鐵人賽 自我挑戰組 DAY 23

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

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

鐵人賽 自我挑戰組 DAY 24

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

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

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

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

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

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

技術 Day20 - Position (2) - 固定定位

固定定位 不隨網頁滑動(滾動)而改變位置,例如購物車按鈕、置頂按鈕、聊天服務等固定區域的 fixed:類似絕對座標固定位置,但參考的是瀏覽器視窗,也就是我們...

鐵人賽 自我挑戰組 DAY 2

技術 Day 02:專案01 - 超簡單個人履歷01 | HTML簡介

專案介紹 這個專案會帶你使用HTML和CSS,打造專屬於你的個人履歷網頁。 預覽圖: 首先,我們從HTML入門吧! HTML是什麼? HTML全名是Hyper...

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

技術 Day22 - HTML 與 CSS (6) - Form 表單

Form 表單 <form>:有 action 來確定要送出的地方,method 則是送出的方法 <input>:用來輸入資料...

鐵人賽 Modern Web DAY 28
喪屍黑白切 系列 第 28

技術 Day 28 | 來組合個畫面吧 - Part 1

終於要來組合畫面嚕~ 寫了這麼多天的小區塊切版, 終於要派上用場了! 是不是常常有一種:「我想要學的是整個網頁的切版,不是這種小區塊!」的吶喊啊? 其實小區塊切...