iT邦幫忙

html相關文章
共有 476 則文章

技術 日記18

推薦前端工程師好文章 https://ithelp.ithome.com.tw/m/users/20129161/ironman/2978

鐵人賽 Modern Web DAY 3
~網頁入門~ 系列 第 3

技術 Day03-網頁基本架構(上)

網路上有著各式各樣的網站,看似五花八門,但其實基本的頁面都是由 HTML 與 CSS 所構成,再加入程式語言來增加與使用者間的互動。這一篇,我要先來介紹一下 H...

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

技術 鐵人賽Day10-向 KKBOX 致敬

小弟熱愛音樂,前一週自己發想一個音樂主題的頁面網站,記錄各樣的網頁撰寫方式, 接下來這一週要向 KKBOX 致敬,撰寫內容如下 navbar 導覽列 左邊 s...

鐵人賽 自我挑戰組 DAY 17

技術 Day17 網頁前端-刻意練習(履歷表#2)

Day17 AC 履歷表#2 簡單小語 發現一個樣板的履歷網站再次練習履歷切版,加深觀念,每一次的切版,每一次的練習,都是成就更好的自己,雖然是簡單樣板,相...

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

技術 鐵人賽Day11- 向 KKBOX 致敬,一樣從 navbar 開始

小弟平常喜歡聽音樂,台灣音樂串流平台的始祖 KKBOX,從一推出就使用至今,也看到 KKBOX 在台灣的音樂圈越來越具有代表性,並且還有自己的風雲榜演唱會,真是...

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

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

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

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

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

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

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

技術 Day24 - CSS (5) - 圓弧、陰影

圓弧 border-radius:圓弧屬性,可設定 4 組,可以為 px 或是 % ,從左上開始,順時鐘為左上、右上、右下、左下 設定 1 個:代表全部通...

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

技術 Day14 - Flex (1) - 概述

Flex from:https://www.w3.org/TR/css-flexbox-1/#property-index Flex Box:是一個 (Bo...

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

技術 Day17 - Flex (4) - flex-wrap、flex-flow、內元件

延續昨日的部分,把外容器補完 flex-wrap flex-wrap:就是換行屬性,當內元件數量超過外容器大小時,就會超出 各屬性如下,假設 flex-di...

鐵人賽 自我挑戰組 DAY 14

技術 Day14 網頁前端-刻意練習(英雄頁面#1)

Day14 AC 英雄頁面#1 簡單小語 之前在學習AC時做鋼鐵人的練習,當時就想有一天一定要做其他角色然後放上其餘資訊,所以到了今天就毫不猶豫的練習一波,...

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

技術 鐵人賽 Day19 向 KKBOX致敬-用 ul li 寫一個左右欄的圖文列表

ul li 列表寫法用途真的很廣泛,能呈現的方式也非常多。 想要呈現的方式如下: HTML 程式碼如下 <div class="pref...

鐵人賽 自我挑戰組 DAY 19

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

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

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

技術 鐵人賽Day14-向 KKBOX 致敬,寫一個 aside 側邊欄位吧!播放器!

aside 終於進入最後一個部分,也就是播放器了,預計呈現樣式如下圖: 這次用了比較多技巧跟方式,慢慢的講解吧!! HTML 如下: <div clas...

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

技術 鐵人賽Day13-向 KKBOX 致敬,寫一個 aside 側邊欄位吧!加入 hover 效果!

進入 aside 中間部分的編寫,想要寫成下方畫面 程式碼滿簡單的,跟前面的程式碼差不多,但這次加入了畫面優化跟效果, 先來看一下 HTML 程式碼 &lt...

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

技術 Day18 - Flex (5) - 並排選單

做個簡單的並排選單練習 HTML 將基本列表完成,使用 <ul> 和 <li> 因為是要點擊連結,所以加入 <a> 最...

鐵人賽 Modern Web DAY 5
~網頁入門~ 系列 第 5

技術 Day05-HTML(1)

首先,我們先用一個簡單的範例來做介紹 二話不多說,先來看一下頁面的樣子,我再來慢慢講解 <!DOCTYPE html> 是用來聲明,這個文件是...

鐵人賽 Modern Web DAY 8

技術 [HTML] 關於 HTML

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

技術 Day38 網頁前端-持續練習(隨點隨到)

Day38 隨點隨到 簡單小語 看到這個menu的效果可以fixed在想要的位置上,覺得超酷,立刻查資料看看要如何做,才發現原來可以用JQuery去尋找滑鼠...

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

技術 Day15 - Flex (2) - 外容器、軸線

外容器 (Container) 參考 CodePen 連結,試著將註解的行數依描述進行調整 try01:要加display才會顯示 Flex 的效果 try0...

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

技術 Day23 - HTML 與 CSS (7) - Form 表單

Form 表單 <input>:說明 type 的單選與多選 radio:單選 同一群要定義 name,value 回傳值 描述可用 la...

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

技術 鐵人賽 Day18-向 KKBOX 致敬!用 ul li 寫一個新聞欄位!

這次要寫一個新聞欄位,是用 ul li 做成的圖文並茂,標題為連結,可以點擊的樣式 畫面如下呈現: 其實寫道今天有發現到 ul li 相當常被使用到,只是內容...

鐵人賽 Modern Web DAY 18

技術 [HTML] 圖解 Table 結構

雖說目前網頁排版已經不太會用表格來做,但偶有簡易的資料表要呈現時,還是會使用到 <table>呀! 不知道有沒有人跟我一樣常被 HTML Tabl...

鐵人賽 自我挑戰組 DAY 21

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

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

鐵人賽 自我挑戰組 DAY 18

技術 Day18 網頁前端-刻意練習(履歷表#3)

Day18 AC 履歷表#3 簡單小語 剛好切到這個版面時學習了基礎Github,因此也把連結放上來,算是小小練習,這個版面一看到就非常吸引我,原因到現在都...

鐵人賽 自我挑戰組 DAY 16

技術 Day16 網頁前端-刻意練習(履歷表#1)

Day16 AC 履歷表#1 簡單小語 很快地又來到履歷頁面的練習,想當初剛開始學習時就在思考要放什麼在履歷表中,到了現在還是一頭霧水,就是一直練習一直練習...

鐵人賽 自我挑戰組 DAY 28

技術 【Elementor 教學 28】- 如何推廣您的一頁式銷售網站

推廣是行銷最重要的部份,這篇文章比較長,可能要分數次來完成,下方有一些有用的參考文章對大家有幫助,容後我再更新更多的內容。 100 個安裝 WordPres...

鐵人賽 自我挑戰組 DAY 20

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

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

技術 Day37 網頁前端-持續練習(電光一閃)

Day37 電光一閃 簡單小語 為什麼叫電光一閃呢?因為每個在hover後都是快速閃一下,一時興起就來的電光一閃吧(衝吧皮卡丘,宅ing),看到好多樣式,於...