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

1 Like 1 留言 4008 瀏覽

鐵人賽 Modern Web DAY 21

CSS 實戰心法系列第 21 篇

技術 Bootstrap 透過 Sass 新增自定義元件

許多人在使用 Bootstrap 時，如果有需要新增、調整，都是寫在 CSS 的後方或是另開一個新檔透過 "覆蓋" 的特性來新增、調整。先前...

卡斯伯 ‧ 2016-12-21

3 Like 0 留言 4950 瀏覽

鐵人賽 Modern Web DAY 20

CSS 實戰心法系列第 20 篇

技術 Sass 資料夾結構

對於 Bootstrap 有一定了解後，我們即將要開始新增元件，不過在新增前我在分享一下 Sass 開發時的資料結構。 Sass 資料夾結構相信大家也聽說 SM...

卡斯伯 ‧ 2016-12-20

1 Like 0 留言 8983 瀏覽

鐵人賽 Modern Web DAY 19

React - DOM界的彼方系列第 19 篇

技術 Day19: React篇: TodoList程式 + 樣式(Style)

本章的目標是在React元件中的套用樣式(Style)，而且可以因狀態改變的作樣式變化，從上一章的程式碼作這些修改都是很簡單的，在React中使用CSS的樣式...

eyesofkids ‧ 2016-12-19

1 Like 0 留言 3707 瀏覽

鐵人賽 Modern Web DAY 19

CSS 實戰心法系列第 19 篇

技術 Bootstrap 一次看懂元件的使用組合

Bootstrap 的官方文件有完整的說明以及範例，就算是如此，還是會有許多朋友希望有快速入門的介紹，本篇就來介紹絕大部分 Bootstrap 元件的組合手法，...

卡斯伯 ‧ 2016-12-19

2 Like 0 留言 3515 瀏覽

鐵人賽 Modern Web DAY 18

CSS 實戰心法系列第 18 篇

技術 Bootstrap 元件分類概觀 (content, container)

接下來我們依循著 OOCSS 與 Bootstrap 的設計模式繼續擴資、修改元件，不過在繼續下一個階段以前，我們先來了解一下 Bootstrap 的設計模式。...

卡斯伯 ‧ 2016-12-18

2 Like 0 留言 3123 瀏覽

鐵人賽 Modern Web DAY 16

CSS 實戰心法系列第 16 篇

技術將 Bootstrap 導入自動化流程

先前的流程我們將 Gulp 的基礎流程已經建立起來了，現在我們要將 Bootstrap 導入自動化流程，讓接下來的客製化更為容易。 Bower 本範例是使用大...

卡斯伯 ‧ 2016-12-16

1 Like 0 留言 3380 瀏覽

鐵人賽 Modern Web DAY 15

CSS 實戰心法系列第 15 篇

技術為什麼 Boostrap (這篇很短~)

Bootstrap 是目前主流的 CSS 框架，先前也有提到，在起初我是很不喜歡 Bootstrap 的框架，認為他搶走我大部分的工作且缺乏特色，但在研究後會發...

卡斯伯 ‧ 2016-12-15

1 Like 0 留言 2546 瀏覽

鐵人賽 Modern Web DAY 14

CSS 實戰心法系列第 14 篇

技術 Gulp - Webserver

Gulp 很適合搭配任何其他的前後端結構，就先前介紹的幾個章節，只要略為修改輸入及輸出的路徑即可；除了搭配其他後端結構外，Gulp 也有適合直接開發的方法，本章...

卡斯伯 ‧ 2016-12-14

1 Like 0 留言 3796 瀏覽

鐵人賽 Modern Web DAY 13

CSS 實戰心法系列第 13 篇

技術 Gulp - 在本地端製作 Icon Fonts

網頁設計都會需要大量的小 icon，現在的 icon 都傾向使用 web fonts 來處理，因為 web font 所製作的 icon 有以下的好處：載入...

卡斯伯 ‧ 2016-12-13

1 Like 0 留言 2310 瀏覽

鐵人賽 Modern Web DAY 12

CSS 實戰心法系列第 12 篇

技術 Gulp - 定義預設開發環境

今天的進度來做個小調整，讓大家在使用 Gulp 時就能相容於目前的環境，目前使用的主要套件有：gulp-sass、gulp-postcss，這次調整後會有一個主...

