iT邦幫忙

html相關文章
共有 449 則文章

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

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

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

技術 如何調整游標 (caret) 位置

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

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

技術 Day21 - HTML 與 CSS (5) - Table 表格

Table 表格 <table> <tr>:代表 (table row),橫的 row <td>:代表 (tabl...

技術 Day36 網頁前端-持續練習(風琴萬種)

Day36 風琴萬種 簡單小語 原來做了這麼久的收合選單,這種樣式叫做手風琴選單啊!果然風琴萬種(什麼爛梗……)無知如小魯的我,看了下樣板覺得可以更改樣式,...

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

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

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

技術 Day35 網頁前端-持續練習(大俠漢堡)

Day35 大俠漢堡 簡單小語 大俠愛吃漢堡包,純正牛肉真是好;香港市民添口福,吃完就是乖寶寶,看到這麼多的漢堡選單樣式,就立刻想到這個標語及經典台詞,這次...

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

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

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

技術 Day34 網頁前端-持續練習(鈕紐捏捏)

Day34 鈕紐捏捏 簡單小語 看到這麼多的按鈕效果,真的是看得鈕鈕捏捏,忍不住就想挑戰想練習,總共16個效果,有些想破腦筋,有些熟能生巧,不斷的刷新就是看...

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

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

鐵人賽 Modern Web DAY 18

技術 [HTML] 圖解 Table 結構

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

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

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

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

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

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

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

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

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

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

技術 Day16 - Flex (3) - 軸線、justify-content 與 align-items

軸線 主軸 (main axis) 與交錯軸 (cross axis) 的關係如下表 二者一定是垂直關係 交錯軸只有上至下與左至右 2 種 主軸...

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

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

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

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

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

鐵人賽 自我挑戰組 DAY 30

技術 Day30 網頁前端-刻意練習(鐵人煉成)

Day30 鐵人煉成 中點 是中點不是終點,沒想到30天的挑戰成功了,在工作及休息時間找到平衡點,利用自己的時間加緊練習並學習,雖然目前的作品不是非常有競爭...

鐵人賽 自我挑戰組 DAY 28

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

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

鐵人賽 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...

鐵人賽 自我挑戰組 DAY 29

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

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

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

技術 Day13 - HTML 與 CSS (4) - 水平置中、box-sizing

區塊水平置中 使用 margin-left: auto和margin-right: auto 參考下例會發現區塊區域置中,然後只有最上層(父層) wrap...

鐵人賽 自我挑戰組 DAY 28

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

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

鐵人賽 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 小標題:h...

鐵人賽 自我挑戰組 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),這個head...

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

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

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

鐵人賽 自我挑戰組 DAY 25

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

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

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

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

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