iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 1 留言 669 瀏覽

鐵人賽 Modern Web DAY 8

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 9 篇

技術 #07 CSS 基本語法 & 權重介紹

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 C...

Eva Chen ‧ 2023-09-23

0 Like 0 留言 294 瀏覽

鐵人賽影片教學 DAY 7

一起來實作響應式網頁設計系列第 7 篇

技術一起來實作響應式網頁設計：CSS的各種選擇器 Day7

影片教學重點回顧昨天的教學影片當中，我們了解如何轉寫CSS來套用到指定的選擇器當中，而昨天我們使用HTML的元素作為選擇器來套用，今天將要介紹其他選擇器，...

Ericostco ‧ 2023-09-22

0 Like 0 留言 1125 瀏覽

鐵人賽 Vue.js DAY 8

Vue3歡樂套件箱耶系列第 8 篇

技術開箱8:RWD斷點設計大公開~TailwindCSS設定範例

本篇開箱是TailwindCSS預覽工具以及針對Tailwind CSS斷點設定擋調整由於前兩篇是介紹WindowResize時要抓取的一些行為，這需求都...

切版姐姐 ‧ 2023-09-23

1 Like 0 留言 1890 瀏覽

鐵人賽 Modern Web DAY 1

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 1 篇

技術 #00 文章目錄 / 參賽前言 | Super Easy CSS

本系列同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 參賽前言本系列文章目標是學習 C...

Eva Chen ‧ 2023-09-16

3 Like 0 留言 800 瀏覽

技術學習 CSS 中的 :where() 與 :is() 函式

文章出處 :where() 函式接受一個選擇器列表作為參數，允許你編寫更少的代碼並同時設置它們的樣式。本篇文章我們來討論 :where() 的偽類函式，並...

Wayne ‧ 2023-02-13

0 Like 0 留言 1076 瀏覽

鐵人賽自我挑戰組 DAY 22

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列第 22 篇

技術 Day 22：客製我要的動畫【Tailwind – Animation 篇】

上一篇我們講到了 transition，但 transition 只是簡單的給予簡易的動畫，實際上能調整的只有整體動畫秒數，但如果我們想要將動畫切分成關鍵影格的...

linlaose ‧ 2022-10-07 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 833 瀏覽

鐵人賽 Modern Web DAY 7

轉職工程師前的技能學習！沒記起來就偷看筆記吧～系列第 7 篇

技術 Bootstrap RWD應用，製作簡易「切換頁面」

製作簡單點選切換互動，搭配Bootstrap就能輕鬆有RWD的效果呦！此範例需引用Bootstrap, fontawesome, jQuery呦。原頁面比例...

Alice CH ‧ 2022-09-21

0 Like 0 留言 702 瀏覽

鐵人賽影片教學 DAY 17

從筆記語法帶入網頁設計系列第 20 篇

技術 Day 20 CSS 色彩

前言在昨天我們也正地進入了CSS的部分，我們這邊很不一樣的就是我們先帶大家進入色彩的部分，那我們正式進入今天的主題~ 前景色 /* color name */...

馬鈴薯 ‧ 2022-09-21

0 Like 0 留言 1718 瀏覽

鐵人賽 Modern Web DAY 6

轉職工程師前的技能學習！沒記起來就偷看筆記吧～系列第 6 篇

技術用 HTML, CSS, jQuery來做「動態進度條」

這次的有用到jQuery，讓進度條動起來！ HTML 有使用到data-寫法～ <div class="tool-chart" da...

Alice CH ‧ 2022-09-20

0 Like 0 留言 761 瀏覽

鐵人賽 Modern Web DAY 5

轉職工程師前的技能學習！沒記起來就偷看筆記吧～系列第 5 篇

技術用偽元素改寫input radio，自己設計「單選框」

美化UI小技巧，讓單選框可以更符合設計樣式～ HTML <input type="radio" name="radio&...

Alice CH ‧ 2022-09-19

0 Like 0 留言 1195 瀏覽

鐵人賽 Modern Web DAY 4

轉職工程師前的技能學習！沒記起來就偷看筆記吧～系列第 4 篇

技術如何用HTML與CSS製作出「toggle開關鍵」

iphone常用的開關鍵，其實很簡單！ HTML 使用input的checkbox <input id="toggle" class=...

Alice CH ‧ 2022-09-18

0 Like 0 留言 1374 瀏覽

鐵人賽 Modern Web DAY 3

轉職工程師前的技能學習！沒記起來就偷看筆記吧～系列第 3 篇

技術用HTML與CSS製作出「下拉選單」！

input原本的下拉選單太過擁擠，想製作出好看的下拉選單可以參考這邊呦～ HTML 先製作選單input值，讓input內文字能夠顯示出所選選項。 <di...

Alice CH ‧ 2022-09-17

1 Like 2 留言 1809 瀏覽

