Java瑪奇朵-非本科系的IT吃喝電玩日誌

若你打算朝前端工程師之路邁進~ 那你一定要好好讀一讀這一篇~ 有關前端工程師必學的技能!!
曾經聽過非常多這樣的說法：會用DIV+CSS，會用 Javascript 寫一些頁面特效，就是前端開發工程師的工作內容！其實

前端工程師需要做得比這多了！也比你想的多多了！根據各大網路的資料整理如下：

會設計，不要求精湛，處理圖片，設計個小廣告是要的；

精通HTML+CSS，並能快速處理各瀏覽器兼容問題；

熟練掌握Javascript或Actionscript，精通加分；

熟練使用JS框架，如jQuery/YUI等，並解讀過源碼，熟練多框架加分；

熟悉Ajax技術，必須的；

熟悉開發調試工具，如Firebug等；

代碼語義化，懂優化，壓縮和反壓縮；

對SEO有一定的了解，尤其是

HTML結構和標籤的使用；

高效合成CSS Sprite；

了解伺服器方面基本知識；

熟練掌握一門後端語言，如PHP/ASP.NET等，絕對加分項；

有自己的網站（看對網站所有東西的把握）；

對移動開發有一定的了解和涉入；

熟練HTML5和CSS3技術（主要用於移動應用開發）；

效率開發，精湛的開發軟體操作；

有過用戶體驗研究，更關注人性化頁面開發；

了解瀏覽器工作原理，了解w3c標準，了解web2.0；

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

前端工程師薛要學習的知識和技能不是像大家想的那樣簡單~ 想知道前端工程師要會些甚麼嗎? 下面通通告訴你~
曾經聽過非常多這樣的說法：會用DIV+CSS，會用 Javascript 寫一些頁面特效，就是前端開發工程師的工作內容！其實

前端工程師需要做得比這多了！也比你想的多多了！根據各大網路的資料整理如下：

會設計，不要求精湛，處理圖片，設計個小廣告是要的；

精通HTML+CSS，並能快速處理各瀏覽器兼容問題；

熟練掌握Javascript或Actionscript，精通加分；

熟練使用JS框架，如jQuery/YUI等，並解讀過源碼，熟練多框架加分；

熟悉Ajax技術，必須的；

熟悉開發調試工具，如Firebug等；

代碼語義化，懂優化，壓縮和反壓縮；

對SEO有一定的了解，尤其是

HTML結構和標籤的使用；

高效合成CSS Sprite；

了解伺服器方面基本知識；

熟練掌握一門後端語言，如PHP/ASP.NET等，絕對加分項；

有自己的網站（看對網站所有東西的把握）；

對移動開發有一定的了解和涉入；

熟練HTML5和CSS3技術（主要用於移動應用開發）；

效率開發，精湛的開發軟體操作；

有過用戶體驗研究，更關注人性化頁面開發；

了解瀏覽器工作原理，了解w3c標準，了解web2.0；

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

有許多接觸網頁開發的新手或是想要轉行為網頁開發工程師的人都會有這個疑問：到底什麼是

前端工程師、到底什麼是

後端工程師，以及他們到底是需要哪些語言或者是技術呢？今天就來簡單的向大家介紹一下：
前端工程師
網頁前端開發一般指的是大家看到的網頁，包括裡面靜態的介面、一些酷炫的動態效果以及用戶的交互操作等。
網頁前端開發一般由那些技術構成呢？首先是 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教育培訓企業

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

你對前端工程師和後端工程師哪個比較感興趣呢? 在思考這個問題前要先知道它們之間有甚麼不同~
有許多接觸網頁開發的新手或是想要轉行為網頁開發工程師的人都會有這個疑問：到底什麼是

前端工程師、到底什麼是

後端工程師，以及他們到底是需要哪些語言或者是技術呢？今天就來簡單的向大家介紹一下：
前端工程師
網頁前端開發一般指的是大家看到的網頁，包括裡面靜態的介面、一些酷炫的動態效果以及用戶的交互操作等。
網頁前端開發一般由那些技術構成呢？首先是 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教育培訓企業

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

前端工程師專欄再次登場!! 今天要來教大家如何分辨當有兩個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教育培訓企業
 

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

