iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

快搭上姐姐的`微`前端便車 系列

主要分享姐姐我在切版的工作當中,常見會處理到web版面技巧-以css及js/jq為例,並希望透過實際的範例應用,讓剛好需要做這項網頁互動的新手們有方向。◉‿◉

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文
DAY 1

第1車廂-姐姐的`微`前端便車~開跑啦!

第一次第一天開賽,不免俗要來個蹦蹦,來個自介拉! 一個與資訊八竿子打不著的女子, 只是覺得被問說「ㄟ~你在做什麼的阿?」「喔~寫程式的工程師阿」聽起來很高級,...

2021-09-16 ‧ 由 切版姐姐 分享
DAY 2

第2車廂-砸重金才懂得:HTML標籤

本篇重點在於告訴新手們,必懂得HTML標籤、觀念,並且推薦一些文章,讓各位可以往此方向去了解 想當初的自己在資策會學習網頁的地圖就是.... HTML結構/...

2021-09-17 ‧ 由 切版姐姐 分享
DAY 3

第3車廂-學會切版保證班?CSS的寶藏圖

本篇公開自身學會切版的秘密武器是...,及分享學習CSS當中最重要的css盒模型概念 昨天文章中我有提到自己在資策會學習網頁的地圖就是.... HTML結構...

2021-09-18 ‧ 由 切版姐姐 分享
DAY 4

第4車廂-老師在說你有沒有在聽?淺談CSS選擇器及優先權

怎麼選取到元素改變網頁原有外觀呢?本篇主要整理CSS選取器分類及CSS優先權 切版學習途中,你是否有這樣的疑問? 要怎麼選才能選到我要的元素改變? 認識選...

2021-09-19 ‧ 由 切版姐姐 分享
DAY 5

第5車廂-一切都是假的!::before應用篇

本篇介紹偽元素系列中的::before/::after概念及實例 假的真不了,真的假不了~一起來看看偽元素系列中的::before/::after唄! 昨...

2021-09-20 ‧ 由 切版姐姐 分享
DAY 6

第6車廂-恩~人家被勾到了拉:checked應用篇

本篇介紹偽類中的狀態選取器:checked應用篇:做一個開關按鈕 :checked介紹 :checked是分類在本刊第4篇選取器 > 偽類別(pse...

2021-09-21 ‧ 由 切版姐姐 分享
DAY 7

第7車廂-討厭~叫人家開要幹嘛?觸發check事件應用篇

本篇延續第六篇按鈕開關樣板,來觸發之後的行為 昨天做了一個開關,那要怎麼透過科好的按鈕,來判斷之後要做的行為呢? 並以原生js來判斷,平常都是用jq寫......

2021-09-22 ‧ 由 切版姐姐 分享
DAY 8

第8車廂-抖動畫面流出!你真的會:hover嗎?

本篇介紹版面使用:hover會遇到的雷點,以及提供解決方式參考 還記的,我們在第6篇有提到狀態選擇器的:check,今天要來講講另外一種好用的狀態選擇器的:...

2021-09-23 ‧ 由 切版姐姐 分享
DAY 9

第9車廂-使用content:attr()實現tableRWD應用篇

本篇介紹使用content:attr()來抓table的th資料,實現讓小螢幕的table內容閱讀體驗更棒棒! 還記的我們在第5篇有提到::before須搭...

2021-09-24 ‧ 由 切版姐姐 分享
DAY 10

第10車廂-你今天table了嗎?tableRWD+簡易分頁應用篇

本篇延續<第9車廂-使用content:attr()實現tableRWD應用>的版,透過程式自動產生假title<th>,並製作簡單的分頁功能...

2021-09-25 ‧ 由 切版姐姐 分享