鐵人賽 Modern Web DAY 8

【每天5分鐘】學前端系列第 8 篇

技術 Day08【每天5分鐘】學前端 | CSS 簡介

最近發了月餅的圖，朋友問我「退休和財富自由是一樣的嗎？」我說：財富自由也可以不退休呀，退不退休可以是個人興趣選擇～（不過財富不自由可能就退不了休了）欸等等，...

Olivia ‧ 2022-09-09

0 Like 0 留言 736 瀏覽

技術 <新手複習向> <CSS學習第1集/>:{簡單介紹與常見屬性;}

CSS是啥？全名為(Cascading Stylesheets)，谷哥中文是階層樣式表，是一種風格頁面語言(style sheet language)，能讓...

前端小小咖 ‧ 2022-04-09

0 Like 0 留言 2317 瀏覽

鐵人賽 Modern Web DAY 25

30天學會HTML＋CSS，製作精美網站系列第 25 篇

技術網頁動起來-30天學會HTML＋CSS，製作精美網站

在設計網頁時通常會加一些動畫特效，吸引使用者的目光及添加與使用者的互動性。過去製作動畫時以Flash為主，CSS3也可以建立動畫，不再只能用JavaScript...

原來可以這樣做 | Sunny ‧ 2021-10-10

0 Like 0 留言 1567 瀏覽

鐵人賽自我挑戰組 DAY 27

從零開始前端學習(HTML、CSS、JavaScript) 系列第 27 篇

技術 Day 27 CSS3 < 動畫 animation>

動畫 (animation) 可通過設置多個節點來精確控制一個或一組動畫，常用來實現複雜的動畫效果。相比較過渡，動畫可以實現更多變化、更多控制，連續自動播放等...

a0265392_lin ‧ 2021-10-07

0 Like 0 留言 2504 瀏覽

鐵人賽自我挑戰組 DAY 26

從零開始前端學習(HTML、CSS、JavaScript) 系列第 26 篇

技術 Day 26 CSS3 < 3D轉換 transform>

3D轉換跟2D轉換不同的是使用三維坐標系(多了Z軸座標) 1.三維坐標系是由三個軸共同組成的 X軸 : 水平向右注意: X軸右邊是正值左邊是負值 Y軸 :...

a0265392_lin ‧ 2021-10-06

0 Like 0 留言 2099 瀏覽

鐵人賽自我挑戰組 DAY 25

從零開始前端學習(HTML、CSS、JavaScript) 系列第 25 篇

技術 Day 25 CSS3 < 2D轉換 transform>

轉換 (transform)實現元素的位移、旋轉、縮放等效果，可以簡單理解為變形。移動 translate 旋轉 rotate 縮放 scale 1.2D...

a0265392_lin ‧ 2021-10-05

0 Like 0 留言 864 瀏覽

鐵人賽自我挑戰組 DAY 24

從零開始前端學習(HTML、CSS、JavaScript) 系列第 24 篇

技術 Day 24 CSS3 < 過渡 transition>

過渡 (transition) 是可以在不使用Flash動畫或JavaScript的情況下，當元素從一種樣式變換成另一種樣式時為元素添加效果，經常和 :hove...

a0265392_lin ‧ 2021-10-04

0 Like 0 留言 894 瀏覽

鐵人賽自我挑戰組 DAY 23

從零開始前端學習(HTML、CSS、JavaScript) 系列第 23 篇

技術 Day 23 CSS3 < 目標選擇器>

CSS3新增的目標選擇器類型: 1.屬性選擇器屬性選擇器可以根據元素特定屬性來選擇元素，這樣就可以不用藉助於類或者ID選擇器 MDN Web Docs 屬性選...

a0265392_lin ‧ 2021-10-03

0 Like 0 留言 5218 瀏覽

鐵人賽 Modern Web DAY 12

30天學會HTML＋CSS，製作精美網站系列第 12 篇

技術網頁顏色-30天學會HTML＋CSS，製作精美網站

好的網站除了內容傳達之外，顏色是進入網站的第一印象，可以針對文字大小、框線、背景色...等做變化，是網站中不可或缺的樣式，現在讓我們來看看顏色及背景的使用技巧吧...

原來可以這樣做 | Sunny ‧ 2021-09-27

0 Like 0 留言 2914 瀏覽

鐵人賽 Modern Web DAY 10

30天學會HTML＋CSS，製作精美網站系列第 10 篇

技術網頁命名規則-30天學會HTML＋CSS，製作精美網站

在撰寫HTML及CSS時，好的命名要具備可讀性，一眼就能知道這區塊的作用是什麼，也方便日後的維護管理，今天就要來介紹三種CSS的命名規則 OOCSS（Objec...

原來可以這樣做 | Sunny ‧ 2021-09-25

1 Like 1 留言 6844 瀏覽

