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

5 Like 1 留言 5647 瀏覽

鐵人賽影片教學 DAY 10

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

技術金魚都能懂網頁設計入門 : 網頁兩大主角 (鐵人賽第十天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧兩大主角特性 inline 靠內容撐開，無法設定寬高 block 區塊...

CSScoke ‧ 2018-10-25 ‧團隊阿莫斯の推坑教

0 Like 0 留言 1244 瀏覽

鐵人賽 Modern Web DAY 9

CSS Secrets 導讀系列第 9 篇

技術 Secret 7:（偽）隨機背景圖案

在自然界完美重複的圖案根本是不存在，即使是同一品種的花，一定會有少許差異，沒有二朵花是完全一模一樣。再看一下前面我們做的練習，一模一樣的圖案有規律的重複，不管...

yowlonglee ‧ 2018-10-24

2 Like 0 留言 5120 瀏覽

鐵人賽 Modern Web DAY 9

連續30天的超實務網頁設計的垂直置中教學系列第 9 篇

技術使用 Flex + margin 輕鬆垂直置中

簡言繼續用 Flex 來置中，由於 Flex 物件對空間解讀的特殊性，我們只要在父層物件設定 display: flex，接著在需要垂直置中的物件上設定 ma...

CSScoke ‧ 2018-10-24

1 Like 1 留言 6957 瀏覽

鐵人賽自我挑戰組 DAY 9

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

技術 Day9 來試試看僞元素吧(before/after)

利用僞元素爲你的頁面在添加點東西吧初接觸僞元素時，覺得有點不直覺，但後續發現它真的滿好用的，很值得好好瞭解它。那麼~什麼是僞元素呢？其中的 " 僞...

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

5 Like 0 留言 5515 瀏覽

鐵人賽影片教學 DAY 9

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

技術金魚都能懂網頁設計入門 : Float浮動 (鐵人賽第九天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧浮動 float 的特性有靠左跟靠右就是沒有置中子層浮動時，父層會...

CSScoke ‧ 2018-10-24 ‧團隊阿莫斯の推坑教

0 Like 0 留言 2172 瀏覽

鐵人賽影片教學 DAY 11

智慧雲端物聯 - 關鍵輕專業（AIoT Cloud - Essential Shallow Expertise）系列第 13 篇

技術 Web前端基礎 (1/2)

[Day 11] Web前端基礎2.0：有趣的前端技術 (10min)2.1：HTML (22min + 15min)-- HTML URL Encode...

drm ‧ 2018-10-24

0 Like 0 留言 1849 瀏覽

鐵人賽 Modern Web DAY 8

CSS Secrets 導讀系列第 8 篇

技術 Secret 6: 更多的背景圖案

世界上並非只有條紋還有許多種圖案像是網格、點點、棋盤等等。好消息是 CSS gradients 幾乎做得到！上一篇文章我們只使用了一個 linear-gra...

yowlonglee ‧ 2018-10-23

3 Like 0 留言 2709 瀏覽

鐵人賽 Modern Web DAY 8

連續30天的超實務網頁設計的垂直置中教學系列第 8 篇

技術使用 Flex + :before + flex-grow 做垂直置中

簡言 Flex 有多種方式可以讓你把資料置中，使用 Flex-grow 的延展特性來達成，這個例子中 Amos 使用了 flex-direction: colu...

CSScoke ‧ 2018-10-23

6 Like 0 留言 6398 瀏覽

鐵人賽影片教學 DAY 8

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

技術金魚都能懂網頁設計入門 : 區塊尺寸計算 (鐵人賽第八天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧區塊的尺寸計算一個區塊的尺寸是如何被計算出來的? 這關係到你的版面是否...

CSScoke ‧ 2018-10-23 ‧團隊阿莫斯の推坑教

2 Like 0 留言 13246 瀏覽

鐵人賽自我挑戰組 DAY 8

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

技術 Day8 如何設定 CSS 陰影效果呢？

陰影在很多版型中都會出現，那麼它到底如何設定的呢？陰影可以讓畫面上的靜態元素看起來更立體，或是也能利用陰影增加與使用者之間的互動性。首先我們來看看它可以被設定...

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

5 Like 0 留言 8305 瀏覽

鐵人賽影片教學 DAY 7

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

技術金魚都能懂網頁設計入門 : 怎麼學CSS ? (鐵人賽第七天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧心智圖的使用先建立子主題再使用滑鼠拖拉來做分類使用 Enter鍵...

CSScoke ‧ 2018-10-22 ‧團隊阿莫斯の推坑教

0 Like 0 留言 2173 瀏覽

鐵人賽 Modern Web DAY 7

CSS Secrets 導讀系列第 7 篇

技術 Secret 5: 條紋背景

條紋是種常見的 pattern. 網頁設計要製作條紋最簡單的方法是用圖片做背景，不過這樣一來修改時就需要麻煩設計師出手。有些人可能會用 SVG，但是這樣還是需要...

yowlonglee ‧ 2018-10-22

6 Like 0 留言 33156 瀏覽

鐵人賽 Modern Web DAY 7

連續30天的超實務網頁設計的垂直置中教學系列第 7 篇

技術使用 Flex + align-items 做垂直置中

簡言 Flex ! 前端的毒品！後端的寶物！這東西自從面世之後就不斷的考驗網頁教學者的良心，到底要不要拋棄 float 擁抱 flex，我想這答案人人心中自有一...

CSScoke ‧ 2018-10-22

5 Like 1 留言 19104 瀏覽

鐵人賽自我挑戰組 DAY 7

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

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

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

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

4 Like 0 留言 8714 瀏覽

鐵人賽影片教學 DAY 6

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

技術金魚都能懂網頁設計入門 : CSS撰寫位置 (鐵人賽第六天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧 CSS能寫在哪裡? HTML原始碼的style屬性內 style標籤內...

CSScoke ‧ 2018-10-21 ‧團隊阿莫斯の推坑教

0 Like 0 留言 2148 瀏覽

鐵人賽 Modern Web DAY 6

CSS Secrets 導讀系列第 6 篇

技術 Secret 4: 內部圓角

有時我們會需要讓邊界裡面是圓角，但是外面還是維持直角。最直覺的做法是用二個 <div> 一個做內框一個做外框，外框的背景顏色是邊界的顏色。 &l...

yowlonglee ‧ 2018-10-21

9 Like 0 留言 35052 瀏覽

鐵人賽 Modern Web DAY 6

連續30天的超實務網頁設計的垂直置中教學系列第 6 篇

達標好文技術使用 absolute + translate 達到CSS垂直置中的效果

簡言此方式應該算是最方便的了，因為此置中的定位物件不需要固定的寬跟高，我們利用絕對定位時的 left 跟 top 設定物件的上方跟左方各都為 50% ，再利用...

CSScoke ‧ 2018-10-21

4 Like 2 留言 2075 瀏覽

鐵人賽自我挑戰組 DAY 7

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

技術與工程師的協作之路-那些年，我們一起混淆的CSS（三）

講完了position和float，其實layout的部分大概已經能cover到...可能有五成吧？不過除了這些，還有一個很重要的語法需要讓大家了解一下～進入...

Wen Chien ‧ 2018-10-21

6 Like 0 留言 57283 瀏覽

鐵人賽自我挑戰組 DAY 6

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

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

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

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

0 Like 0 留言 1239 瀏覽

鐵人賽 Modern Web DAY 5

CSS Secrets 導讀系列第 5 篇

技術 Secret 3: 靈活的背景定位

背景裡如果有單一圖片或是標誌時，我們常常會要固定放在背景的某個角落，此時需要用到background-position 去指定背景圖的位置。 backgroun...

yowlonglee ‧ 2018-10-20

2 Like 0 留言 1441 瀏覽

鐵人賽自我挑戰組 DAY 6

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

技術與工程師的協作之路-那些年，我們一起混淆的CSS（二）

承「與工程師的協作之路-那些年，我們一起混淆的CSS（一）」篇，講完position之後，今天要來跟大家介紹一個始祖級語法— float 剛接觸這個領域的時候，...

Wen Chien ‧ 2018-10-20

4 Like 1 留言 21068 瀏覽

鐵人賽自我挑戰組 DAY 5

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

技術 Day5 來切一個一定會有的 header 吧

打開每一個網頁，百分之 99.999999999 一定會有 header ，那我們就來切一個吧! 在切版的學習過程中，就是一直找東西來切，切久了就會從各種狀況中...

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

5 Like 0 留言 7430 瀏覽

鐵人賽影片教學 DAY 5

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

技術金魚都能懂網頁設計入門 : 網頁裝潢師CSS - 鐵人賽第五天

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧 CSS是甚麼? Cascading Style Sheets，簡寫CSS...

CSScoke ‧ 2018-10-20 ‧團隊阿莫斯の推坑教

2 Like 0 留言 11089 瀏覽

鐵人賽 Modern Web DAY 5

連續30天的超實務網頁設計的垂直置中教學系列第 5 篇

技術使用 absolute + margin auto 來達到CSS垂直置中效果

簡言絕對定位的垂直置中又一個，這個方式比較特別一點，當物件設定絕對定位之後，預設它是抓不到整體可運用空間的範圍，所以 margin: auto 此時會失效，但...

CSScoke ‧ 2018-10-20

1 Like 0 留言 1049 瀏覽

鐵人賽 Modern Web DAY 4

CSS Secrets 導讀系列第 4 篇

技術 Secret 2: 多重邊界

在 Backgrounds & Border Level 3 當時還在草稿階段時，WG的成員有討論過多重邊界的可能性，就像現在 background 可...

yowlonglee ‧ 2018-10-19

0 Like 0 留言 2265 瀏覽

鐵人賽 Software Development DAY 18

Emacs 來寫程式系列第 18 篇

技術 [Emacs-18] 用 Emacs 寫一個 Landing Page

用一個 Landing Page 來介紹 Emacs 功能我們簡單用一個首頁來介紹 Emacs 的相關功能，完成後的網頁建立 index.html 用 E...

洋蔥 ‧ 2018-10-19

7 Like 3 留言 2675 瀏覽

鐵人賽自我挑戰組 DAY 5

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

技術與工程師的協作之路-那些年，我們一起混淆的CSS（一）

雖然現在是UI Designer...但其實我是從網頁設計師起家的，也因此比較能跟工程師溝通一點點他們的語言！所以說，就算沒有要跨工程，我也建議設計師們能夠知道...

Wen Chien ‧ 2018-10-19

2 Like 0 留言 5231 瀏覽

鐵人賽自我挑戰組 DAY 4

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

技術 Day4 盒子的大小？

讓我們來打開神祕小盒子，一探究竟。在排版時，我們習慣將每一個區塊看成一個盒子來進行排版，排版結果由盒子性質及大小決定，而盒子大小受盒子相關屬性及計算方式影響，...

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

4 Like 1 留言 4218 瀏覽

鐵人賽 Modern Web DAY 4

連續30天的超實務網頁設計的垂直置中教學系列第 4 篇

技術使用 absolute + margin負值來達到垂直置中的目的

簡言誰說絕對定位(position: absolute)要少用的？Amos 認為沒有少用多用的問題，重點在於你是否有「妥善運用」才是重點，絕對定位在這個例子中...

CSScoke ‧ 2018-10-19

1 Like 1 留言 2590 瀏覽

鐵人賽 Modern Web DAY 3

CSS Secrets 導讀系列第 3 篇

技術 Secret 1: 半透明的邊界

為元素加上 border 算是CSS新手的問題 border: 10px; 給元素來個半透明的顏色，稍微難一些。可以用 rgba() 或是 hsla()，把he...

yowlonglee ‧ 2018-10-18

技術 金魚都能懂網頁設計入門 : 網頁兩大主角 (鐵人賽第十天)

技術 Secret 7:（偽）隨機背景圖案

技術 使用 Flex + margin 輕鬆垂直置中

技術 Day9 來試試看僞元素吧(before/after)

技術 金魚都能懂網頁設計入門 : Float浮動 (鐵人賽第九天)

技術 Web前端基礎 (1/2)

技術 Secret 6: 更多的背景圖案

技術 使用 Flex + :before + flex-grow 做垂直置中

技術 金魚都能懂網頁設計入門 : 區塊尺寸計算 (鐵人賽第八天)