卡斯伯 ‧ 2016-12-12

1 Like 0 留言 3335 瀏覽

鐵人賽 Modern Web DAY 11

CSS 實戰心法系列第 11 篇

技術 Gulp - 透過 PostCSS 加入 CSS Prefix

說到 CSS prefix 相信大家都不是很清楚當下主流版本的 prefix 有哪些是必要？又有哪些是不必要的？以往都是使用 Sass 的 Compass 來...

卡斯伯 ‧ 2016-12-11

0 Like 0 留言 1970 瀏覽

技術 JavaScript專案學習筆記 -鍵盤監聽 1/30天

感謝https://javascript30.com/的免費教程 Demo：http://codepen.io/FutureFronterAndy/pen/Vm...

阿盧 ‧ 2016-12-11

8 Like 0 留言 6148 瀏覽

鐵人賽 Modern Web DAY 5

Half-Stack Developer 養成計畫系列第 5 篇

技術為自己的人生鮮艷上色：CSS

為自己的人生鮮艷上色：CSS 在大概熟悉 HTML 以後，你可能會發現一件事：靠腰，我的網頁為什麼長那麼醜？沒錯，慘不忍睹的程度大概就跟你照鏡子差不多吧（開玩笑...

huli ‧ 2016-12-15

1 Like 0 留言 7183 瀏覽

鐵人賽 Modern Web DAY 10

CSS 實戰心法系列第 10 篇

技術 Gulp 與 Sass 開發環境

Gulp 是我目前最使用的自動化工具，在先前一篇也有介紹有哪些自動化工具，這篇開始會介紹 Gulp 自動化工具如何使用、有哪些推薦的工具以及一些經驗上的分享。而...

卡斯伯 ‧ 2016-12-10

2 Like 0 留言 5505 瀏覽

鐵人賽 Modern Web DAY 9

CSS 實戰心法系列第 9 篇

技術 CSS 實戰心法搶到決定權，開發環境自己來

前端工程師一般來說只要搞定 HTML、CSS、Javascript 就可以了，所以後端的環境上不用太在意，但在這幾年的體悟下，這是一個不負責任的想法。我用過的...

卡斯伯 ‧ 2016-12-09

2 Like 0 留言 5494 瀏覽

鐵人賽 Modern Web DAY 8

CSS 實戰心法系列第 8 篇

技術 CSS 框架架構參考 Bootstrap

Bootstrap 是目前我最喜歡的 CSS 框架。雖說如此，我以往可是很討厭 Bootstrap 的，身為一名設計師希望能夠有更多自己發揮的空間，所以早期一...

卡斯伯 ‧ 2016-12-08

0 Like 0 留言 66589 瀏覽

鐵人賽 Modern Web DAY 8

網頁程式設計so easy 系列第 8 篇

技術 Day7 [CSS介紹-2]

表格框線當我們寫一個表格希望它有框線時，我們通常會這樣寫 <table border="1"> <tr>...

smallone1 ‧ 2016-12-08

1 Like 0 留言 6371 瀏覽

鐵人賽 Modern Web DAY 7

CSS 實戰心法系列第 7 篇

技術 CSS 框架架構參考 PURE CSS

在瞭解完 OOCSS 後，可以看看主流框架是不是有帶入其中之概念，接下來會介紹兩篇 PureCSS 與 Bootstrap，這兩者的簡單架構概念讓大家參考參考。...

卡斯伯 ‧ 2016-12-07

0 Like 0 留言 5772 瀏覽

鐵人賽 Modern Web DAY 7

網頁程式設計so easy 系列第 7 篇

技術 Day6 [CSS介紹-1]

在網頁中加入CSS樣式在HTML文件中使用CSS主要有四種方法：用style元素定義內嵌樣式 <head> ... <...

smallone1 ‧ 2016-12-07

1 Like 1 留言 21213 瀏覽

鐵人賽 Modern Web DAY 6

CSS 實戰心法系列第 6 篇

技術 CSS 的元件狀態

CSS 元件狀態重點可以分為兩部分，一個是原生的 CSS 偽類(Pseudo-classes)，另一則是配合 Javascript 所提供的 Class，在這部...

