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

0 Like 0 留言 2075 瀏覽

鐵人賽 Modern Web DAY 8

我說那個手機版系列第 8 篇

技術 [Day 8] Flexbox 的使用姿勢 Part 2

流當我們定義好一個 flex 的容器時，昨天有說過了，預設會使用 row 這個設定來定義容器的流向。所以，在容器定義好的當下，我們把基本的容器設定展開來看，另...

閃光洽 ‧ 2020-09-22

0 Like 1 留言 2032 瀏覽

鐵人賽 Modern Web DAY 7

我說那個手機版系列第 7 篇

技術 [Day 7] Flexbox 的使用姿勢 Part 1

簡單介紹雖然說 Flexbox 已經推出好一段時間了，但說實在話我自己好像沒有特別著墨。當然，我覺得如果可以的話，去看一下 Amos 的課程，一定比看我在這邊...

閃光洽 ‧ 2020-09-21

0 Like 0 留言 1556 瀏覽

鐵人賽 Modern Web DAY 6

我說那個手機版系列第 6 篇

技術 [Day 6] 從響應式的那個東西說起

很久很久以前想當年 Photoshop 可以把圖片輸出成網頁用的東西的時候，你會發現有兩種模式， <table> <tr>...

閃光洽 ‧ 2020-09-20

0 Like 0 留言 3010 瀏覽

鐵人賽 Modern Web DAY 5

我說那個手機版系列第 5 篇

技術 [Day 5] 從內容開始看格線系統

內容為王如果以現在的趨勢來看，應該叫「廣告為王」。當然我不會設計，所以也就不會設計廣告。網站主要的目的，是要傳達內容，所以關於文件流、斷點、區塊設計這些...

閃光洽 ‧ 2020-09-19

0 Like 0 留言 1659 瀏覽

鐵人賽 Modern Web DAY 4

我說那個手機版系列第 4 篇

技術 [Day 4] 給我一個 Box

區塊我們在開天闢地的時候，網頁就是從區塊開始。 <header>  </header> <...

閃光洽 ‧ 2020-09-18

0 Like 1 留言 2679 瀏覽

鐵人賽 Modern Web DAY 3

我說那個手機版系列第 3 篇

技術 [Day 3] 我是誰，我在哪裡

回到未來網頁在很久很久以前，是使用 HTML 來製作的，約莫過了 20 幾個年頭，現在的網頁還是 HTML 製作的。只是版本號的推演進度比較慢，目前來到 HT...

閃光洽 ‧ 2020-09-17

3 Like 0 留言 2488 瀏覽

鐵人賽 Modern Web DAY 2

我說那個手機版系列第 2 篇

技術 [Day 2] 那個網頁設計

網頁有什麼粗略上來看，目前市面上瀏覽器打開的那個「畫面」，就屬於我們俗稱的「網頁」或是「網站」。而且不難發現每次去到各種網站，最常見的大概就是廣告。上方廣告橫...

閃光洽 ‧ 2020-09-16

1 Like 2 留言 2757 瀏覽

鐵人賽 Modern Web DAY 1

我說那個手機版系列第 1 篇

技術 [Day 1] 我說那個手機版

說在最前面網頁這種萬年老埂應該是沒什麼人會看，會想要撰寫這種偏冷門的東西，純粹是個人比較邊緣的關係。目前市面上各種關於網頁製作、切版的工具五花八門，真的會想手...

閃光洽 ‧ 2020-09-15

4 Like 1 留言 6881 瀏覽

達標好文技術領進前端門，修行在個人：一變應萬變的響應式網頁設計(2) - 常見版型佈局設定

禁止顯示x軸法則在開發響應式網頁時最切記的就是不能出現x軸，為什麼呢？當使用者瀏覽時，若畫面有x軸也有y軸時，使用者必須上下左右滑動去瀏覽，這樣對於使用者體驗...

yaling_0616 ‧ 2020-06-30

2 Like 0 留言 3006 瀏覽

技術領進前端門，修行在個人：一變應萬變的響應式網頁設計(1) - 基本環境、觀念

基本環境建立因為各個不同的手機有不同的寬度，如下圖如果要符合每個不同的解析度去做開發，會導致開發上非常困難，所以需要加入以下這段語法 <meta nam...

yaling_0616 ‧ 2020-06-23

2 Like 0 留言 3099 瀏覽

技術 [鼠年全馬鐵人挑戰] Week13 - 超新手學習筆記：如何開始撰寫 RWD

又過了一週啦~一樣是超忙的一週~~下班回家努力練習切版直播的作業，不過這次的版型比較複雜所以卡關了QQ真的是燒腦燒到一個極點這次的作業除了 PC 版之外，還需練...