鐵人賽 Modern Web DAY 10

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

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

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

切版姐姐 ‧ 2021-09-25

0 Like 0 留言 5241 瀏覽

鐵人賽 Modern Web DAY 9

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

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

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

切版姐姐 ‧ 2021-09-24

1 Like 0 留言 3789 瀏覽

鐵人賽 Modern Web DAY 8

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

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

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

切版姐姐 ‧ 2021-09-23

1 Like 0 留言 1815 瀏覽

鐵人賽 Modern Web DAY 6

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

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

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

切版姐姐 ‧ 2021-09-21

0 Like 0 留言 5164 瀏覽

鐵人賽 Modern Web DAY 5

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

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

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

切版姐姐 ‧ 2021-09-20

0 Like 0 留言 1855 瀏覽

鐵人賽自我挑戰組 DAY 7

從HTML到Python爬蟲的30天之旅系列第 7 篇

技術 Day 07：專案01 - 超簡單個人履歷06 | 實作

我們先回顧一下個人履歷的成品，學完HTML和CSS後，是否能順利做出來呢? Reset CSS 其實Chrome瀏覽器內建就有一些CSS的樣式，像超連結是藍字底...

Andy Chiang ‧ 2021-09-12

0 Like 0 留言 2149 瀏覽

鐵人賽自我挑戰組 DAY 6

從HTML到Python爬蟲的30天之旅系列第 6 篇

技術 Day 06：專案01 - 超簡單個人履歷05 | CSS版面佈局、Flex

昨天講完的CSS的文字和區塊屬性後，今天要接續介紹版面佈局的屬性，以及一個非常好用的佈局容器 - Flex，上完這堂課，你的網頁佈局就可以更加彈性囉~ 那麼，我...

Andy Chiang ‧ 2021-09-11

0 Like 0 留言 2636 瀏覽

鐵人賽自我挑戰組 DAY 5

從HTML到Python爬蟲的30天之旅系列第 5 篇

技術 Day 05：專案01 - 超簡單個人履歷04 | CSS文字、區塊屬性

大家早安~昨天介紹完CSS的語法和選擇器後，今天要來實際告訴大家究竟有哪些常見屬性可以使用呢? CSS文字文字顏色 color屬性用於設定文字顏色，屬性值可以...

Andy Chiang ‧ 2021-09-10

技術 #07 CSS 基本語法 & 權重介紹

技術 一起來實作響應式網頁設計：CSS的各種選擇器 Day7

技術 開箱8:RWD斷點設計大公開~TailwindCSS設定範例

技術 #00 文章目錄 / 參賽前言 | Super Easy CSS

技術 學習 CSS 中的 :where() 與 :is() 函式

技術 Day 22：客製我要的動畫【Tailwind – Animation 篇】

技術 Bootstrap RWD應用，製作簡易「切換頁面」

技術 Day 20 CSS 色彩

技術 用 HTML, CSS, jQuery來做「動態進度條」

技術 用偽元素改寫input radio，自己設計「單選框」

技術 如何用HTML與CSS製作出「toggle開關鍵」

技術 用HTML與CSS製作出「下拉選單」！

技術 Day08【每天5分鐘】學前端 | CSS 簡介

技術 <新手複習向> <CSS學習第1集/>:{簡單介紹與常見屬性;}

技術 網頁動起來-30天學會HTML＋CSS，製作精美網站

技術 Day 27 CSS3 < 動畫 animation>

技術 Day 26 CSS3 < 3D轉換 transform>

技術 Day 25 CSS3 < 2D轉換 transform>

技術 Day 24 CSS3 < 過渡 transition>

技術 Day 23 CSS3 < 目標選擇器>

技術 網頁顏色-30天學會HTML＋CSS，製作精美網站

技術 網頁命名規則-30天學會HTML＋CSS，製作精美網站

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

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

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

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

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

技術 Day 07：專案01 - 超簡單個人履歷06 | 實作

技術 Day 06：專案01 - 超簡單個人履歷05 | CSS版面佈局、Flex

技術 Day 05：專案01 - 超簡單個人履歷04 | CSS文字、區塊屬性

標記使用者

技術一起來實作響應式網頁設計：CSS的各種選擇器 Day7

技術開箱8:RWD斷點設計大公開~TailwindCSS設定範例

技術學習 CSS 中的 :where() 與 :is() 函式

技術用 HTML, CSS, jQuery來做「動態進度條」

技術用偽元素改寫input radio，自己設計「單選框」

技術如何用HTML與CSS製作出「toggle開關鍵」

技術用HTML與CSS製作出「下拉選單」！

技術網頁動起來-30天學會HTML＋CSS，製作精美網站

技術網頁顏色-30天學會HTML＋CSS，製作精美網站

技術網頁命名規則-30天學會HTML＋CSS，製作精美網站

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

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

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

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

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