iT邦幫忙

網頁教學相關文章
共有 178 則文章
鐵人賽 Modern Web DAY 29

技術 第29車廂-倒數一篇!人人有獎~抽獎抽起來了各位!

本篇分享自製一個簡易抽獎程式碼啦!---以JQ為例 ▼完成圖如下 為了讓大家比較好懂,程式碼用這張圖解釋 附上程式碼 https://codepen....

鐵人賽 Modern Web DAY 28

技術 第28車廂-vw很好用我知道!但不小心就踩雷捏!

本篇介紹CSS單位,需要小心使用的觀念 單位介紹 %: 相對父層的大小比例 vw(view port width):相對於視窗的寬; vh(view p...

鐵人賽 Modern Web DAY 27

技術 第27車廂-關於訊息視窗:bootstrap5Model應用篇

本篇介紹Bootstrap5 UI的Modal(彈出互動視窗)呼叫方式 起手式 <link href="https://cdn.jsde...

鐵人賽 Modern Web DAY 26

技術 第26車廂-眼睛眨啊眨~登入密碼的顯示/隱藏應用篇

本篇介紹現行登入密碼欄位,旁邊都有一個小眼睛,是如何點一下就秀出密碼的呢? ▼ 完成圖如下 首先先準備我們的小眼睛, Font Awesome 使用方式...

鐵人賽 Modern Web DAY 25

技術 第25車廂-讓pdf檔有翻頁效果!pdf.js+turn.js應用篇

本篇續第23篇介紹pdf.js讓前端可以看pdf檔及第24車廂介紹翻頁效果套件turn.js,整合兩篇將pdf檔翻頁起來! 看本篇之前,需看一下本系列文...

鐵人賽 Modern Web DAY 23

技術 第23車廂-在網頁中預覽pdf—pdf.js簡易版應用篇

本篇介紹JS插件pdf.js簡易應用篇 今天介紹透過插件pdf.js在網頁中直接瀏覽pdf 官網: https://mozilla.github.io/p...

鐵人賽 Modern Web DAY 22

技術 第22車廂-模仿大賽—仿IT邦幫忙:Sticky Nav應用篇

本篇介紹固定navBar應用篇—仿IT邦幫忙 每進入iT邦幫忙網站,忍不住都會滑一下卷軸吧?上方header算是常見的網頁效果, 所以今天要來模仿一下,iT...

鐵人賽 Modern Web DAY 21

技術 第21車廂-input全選/取消全選功能底加啦!

本篇介紹常用的全選/取消全選功能---jquery應用篇 在input的世界裡,最常做的就是抓值/取值,不然就是做全選/取消全選功能吧? 在一般文章介紹裡...

鐵人賽 Modern Web DAY 20

技術 第20車廂-你知道slick.js輪播套件可以這樣用?

本篇介紹使用slick.js輪播套件應用在兩列以上的輪播功能以及介紹slickGoTo()方法 線上輪播套件有很多,自己常用的除了有slick,還有Owl...

鐵人賽 Modern Web DAY 19

技術 第19車廂-娃!網頁必備的響應式輪播效果怎麼刻?

本篇分享簡易版的RWD的輪播效果功能 上一篇我們有簡約的使用tab做輪播,但一般想做的輪播應該會是做在Banner的,但偏偏新手的我,想在網路上找要不就是用...

鐵人賽 Modern Web DAY 18

技術 第18車廂-動ㄘ動ㄘ!tab頁籤切換+輪播應用篇

本篇介紹透過bootstrap4直接使用tab切換功能,並且實作tab切換自動循環播放 我們在昨篇<第17車廂-超實用!tab頁籤切換:data-應用...

鐵人賽 Modern Web DAY 17

技術 第17車廂-超實用!tab頁籤切換:data-*應用篇

本篇介紹常用的tab切換功能,使用js、jq、Vue3如何做到,以及說明若一個版面會出現一個以上需要切換時,該注意什麼? 還記的我們在<第15車廂-d...

鐵人賽 Modern Web DAY 15

技術 第15車廂-data-*的坑?data-*介紹篇

本篇介紹data-*常用抓取方法,以及需注意的地方 我們在<第9車廂-使用content:attr()實現tableRWD應用篇>,其實已經有用...

鐵人賽 Modern Web DAY 14

技術 第14車廂-點開看更多?tableRWD應用篇

本篇延續手刻tableRWD應用,將範例配合選取器改為響應式隱藏欄位並能展開 上幾篇介紹table神器後,是不是已經忘了我們手刻table系列哩? 本系列...

鐵人賽 Modern Web DAY 11

技術 第11車廂-table界的神器!DataTables介紹篇(1)

延續上篇的table介紹,原本功能都要自己寫,那有沒有工具可以直接套用呢?有的!那就是神器DataTables拉! 簡介 DataTables 是 jQue...

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web

達標好文 技術 Top、Right、Bottom、Left - 金魚都能懂的CSS必學屬性

Top 、Right 、Bottom 、Left 4個 CSS 屬性是搭配 position 一起使用的,倘若沒有 position 的話,這4個屬性是不會有...

鐵人賽 影片教學 DAY 30

技術 未完!待續?-金魚都能懂的Bootstrap5網頁框架開發

Bootstrap已是目前全球被大量網頁開發者使用的一個網頁UI框架了,其特色在於使用簡單,開發快速,自訂化功能彈性簡單,不管是前端開發或是後端介面,都是非常適...

鐵人賽 Modern Web DAY 30

達標好文 技術 position - 金魚都能懂的CSS必學屬性

position 這個屬與 display 一樣,實在是一個太重要的屬性了,同樣的要在一個篇幅中講完其實是不可能的事情,它可以說是目前金魚都能懂的 CSS 必學...

鐵人賽 Modern Web DAY 29

技術 Display - 金魚都能懂的CSS必學屬性

display 這個屬性實在是一個太重要的屬性了,要在一個篇幅中講完其實是不可能的事情,它可以說是目前金魚都能懂的 CSS 必學屬性中,排版類屬性內最重要的一個...

鐵人賽 影片教學 DAY 29

技術 神速改出專屬你的 Bootstrap -金魚都能懂的Bootstrap5網頁框架開發

Bootstrap已是目前全球被大量網頁開發者使用的一個網頁UI框架了,其特色在於使用簡單,開發快速,自訂化功能彈性簡單,不管是前端開發或是後端介面,都是非常適...

鐵人賽 影片教學 DAY 28

技術 Checkbox 與 Radio 組件-金魚都能懂的Bootstrap5網頁框架開發入門

Bootstrap已是目前全球被大量網頁開發者使用的一個網頁UI框架了,其特色在於使用簡單,開發快速,自訂化功能彈性簡單,不管是前端開發或是後端介面,都是非常適...

鐵人賽 Modern Web DAY 28

達標好文 技術 Box-sizing - 金魚都能懂的CSS必學屬性

Box-sizing 這個屬性是一個新時代的屬性,也是目前這時代網頁入門必備的一項常識,box-sizing 的作用是控制 width 與 height 作用的...

鐵人賽 Modern Web DAY 27

技術 margin & padding - 金魚都能懂的CSS必學屬性

margin 與 padding 這兩個屬性應該是所有新手必學的兩大屬性,也是網頁入門必備的一項常識,margin 與 padding 分別控制物件的外部距離與...