a841722 ‧ 2020-05-03

1 Like 1 留言 2098 瀏覽

技術【前端自學之路】如何開始?

大家好!我是Steven，現在是一位下班時用閒暇時間自學前端技術的上班族，今天想分享一些我在學習過程中所領悟到的事，並且分享給你們，首先今天想聊聊如何開啟前端自...

steven841221 ‧ 2020-04-06

0 Like 0 留言 6510 瀏覽

徵才【台北市】前端工程師(近捷運松江南京站)-APO

**我們需要您具備以下能力： 1、從事前端開發2年及以上，熟悉各種前端技術，包括HTML/CSS/JavaScript/Node.JS等2、具備跨終端的前端開發...

TOM ‧ 2020-03-03

1 Like 1 留言 10634 瀏覽

技術 RWD－off-canvas 側邊選單練習

這次來練習一個比較進階的練習，是 RWD + off-canvas 側邊選單練習這次練習會使用到 jQuery 的 addClass 跟 removeClas...

Tim Hsu ‧ 2019-10-29

1 Like 0 留言 6050 瀏覽

技術 RWD 漢堡選單練習 toggleClass

這次的漢堡選單練習，是要讓選單在手機頁面時加上 JS，讓選單有互動的效果，所以需要了解一點 jQuery 的運作方式，可以去找一下相關資料，或許可以也可以來這...

Tim Hsu ‧ 2019-10-21

2 Like 1 留言 3924 瀏覽

鐵人賽自我挑戰組

破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師系列第 32 篇

技術如何用 Sass 實現類似 Bootstrap 4 的格線系統

