iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

html/css/js的各種操作 系列

介紹寫網站時最重要的版面配置,和運用一些js可能會出現的龜毛事情又或是css,和使用boostrap/select2/java server

鐵人鍊成 | 共 30 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文 團隊NUTC_IMAC_WEB_桑貝比
DAY 11

[day11] html的before與after

偽元素介紹 偽元素能夠給予特定元素一些特殊的樣式,跟偽類的如何分辨?通常:是偽類,::是偽元素,不過大多數瀏覽器是會自動分辨的,而偽元素是一種修飾用的語法,例如...

2023-09-26 ‧ 由 oLunao 分享
DAY 12

[day12]認識position/outline

position position是定位用的屬性,預設為static當作一般物品,而其他分別有relation:相對定位元素,會以他在文本的位子來做位移,可使用...

2023-09-27 ‧ 由 oLunao 分享
DAY 13

[day13]認識 will-change/transform

will-change 這個東西的主要功能在於告知瀏覽器,為了確保你的動畫可以更順暢的行動,可以用這個告知瀏覽器你接下來要做甚麼事情,這樣瀏覽器可以在你動作前先...

2023-09-28 ‧ 由 oLunao 分享
DAY 14

[day14]瀏覽器前綴與transition

瀏覽器前綴 你在某些地方看別人的css樣式的時候或許會看到 -o-transition -webkit-transition -moz-transition -...

2023-09-29 ‧ 由 oLunao 分享
DAY 15

[day15]認識@keyframes與animation

OK,看了那麼多個跟css有關的屬性,接下來就是實用了,並且會在加入一些可讓css動畫更靈活的屬性 @keyframes @keyframes是用於你動畫的步驟...

2023-09-30 ‧ 由 oLunao 分享
DAY 16

[day16]用 :nth-child 做css動畫

:nth-child 是一個偽類,你可能會在tr/td或是抽去欄位時會用到,但你可曾有想過拿他來做css動畫呢? :nth-child可以拿來抽取欄位的編號,那...

2023-10-01 ‧ 由 oLunao 分享
DAY 17

[day17]css動畫應用 下拉式選單

前面幾天廢話了那麼多,都在摸基礎使用,今天就拿來應用吧,運用的對象便是最常使用的下拉式選單 打算展現出來的效果,當碰到時會依照順序1/2/3/4/5的掉下來並且...

2023-10-02 ‧ 由 oLunao 分享
DAY 18

[day18]圖示icon Font Awesome

在寫網頁的時候時常會有一堆小圖示需要插入這就是icon 今天要來分享我覺得很好用的icon來源,名為Font Awesome link的連結直接搜尋Font A...

2023-10-03 ‧ 由 oLunao 分享
DAY 19

[day19]在網頁中放入影片<video><iframe>

在網頁中偶爾會插入影片,而其中有video與iframe兩種,一個是從本地端獲取,一個是外部嵌入的 video viedo需要自己內部本地端有影片連結才可以使用...

2023-10-04 ‧ 由 oLunao 分享
DAY 20

[day20] 認識javaScript 和var/let/const 擅用console.log()

javaScript html掌控網頁的結構,css負責網頁的樣貌,javaScript負責操控使用者與網頁的互動狀態,例如鍵盤的上下左右/滑鼠的點擊等等 雖然...

2023-10-05 ‧ 由 oLunao 分享