卡斯伯 ‧ 2016-12-06

4 Like 0 留言 4272 瀏覽

鐵人賽 Modern Web DAY 5

CSS 實戰心法系列第 5 篇

技術小故事 + 圖文介紹 CSS 的命名技巧

程式語言的命名一直是個麻煩課題，除了要有良好邏輯外，還必須有大量的英文詞彙能力。CSS 雖然不需要有太深的邏輯，但由於上手容易，團隊合作的命名就容易被其他小夥伴...

卡斯伯 ‧ 2016-12-05

1 Like 0 留言 3840 瀏覽

鐵人賽 Modern Web DAY 4

CSS 實戰心法系列第 4 篇

技術 OOCSS 容器與內容分離 (最佳實踐)

結構與樣式分離，對於網頁的樣式設計是一種解放，所有元件的樣式組合搭配及擴增變得更自由。這篇要介紹的是容器與內容分離，簡單來說我們可以把元件分為兩大類型：容...

卡斯伯 ‧ 2016-12-04

1 Like 1 留言 4727 瀏覽

鐵人賽 Modern Web DAY 3

CSS 實戰心法系列第 3 篇

技術 OOCSS 結構與樣式、容器與內容(實際範例)

結構與樣式在執行的概念上就是這樣的白話，目標即是將這兩者分離，上一篇我們用建築物的結構與外觀樣式做分離，再依不同的需求去做組合。 CSS 上也是相同的道理，比如...

卡斯伯 ‧ 2016-12-03

2 Like 0 留言 5968 瀏覽

鐵人賽 Modern Web DAY 2

CSS 實戰心法系列第 2 篇

技術 OOCSS 結構與樣式、容器與內容

以前剛進入這行，掌握了 CSS2 的大部分關鍵之後，對於製作網頁非常有成就感，因為當時寫一個站不需要太多時間(整個網站約落在 800 ~ 1200 行 CSS)...

卡斯伯 ‧ 2016-12-02

3 Like 1 留言 5509 瀏覽

鐵人賽 Modern Web DAY 1

CSS 實戰心法系列第 1 篇

達標好文技術前言，CSS 最重要的事？

鐵人賽系列文又開始囉，這次的主題是 CSS 你覺得 CSS 最重要的是什麼勒？如果換個方式思考，寫 CSS 最痛苦的事情是什麼呢？載入速度緩慢遇到不...

卡斯伯 ‧ 2016-12-01

2 Like 0 留言 3592 瀏覽

技術【六角學院-限時優惠推薦】HTML+CSS+jQ 線上影音課程

大家好，我是洧杰，曾經參加過兩次的 IT鐵人邦比賽，我在三月創立了六角學院，提供的服務是線上影音前端教學，每週三晚上我們也會提供線上問答解決學生實務上遇到的問...

廖洧杰 ‧ 2016-06-21

2 Like 3 留言 3478 瀏覽

技術我又改了 IT邦幫忙新版的 CSS 了，適合寬螢幕顯示 5/17版面更新

套用後頁面如下以下語法只有外掛了 CSS 修改套件才能用 CHROME 請使用 Stylebot Chrome套用請進入IT邦幫忙後對著 Stylebot...

窮嘶發發發 ‧ 2016-05-10

0 Like 2 留言 4604 瀏覽

技術【線上影音課程推薦】六角學院 - 使用 HTML、CSS 開發一個網站

各位朋友們好：我是有參與第六、七屆 IT 鐵人邦的洧杰，分享的內容是SASS教學，目前在坐等第八屆開始 XD 這段期間也沒閒著，和其他朋友共同創立了一個學...

廖洧杰 ‧ 2016-04-01

0 Like 0 留言 3746 瀏覽

技術小圖示最佳化 - ASP.NET Sprite and Image Optimization

小圖示最佳化 - ASP.NET Sprite and Image Optimization (ASP.NET Web Form & MVC都可以使用)...

mis2000lab ‧ 2015-10-23

1 Like 3 留言 19540 瀏覽

技術 [jQuery]ASP.NET GridView 凍結窗格

透過 jQuery特效，將 GridView的標題欄位「凍結窗格」有位學員找到這個很棒的範例 http://gridviewscroll.aspcity.id...

mis2000lab ‧ 2015-09-30