★ 首先這篇文章適合以下背景的人閱讀： 1.大概了解什麼是格線系統，甚至有用過2.有使用過 Sass 管理及撰寫 CSS，並且對基礎 Sass 語法 (SCS...

Alec ‧ 2019-10-18

2 Like 0 留言 2615 瀏覽

鐵人賽自我挑戰組

破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師系列第 31 篇

技術關於購物車頁面的 RWD 移動概念

鐵人賽結束了，但說過了寫文章是 to be continued 的，今天就要先來記錄一下這個購物車頁面的 RWD 移動概念。回歸正常學習進度，檢視了一下作業與...

Alec ‧ 2019-10-18

0 Like 0 留言 6623 瀏覽

技術 RWD 漢堡選單練習-讓漢堡顯示在 header 上

這次來練習響應式網站很常見到的漢堡選單但漢堡選單要寫的內容有點長，就分段來記錄一下這個過程。這次要顯示的內容如下圖如果在 pad 尺寸顯示會如下要注意如...

Tim Hsu ‧ 2019-10-16

0 Like 0 留言 2586 瀏覽

鐵人賽 Modern Web DAY 16

用Angular打造完整後台系列第 16 篇

技術 day16 List常見問題(一)

簡述列表中經常會遇到的問題大約幾下幾種：當後台需要RWD，但欄位太多了，縮起來實在是太難看。使用materia提供的MatPaginatorMod...

Yating Chang ‧ 2019-10-01

0 Like 0 留言 950 瀏覽

鐵人賽 Modern Web DAY 9

淺談web 系列第 9 篇

技術鐵人賽DAY9-RWD

一、何謂RWD響應式網頁設計(Responsive web design,RWD)是一種網頁設計的概念，由Ethan Marcotte於2010年時提出此，透過...

鴻勳 ‧ 2019-09-25 ‧團隊紅蟳當兵等他開賽

0 Like 0 留言 1047 瀏覽

鐵人賽自我挑戰組 DAY 9

網頁學習紀錄系列第 9 篇

技術鐵人賽Day9-體驗不好的 RWD

這禮拜因為小孩公托有腸病毒，加上工作繁忙，這兩天真是超級累，除了把握時間來看一下技術社團與看書外，已無暇寫程式，這幾天太太跟我說她上班的地方所製作的網頁很不好用...

Tim Hsu ‧ 2019-09-12

0 Like 0 留言 2324 瀏覽

技術使用更親民！財政部中區國稅局網站全面採用「響應式」網頁設計

政府與公家機關的網站能提供民眾許多便民資訊，因此時常被使用，但因應現在多數人都習慣直接使用行動裝置閱覽，這時便容易出現問題：不適應手機規格的網頁常常需要民眾自行...

meimel ‧ 2019-02-18

5 Like 0 留言 5072 瀏覽

鐵人賽影片教學 DAY 23

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 23 篇

技術金魚都能懂網頁設計入門 : RWD選單(鐵人賽第二十三天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧媒體查詢設定方式選單控制方式 CSS選取器使用方式行動優先還是桌機...

CSScoke ‧ 2018-11-07 ‧團隊阿莫斯の推坑教

2 Like 0 留言 4034 瀏覽

鐵人賽影片教學 DAY 22

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 22 篇

技術金魚都能懂網頁設計入門 : RWD排版試做(鐵人賽第二十二天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧從手機先設定還是桌機先設定如何設定HTML結構如何設定CSS 圖片...

CSScoke ‧ 2018-11-06 ‧團隊阿莫斯の推坑教

2 Like 0 留言 4777 瀏覽

鐵人賽影片教學 DAY 21

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 21 篇

技術金魚都能懂網頁設計入門 : RWD入門(鐵人賽第二十一天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧各種裝置的網頁寬度要怎麼設定製做RWD時會遇到的問題媒體查詢的設定...

CSScoke ‧ 2018-11-05 ‧團隊阿莫斯の推坑教

8 Like 3 留言 7174 瀏覽

鐵人賽自我挑戰組 DAY 17

學什麼就寫什麼，知道什麼就分享什麼系列第 17 篇

技術與工程師的協作之路-RWD才不是你想的那樣！

前言在很多年前（不要問是幾年也不要問年紀！）初次聽到RWD這個詞的時候就覺得實在是很新很潮！正好主管說想蓋個部落格來衝衝SEO我就立馬毛遂自薦～說我想嘗試看看...

Wen Chien ‧ 2018-10-31

5 Like 1 留言 19998 瀏覽

鐵人賽自我挑戰組 DAY 7

前端之 " wow~原來是這樣啊 " 系列第 7 篇

技術 Day7 利用純 HTML / CSS 來一個好吃的手作漢堡

考慮 RWD 網站中，一定要來一個美味的漢堡！第一次聽到前輩跟我說可以在手機面板時考慮把選單切成漢堡，我心裡真的只有那好吃香香的漢堡啊~就是這個啊~ 所以~...

Lai ‧ 2018-10-22 ‧團隊好想工作室第二屆鐵人賽

6 Like 0 留言 60221 瀏覽

鐵人賽自我挑戰組 DAY 6

前端之 " wow~原來是這樣啊 " 系列第 6 篇

技術 Day6 如何做出響應式網頁(RWD)？

常常聽到響應式網頁，但是怎麼做呢？響應式設計(Responsive web design)指的是使網頁內容在不同裝置下，都可以呈現出適切的內容。在說明如何設定...

Lai ‧ 2018-10-21 ‧團隊好想工作室第二屆鐵人賽

1 Like 0 留言 2371 瀏覽

鐵人賽 Modern Web DAY 3

AMP 系列第 3 篇

技術 AMP(Lession 3) - 使用AMP做RWD

使用AMP做RWD RWD 在現如今的網站，可以說是必備設定了。這兒要注意一點：平日裡我們是用 css 在做 RWD 的設定，但在 AMP 的世界裡，並不是這樣...

majo2013 ‧ 2018-10-03

2 Like 1 留言 18739 瀏覽

技術 RWD為什麼讓人愛不釋手?

響應式網頁設計(Responsive Web Design)簡稱RWD，又稱適應性網頁、回應式網頁設計。指網站能跨平台使用，因應不同的裝置，如：Iphone、P...

meimel ‧ 2018-08-16

技術 [Day 8] Flexbox 的使用姿勢 Part 2

技術 [Day 7] Flexbox 的使用姿勢 Part 1

技術 [Day 6] 從響應式的那個東西說起

技術 [Day 5] 從內容開始看格線系統

技術 [Day 4] 給我一個 Box

技術 [Day 3] 我是誰，我在哪裡

技術 [Day 2] 那個網頁設計

技術 [Day 1] 我說那個手機版

達標好文 技術 領進前端門，修行在個人：一變應萬變的響應式網頁設計(2) - 常見版型佈局設定

技術 領進前端門，修行在個人：一變應萬變的響應式網頁設計(1) - 基本環境、觀念

技術 [鼠年全馬鐵人挑戰] Week13 - 超新手學習筆記：如何開始撰寫 RWD

技術 【前端自學之路】如何開始?

徵才 【台北市】前端工程師(近捷運松江南京站)-APO

技術 RWD－off-canvas 側邊選單練習

技術 RWD 漢堡選單練習 toggleClass

技術 如何用 Sass 實現類似 Bootstrap 4 的格線系統

技術 關於購物車頁面的 RWD 移動概念