前端設計師不可不知的背景設計基本功!! 學過的當複習~還不會的快學起來吧!!
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 培訓中心推「找到工作再付學費」專案，要試試嗎？
 
 
 

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

前端工程師專欄今天要來教大家如何設定背景位置!! 一篇讓你學會!! 簡單又明瞭!!
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教育培訓企業
 

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

前端工程師非學不可的背景圖樣設定!! 學好學滿讓你的網頁不只功能好,又兼具美觀喔~

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

前端工程師們~ 今天的專欄要來和大家談的是背景固定模式設定!! 這基本功一定要會喔!!
CSS background-attachment 是

前端工程師用來決定背景圖片是否要跟著滑鼠滾動而上下移動的，有三種不同的呈現方案，第一種為當滑鼠上下滾動時，背景圖片與網頁主體跟著上下滾動；第二種為當滑鼠上下滾動時，背景圖片相對位置固定不動，呈現效果就像是網頁主體與背景是分開的，；第三種為當滑鼠上下滾動時，背景圖片絕對位置固定不動，似乎網頁主體是浮在背景圖之上的感覺。CSS background-repeat 一般來說與 背景圖樣設定 (background-image) 一起搭配設計。
 
CSS background-attachment 基本語法如下：
background-attachment: 顯示參數;
有三種可以使用的顯示參數可供前端工程師們決定背景圖與網頁主體該以何種方式來搭配顯示，分別為 scroll（預設值，背景圖案的「相對位置」不會隨著滾動機制而移動，而網頁主體則會跟著滾動）、fixed（背景圖案的「絕對位置」不會隨著滾動機制而移動，而網頁主體則還是會跟著滾動，彷彿網頁主體是浮在整張背景圖之上的感覺。多用於網頁背景圖為滿版的場合時使用）、local（背景圖案與網頁主體都會跟著滾動機制而滾動。以下是針對這三種參數的範例：
 
CSS background-attachment 各種參數的範例
See the Pen background-attachment-example by Tedutw (@Tedutw) on CodePen.

現在新一代的網頁多採滿版設計，其中的「background-attachment: fixed;」參數，常被當代的前端工程師搭配「background-repeat: no-repeat;」參數使用，做出網頁主體都浮在高質感的背景圖的效果。

其他常用 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教育培訓企業
 
 

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

 
這一篇要來告訴大家一個前端工程師一定要會的技巧!! 就是CSS的背景顏色設定!! 超實用一定要會喔!!
前端工程師使用背景顏色設定 (background-color)屬性，可以讓簡潔的純色背景襯托出網頁的主體、也可以決定網頁的風格。像是背景純黑的網頁與背景為粉紅色的網頁，風格就大不相同。其實 background-color 能夠使用的範圍除了網頁背景色外，也可以用來設計表格、DIV 區塊、span 等網頁元素的背景顏色。前端工程師可要好好利用喔~
 
CSS background-color 基本語法如下：
background-color: 顏色名稱或色碼 ;
background-color 可以使用的顏色值包含顏色的英文名稱、十六進位制色碼以及 RGB 色碼，挑選顏色請參考：網頁顏色代碼對照表。
 
CSS background-color 語法範例一、網頁背景
html{background-color: 顏色名稱或色碼 ;}
See the Pen background-color-bg-example by Tedutw (@Tedutw) on CodePen.

 
CSS background-color 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景顏色
div(可替換成 h1、p 等網頁元素標籤){background-color: 顏色名稱或色碼 ;}
See the Pen background-color-div-example by Tedutw (@Tedutw) on CodePen.
同樣的技巧還可以用在其他的網頁元素，若想採用圖片當成背景，請參閱：2. 背景圖樣設定 (background-image)。

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

 
 
其他閱讀
 
前端工程師專欄:CSS套入HTML中的四種方法~
前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
你知道SEO優化最佳幫手的正確打開方式嗎? 看這篇就對了!!
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
 
 
 
 

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

前端工程師專欄今天一次給妳四種不同的CSS背景重複顯示設定方法!! 快點筆記下來吧!!
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 培訓中心推「找到工作再付學費」專案，要試試嗎？
 
 

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

前端工程師們~有人總是覺得自己網頁背景看起來有一點不對勁嗎? 那一定要檢查一下你的背景位置設定啊!!
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教育培訓企業
 

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()