- 4月 03 週三 201918:00
多個class名稱之間有無逗號意思不一樣!!前端工程師了解哪裡不一樣嗎?
- 4月 03 週三 201916:24
前端工程師CSS入門教學-Box Model盒子模式
對前端工程師來說,CSS盒子模式Box Model可描述一個元素的組成,是個很重要的觀念.以下是盒子模式的式樣-
在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。
相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下：
1. 邊界 (margin)
2. 邊框 (border)
3. 留白 (padding)
邊界
如我們在盒子模式那一頁看到的，邊界 (margin) 是在邊框之外，並且是用來設定各個元素之間的距離。一個盒子有四個邊，所以前端工程師們可以對這四個邊逐一設定：
有三種方式可以設定邊界，分別為長度、百分比、以及 'auto'。我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼)：
See the Pen Margin by Tedutw (@Tedutw) on CodePen.
在這裡，上邊界為 50px，左邊界和右邊界為 10%，下邊界為 auto。
這樣寫會不會太麻煩一些? 會！其實前端工程師常將定義邊界尺寸的四行 CSS 碼濃縮成一行！以下會介紹：
Margin 邊界簡化 (一行文) 表示法
所有四個邊的邊界可以同時由一個 margin 屬性設定，只有一行文。它的語法如下：
margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值]
我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼)：
See the Pen Margin-2 by Tedutw (@Tedutw) on CodePen.
在這裡，邊界的表現跟最前面的例子一樣：上邊界為 50px，左邊界和右邊界為 10%，下邊界為 auto。
使用這種簡化的表示方法，重點在於數字的順序：第一個值是上邊界的值，第二個值是右邊界的值，第三個值是下邊界的值，而第四個值是左邊界的值。
這種簡化 CSS 的一行文標示方法，還有其他的方式，介紹如下：
margin：上 右 下 左; (四個值)
如上方例子所示
margin：上 左右 下; (三個值)
margin: [上面邊界值] [右邊與左邊邊界值] [下面邊界值]
See the Pen margin：上 左右 下; (三個值) by Tedutw (@Tedutw) on CodePen.
margin：上下 左右; (二個值)
margin: [上面與下面邊界值] [右邊與左邊邊界值]
See the Pen margin：上下 左右; (二個值) by Tedutw (@Tedutw) on CodePen.
margin：上下左右; (一個值)
margin: [上下左右邊界值]
See the Pen margin：上下左右 (一個值) by Tedutw (@Tedutw) on CodePen.
邊框
Border 是邊框，介於外側的邊界 (margin) 與內側的留白 (padding) 之間。不須特別設定，CSS 碼如下：
border: 邊界值 實線或是虛線 顏色;
邊框設定範例如下：
border: 1px solid #000000;
See the Pen margin：上下左右; (一個值) by Tedutw (@Tedutw) on CodePen.
如以上範例，我們得到一個外層包了一層黑色 (色碼為 #000000) 實線 (solid)、寬度1px的框。 border的數值只需要用空格分開即可，屬性不需要一個一個下，如:border-width、border-style、border-color 等等。
留白
padding(留白)外側緊鄰邊框 (border)、內側緊鄰內容 (content)。如果沒有設定 padding，內容的部分就會黏著邊框。padding 就會吃到背景色。
以下是沒有設定 padding 的例子，可以看見內容的字緊鄰黑色的邊框
See the Pen 沒有設定 padding 的例子 by Tedutw (@Tedutw) on CodePen.
以下是有設定 padding 的例子, 可以看見內容的字與邊框有一段距離.這一段距離就是所謂的「padding」。padding會吃到背景色。
See the Pen margin：上 左右 下; (三個值)-加上邊框 by Tedutw (@Tedutw) on CodePen.
Padding 的上下左右調整，語法跟 Margin 一樣，順序很重要。列舉如下：
padding:[上面留白值] [右邊留白值] [下面留白值] [左邊留白值]
padding:[上面留白值] [左邊與右邊留白值] [下面留白值]
padding:[上面與下面留白值] [左邊與右邊留白值]
padding:[上面與下面與左邊與右邊留白值]
【其他相關 CSS 教學】
前端工程師專欄:CSS中常見的邊框屬性解釋
前端工程師專欄:CSS字體單位解釋(下)
前端工程師專欄:CSS字體單位解釋(上)
CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!
前端工程師必備的基礎"CSS的語法格式"
學用CSS做邊框一點都不難!前端工程師看過來呦!
前端工程師的第一堂課:CSS和HTML
- 4月 03 週三 201908:00
網頁工程師問與答:前端工程師的必備技能有哪些
若你打算朝前端工程師之路邁進~ 那你一定要好好讀一讀這一篇~ 有關前端工程師必學的技能!!
曾經聽過非常多這樣的說法：會用DIV+CSS，會用 Javascript 寫一些頁面特效，就是前端開發工程師的工作內容！其實
前端工程師需要做得比這多了！也比你想的多多了！根據各大網路的資料整理如下：
會設計，不要求精湛，處理圖片，設計個小廣告是要的；
精通HTML+CSS，並能快速處理各瀏覽器兼容問題；
熟練掌握Javascript或Actionscript，精通加分；
熟練使用JS框架，如jQuery/YUI等，並解讀過源碼，熟練多框架加分；
熟悉Ajax技術，必須的；
熟悉開發調試工具，如Firebug等；
代碼語義化，懂優化，壓縮和反壓縮；
對SEO有一定的了解，尤其是
HTML結構和標籤的使用；
高效合成CSS Sprite；
了解伺服器方面基本知識；
熟練掌握一門後端語言，如PHP/ASP.NET等，絕對加分項；
有自己的網站（看對網站所有東西的把握）；
對移動開發有一定的了解和涉入；
熟練HTML5和CSS3技術（主要用於移動應用開發）；
效率開發，精湛的開發軟體操作；
有過用戶體驗研究，更關注人性化頁面開發；
了解瀏覽器工作原理，了解w3c標準，了解web2.0；
- 4月 02 週二 201918:00
前端工程師一定要具備的能力和工作內容不是只是像你想的那樣簡單!!
前端工程師薛要學習的知識和技能不是像大家想的那樣簡單~ 想知道前端工程師要會些甚麼嗎? 下面通通告訴你~
曾經聽過非常多這樣的說法：會用DIV+CSS，會用 Javascript 寫一些頁面特效，就是前端開發工程師的工作內容！其實
前端工程師需要做得比這多了！也比你想的多多了！根據各大網路的資料整理如下：
會設計，不要求精湛，處理圖片，設計個小廣告是要的；
精通HTML+CSS，並能快速處理各瀏覽器兼容問題；
熟練掌握Javascript或Actionscript，精通加分；
熟練使用JS框架，如jQuery/YUI等，並解讀過源碼，熟練多框架加分；
熟悉Ajax技術，必須的；
熟悉開發調試工具，如Firebug等；
代碼語義化，懂優化，壓縮和反壓縮；
對SEO有一定的了解，尤其是
HTML結構和標籤的使用；
高效合成CSS Sprite；
了解伺服器方面基本知識；
熟練掌握一門後端語言，如PHP/ASP.NET等，絕對加分項；
有自己的網站（看對網站所有東西的把握）；
對移動開發有一定的了解和涉入；
熟練HTML5和CSS3技術（主要用於移動應用開發）；
效率開發，精湛的開發軟體操作；
有過用戶體驗研究，更關注人性化頁面開發；
了解瀏覽器工作原理，了解w3c標準，了解web2.0；
- 4月 02 週二 201908:00
網頁工程師問與答:前端工程師與後端工程師的工作差異
有許多接觸網頁開發的新手或是想要轉行為網頁開發工程師的人都會有這個疑問：到底什麼是
前端工程師、到底什麼是
後端工程師，以及他們到底是需要哪些語言或者是技術呢？今天就來簡單的向大家介紹一下：
前端工程師
網頁前端開發一般指的是大家看到的網頁，包括裡面靜態的介面、一些酷炫的動態效果以及用戶的交互操作等。
網頁前端開發一般由那些技術構成呢？首先是 HTML 這個超文本標記語言，它主要用來展示一些文本，圖片，表格，連結等。
其次是CSS，它中文翻譯為層疊樣式表，CSS 不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
最後一門重要的技術叫做 JavaScript，一種直譯式腳本語言，常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。
學習曲線：先易後難，也就是說入門比較簡單，但是後期深入就比較困難了
後端工程師
網頁後端開發一般指的就是我們網站的伺服器程序，他們決定了我們網站的運行邏輯，業務核心，我們通過它來處理業務，操作資料庫（增刪改查等）
主要技術有：
Java ：Java 是一種跨平台的語言，它已經走過了 20 個年頭，見證了 PC 網際網路、移動網際網路、大數據、雲計算等網際網路浪潮，如今依然是使用最多最為廣泛的後端語言，這不僅因為 Java 語言在發展過程中不斷的優化，更因為在發展的過程中不斷的產生的優秀的框架，形成了一個龐大的java生態圈，全世界的軟體和網際網路公司絕大多數都是 Java 的用戶。Java 適合於開發大型的應用系統，應用的前景比較廣闊，系統易維護、可復用性較好。數學運算和資料庫訪問速度來講，Java 的性能也很優秀。實際上，對於跨平台的大型的企業應用系統來講，Java 幾乎已經成為唯一的選擇。
PHP：PHP 是一種解釋執行的腳本語言，語法和 C 語言類似，易學易用，PHP 適合於快速開發一些中小型應用系統，開發成本低，能夠對變動的需求作出快速的反應。可以節省開發周期，幫助項目儘快上線試錯。一般剛開始創業的網際網路公司更適合使用 PHP 開發。
GO：GO 語言由 Google 開發，其中負責人員包括了開發 Java 、UNIX 以及 C 語言的各個技術大牛，他們總結吸收了之前語言的一些優點並對缺點進行了改良，這樣出身的 GO 不得不讓人羨慕。近年來它也確實成為了開發市場的新寵，從語言排行上來看也是上升最快的語言。可以說未來是前途無限的。GO 語言現在也確實占有了一定量的後端市場，一些公司專門招人學習GO 並使用，但畢竟GO 在程式語言中還是個初生之犢，還有一段路要走。
學習曲線：Java 曲線比較穩定，且業界需求量高。PHP 相對 Java 較容易上手。而 GO 語言又更簡單些
其他閱讀
前端工程師專欄:CSS中常見的邊框屬性解釋
前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
工程師們口中的Python到底是甚麼? 很重要嗎?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
英特爾,惠普與達內教育為打造最大IT教育集團共同合作
美國NASDAQ上市公司、外商IT教育培訓企業
- 4月 01 週一 201920:00
想當網頁工程師一定要先知道~前端工程師與後端工程師的不同!!
你對前端工程師和後端工程師哪個比較感興趣呢? 在思考這個問題前要先知道它們之間有甚麼不同~
有許多接觸網頁開發的新手或是想要轉行為網頁開發工程師的人都會有這個疑問：到底什麼是
前端工程師、到底什麼是
後端工程師，以及他們到底是需要哪些語言或者是技術呢？今天就來簡單的向大家介紹一下：
前端工程師
網頁前端開發一般指的是大家看到的網頁，包括裡面靜態的介面、一些酷炫的動態效果以及用戶的交互操作等。
網頁前端開發一般由那些技術構成呢？首先是 HTML 這個超文本標記語言，它主要用來展示一些文本，圖片，表格，連結等。
其次是CSS，它中文翻譯為層疊樣式表，CSS 不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
最後一門重要的技術叫做 JavaScript，一種直譯式腳本語言，常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。
學習曲線：先易後難，也就是說入門比較簡單，但是後期深入就比較困難了
後端工程師
網頁後端開發一般指的就是我們網站的伺服器程序，他們決定了我們網站的運行邏輯，業務核心，我們通過它來處理業務，操作資料庫（增刪改查等）
主要技術有：
Java ：Java 是一種跨平台的語言，它已經走過了 20 個年頭，見證了 PC 網際網路、移動網際網路、大數據、雲計算等網際網路浪潮，如今依然是使用最多最為廣泛的後端語言，這不僅因為 Java 語言在發展過程中不斷的優化，更因為在發展的過程中不斷的產生的優秀的框架，形成了一個龐大的java生態圈，全世界的軟體和網際網路公司絕大多數都是 Java 的用戶。Java 適合於開發大型的應用系統，應用的前景比較廣闊，系統易維護、可復用性較好。數學運算和資料庫訪問速度來講，Java 的性能也很優秀。實際上，對於跨平台的大型的企業應用系統來講，Java 幾乎已經成為唯一的選擇。
PHP：PHP 是一種解釋執行的腳本語言，語法和 C 語言類似，易學易用，PHP 適合於快速開發一些中小型應用系統，開發成本低，能夠對變動的需求作出快速的反應。可以節省開發周期，幫助項目儘快上線試錯。一般剛開始創業的網際網路公司更適合使用 PHP 開發。
GO：GO 語言由 Google 開發，其中負責人員包括了開發 Java 、UNIX 以及 C 語言的各個技術大牛，他們總結吸收了之前語言的一些優點並對缺點進行了改良，這樣出身的 GO 不得不讓人羨慕。近年來它也確實成為了開發市場的新寵，從語言排行上來看也是上升最快的語言。可以說未來是前途無限的。GO 語言現在也確實占有了一定量的後端市場，一些公司專門招人學習GO 並使用，但畢竟GO 在程式語言中還是個初生之犢，還有一段路要走。
學習曲線：Java 曲線比較穩定，且業界需求量高。PHP 相對 Java 較容易上手。而 GO 語言又更簡單些
其他閱讀
前端工程師專欄:CSS中常見的邊框屬性解釋
前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
工程師們口中的Python到底是甚麼? 很重要嗎?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
英特爾,惠普與達內教育為打造最大IT教育集團共同合作
美國NASDAQ上市公司、外商IT教育培訓企業
- 4月 01 週一 201908:00
前端工程師專欄:CSS的多重class中空格與逗號差在哪?
前端工程師專欄再次登場!! 今天要來教大家如何分辨當有兩個CLASS同時出現時,CSS的表現為何~有甚麼不同~
有時在 HTML 中，
前端工程師會對同一個標籤給予兩個以上的 Class 名稱，如以下所示:
<div class="first second"></div>對於這類有兩個以上的 Class 名稱的 HTML，其 CSS 選擇器可能會表示如以下三種。你分辨得出這些 CSS 有什麼不同呢?
/*1. 兩個 class 中有空格*/
.first .second
/*2. 兩個 class 中沒有空格*/
.first.second
/*3. 兩個 class 中出現逗號*/
.first,.second
對於
CSS 的前端工程師初學者來說，上面所說的三種 CSS 因為長得非常像，所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號，到底差在哪裡? 分別講解如下:
1. 兩個 class 中有空格的例子：五個區塊中，階層必須是要在 first 區塊之下的 second 區塊才會顯示黑底白字的 CSS 設定
2. 兩個 class 中沒有空格的例子：五個區塊中， div class 名稱一定要同時出現 first 和 second 才會顯示黑底白字的 CSS 設定
See the Pen .first與 .second中間無空格的例子 by Tedutw (@Tedutw) on CodePen.
3. 兩個 class 中有逗號的例子：五個區塊中，只要 div class 名稱中有出現 first 或是 second 的區塊，就會顯示黑底白字的 CSS 設定
See the Pen .first與 .second中間有逗號的例子 by Tedutw (@Tedutw) on CodePen.
註 : 以上三個範例的 HTML 碼都一樣
其他閱讀
前端工程師專欄:CSS中常見的邊框屬性解釋
前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
工程師們口中的Python到底是甚麼? 很重要嗎?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
英特爾,惠普與達內教育為打造最大IT教育集團共同合作
美國NASDAQ上市公司、外商IT教育培訓企業
- 3月 29 週五 201922:00
背景設計基本功!! 前端工程師一定要會----背景重複顯示設定!!
前端設計師不可不知的背景設計基本功!! 學過的當複習~還不會的快學起來吧!!
CSS background-repeat 是
前端工程師用來設定背景圖片是否重覆顯示、重覆顯示的方向，一般來說與 背景圖樣設定 (background-image) 搭配一起使用。如果背景圖片是比較小的圖片，則可以使用 background-repeat 把小圖片自動佈滿整個網頁背景，是相當普遍的節省頻寬設計方式 (但是圖片圖樣要單純一些，以免視覺雜亂)；當背景圖片是一張具有顯示範圍較大的圖片，則可以用 background-repeat 的「no-repeat」指令將圖片限制只顯示一次。
CSS background-repeat 基本語法如下：
background-repeat: 重複參數;
有四種可以使用的重複參數供前端工程師們來決定重複方向或是是否重複，分別為 repeat（預設值，圖片會沿著 x 軸與 y 軸重複）、repeat-x（圖片會沿著x軸重複）、repeat-y（圖片會沿著y軸重複) 以及 no-repeat (不重複)。以下是針對這四種參數的範例：
CSS background-repeat 各種參數的範例
See the Pen background-repeat-example by Tedutw (@Tedutw) on CodePen.
其實除了上例的四個參數，還有一個 inherit 屬性，是繼承父層屬性的意思。但是因為部分瀏覽器 (如IE) 不支援，可能造成部分的人開啟網頁發生排版錯誤、或是圖片呈現錯誤。所以很少人使用，因此在此省略不介紹。
其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)
其他閱讀
前端工程師專欄:CSS套入HTML中的四種方法~
前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
人工智慧寫作能力勝過人類,文章新聞真假難辨!
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
- 3月 29 週五 201908:00
前端工程師專欄:CSS background-position背景位置設定
前端工程師專欄今天要來教大家如何設定背景位置!! 一篇讓你學會!! 簡單又明瞭!!
CSS background-position 是讓
前端工程師用來定義背景圖片位置的，是 CSS background 的屬性之一，一般來說與 背景圖樣屬性 (background-image)、背景重複參數 (background-repeat)一起搭配做網頁設計，來決定網頁背景圖片顯示位置，可以調整背景圖片靠上(top)、下(bottom)、左(left)、右(right)或是置中(center)。設計時需下水平位置與垂直位置的參數，可以數字、百分比或方向等為單位，讓圖片能夠在正確的位置呈現。
各種方向參數：
水平方向：left - 靠左對齊、center - 置中對齊、right - 靠右對齊
垂直方向：top - 靠上對齊、center - 置中對齊、bottom - 靠下對齊
CSS background-position 基本語法如下：
background-position: 背景圖片水平位置參數 背景圖片垂直位置參數 ;
前端工程師通常使用水平方向與垂直方向的組合，來定義背景圖片呈現的位置。例如「background-position:left top;」這樣代表背景圖片靠左上角對齊。除此之外，還可以微調「靠左與靠上的距離或百分比」來設計，範例如以下所示：
background-position:right top; // 靠右靠上對齊
background-position:right center; // 靠右置中對齊
background-position:right; // 靠右置中對齊(如果您僅定義了一個參數，那麽第二個參數將會默認為「center(置中)」。)
background-position:right bottom; // 靠右靠下對齊
background-position:left top; // 靠左靠上對齊
background-position:left center; // 靠左置中對齊
background-position:left; // 靠左置中對齊(如果您僅定義了一個參數，那麽第二個參數將會默認為「center(置中)」。)
background-position:left bottom; // 靠左靠下對齊
background-position:top center; // 靠上置中對齊
background-position:bottom center; // 靠下置中對齊
background-position:center; //背景圖片水平位置與垂直位置均置中對齊
background-position:30px 60px; //靠左 30px 靠上 60 px 的位置(第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)
background-position:10% 50%; // 靠左 10% 靠上 50% 的位置(第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)
background-position:10%; // 效果同上一行，靠左 10% 靠上 50% 的位置 (如果您僅規定了一個值，另一個值默認為 50%。)
其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)
其他閱讀
前端工程師專欄:CSS套入HTML中的四種方法~
前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
你知道SEO優化最佳幫手的正確打開方式嗎? 看這篇就對了!!
美國NASDAQ上市公司、外商IT教育培訓企業
- 3月 28 週四 201922:06
前端工程師想讓你的網頁背景更漂亮嗎? 那一定要學CSS背景圖樣設定!!
前端工程師非學不可的背景圖樣設定!! 學好學滿讓你的網頁不只功能好,又兼具美觀喔~
