布萊恩的創業小窩

在那些前端工程師必學的CSS裡,今天就來教你那個叫"浮動屬性"的小傢伙~ CSS 的 float (浮動) 屬性 CSS 的 float (浮動) 屬性，是 前端工程師 在做網頁排版時，必用的基本語法之一。使用 CSS float 浮動屬性，可將一個元素往左移或是往右移，並允許其他元素圍繞它（例如文繞圖、圖繞文等）。 何時使用？－float 浮動屬性的使用時機 使用 <div> 等區塊元素排版時，預設的排列方式都是由左至右、由上至下。但若想要讓多個區塊並排、或是二欄、三欄等多欄網頁前端排版時，就需要使用 float 屬性。 如下方例子，若我們使用一般的 div 區塊元素時，則所有的區塊就整齊的由左上出來，一個 <div> 區塊就佔用了一行。（溫馨提示：可以點擊下例視窗左上方的「 HTML 」與「CSS」按鈕來查看語法） See the Pen Float-example-1 by Tedutw ( @Tedutw ) on CodePen . 承上例，若在 CSS 中加一個「float: left;」，則結果如下（溫馨提示：可以點擊下例視窗左上方的「 HTML 」與「CSS」按鈕來查看語法）： See the Pen Float-example-2 by Tedutw ( @Tedutw ) on CodePen . 這是因為「float」屬性使 div 區塊元素「漂浮」起來，不再形成 div 區塊占滿整行的情況 承上例，若把由左側開始「漂浮」的「float: left;」改成由右側開始「漂浮」的「float: right ;」，則所有的區塊就會由右側開始「飄」出來，結果如下（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）： See the Pen Float-example-3 by Tedutw ( @Tedutw ) on CodePen . 你知道 CSS 的浮動屬性總共有三個參數嗎？分別是：left、right 與 none。left 與 right 顧名思義，就是控制區塊由左側還是右側浮出用的拉！如上方兩個例子所示。而 none 就是不使用浮動參數的意思。 下方是另一個文繞圖...

想成為前端工程師?今天讓我們一起來了解定位元素! 為了要設計出更複雜的網頁前端版面， 前端工程師 都必須知道 CSS 的所有「position 屬性」。 如下所示，它有一～大堆屬性值，這些屬性值不但不好理解，也不好記憶！而且稍一設定不好，就會讓許多 CSS 區塊若入走鐘、重疊等窘境。 別煩惱了！現在將會一個個介紹屬性，如下。也建議各位想當 前端工程師 的學員們把這頁加入網頁書籤中！以便日後方便查詢唷！ See the Pen CSS:Position 範例 by Tedutw ( @Tedu tw ) on CodePen .   CSS：Positioning Elements 定位元素 CSS 定位屬性（positioning properties）是用來定位元素使用。它可將一個元素置於另一個元素之後，還可以指定當某個元素的內容太大時該如何做。 所有的元素都可用 top（上）、bottom（下）、left（左） 與 right（右） 屬性來定位。但若沒事先將「定位屬性」設置好的話，以上四種屬性（top、bottom、left 與 right）皆不起作用。它們亦會依照定位方法的不同，而以不同的方式呈現。   靜態定位（position: fixed） 「靜態定位（position: fixed）」是所有 HTML 元素的預設值。當元素為「靜態定位（position: fixed）」時，會遵循「Normal flow （指從左到右、上到下的常態佈局）」來排列。 靜態定位的元素不受 top、bottom、left 與 right 屬性的影響。如下例，儘管我們 CSS 設定為「top: 30px;right: 5px;」（上方距離30px、右側距離50px），被靜態定位的 HTML 元素，排版仍不受這些 CSS 影響。 See the Pen position_static by Tedutw ( @Tedutw ) on CodePen .   固定定位（position:fixed） 固定定位（position: fixed）的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。 不同於靜態定位，固定定位（posi...

學習網頁前端時,CSS的排版屬性絕對不能不知道!今天就介紹兩個給你~ 如果你想開始學Python，或者你剛開始學習Python、上 Python課程 ，那麼你可能會問：“我能用Python做什麼?”，這個問題實在是很難回答呀～因為Python用途太多了！小編我根本不知道從何回答，但是我可以告訴你的是，它幾個主要的用途～ Python主要有以下三大主要應用： 一、網頁開發 網頁框架可以幫助你用Python編寫伺服器端程式碼（後端程式碼）。這是在你的網頁伺服器上運行的程式碼，而不是運行在用戶設備和瀏覽器的程式碼(前端程式碼)。 為什麼需要網頁框架？ 因為用網頁框架可以更容易地構建通用後端邏輯。這包括將不同的URL映射到Python程式碼塊，處理資料庫以及生成用戶在瀏覽器中看到的HTML文件。 二、資料科學 資料科學，這裡包括機器學習，資料分析和資料視覺化。機器學習是什麼?假設你想開發一個能夠自動檢測圖片內容的程式，你希望程式識別這是一隻狗或者希望程式能識別這是一張桌子。 學 Python課程 之後你就可以做到了！比如你可以寫一些程式碼。例如，如果圖片中有很多淺棕色像素，那麼可以識別是狗。或者可以檢測圖片中的邊緣，如果有很多直的邊緣，那麼就是桌子。但這種方法很快就不好用了。如果圖片中的狗不是棕色毛的怎麼辦?如果圖片只顯示桌子的圓形部分怎麼辦? 這裡就需要用到機器學習了。 機器學習通過實現算法，該算法能夠自動檢測輸入中的模式。例如，你將1000張狗的圖片和1000張桌子的圖片輸入給機器學習算法，讓它掌握狗和桌子間的區別。那麼當你給出新的圖片讓它識別是狗還是桌子時，它就能夠進行判斷。 這有點類似孩子學習新事物的方式。孩子是如何學習認知狗或桌子的呢?就是通過大量的例子。你不會明確告訴孩子："如果某個毛茸茸的東西有淺棕色的毛髮，那麼就可能是狗。"你會說，"這是狗，這也是狗。而這是桌子，那個也是桌子。" 如何用Python學習資料分析/視覺化？ 你首先應該了解資料分析和視覺化的基礎知識。在學習了資料分析和視覺化的基礎知識之後，學習統計學基礎知識也將會很有幫助。 三、腳本 什麼是腳本？腳本通常是指編寫能夠自動執行簡單任務的小程式。 我曾經在日本的一家小型創業公司工...

又要提供一個成為前端工程師的偷吃步方法:學習路線!相信這樣你便不再是隻無頭蒼蠅,一步步的方式和目標變得超明確! 達內教育評價小組今天要跟大家分享的文章是2019年教你正確的 網頁前端 學習路線! 很多人想要轉職勝任網頁 前端工程師 ，但是尚未找到適合自己的學習方法。今天達內教育前端工程師課程的老師就為大家分享了這篇正確的 網頁前端學習路線 ，一起來一看究竟!   第一步：把握 HTML /CSS 這是基本的網站的構建元素，是所有網頁設計/開發者都必須要學會的語言。尤其是 HTML5 ，並且 HTML /CSS也很簡單易學，沒得挑！ 第二步：學會使用基本工具 文本編輯器：例如 Sublime Text、Dreamweaver、Visual Studio Code 等 圖像編輯器：Photoshop、Illustrator 等 FTP/SSH 工具：Filezilla、PuTTY 等 網頁瀏覽器：Chrome、Firefox 等 雲端硬碟：Dropbox、Google Drive 等 第三步：進修 JavaScript JavaScript (現階段先忽略Node.js 和任何框架) 理解數據類型：String、Number、Arrays、Objects等 JSON( JavaScript Object Notation) jQuery框架 第四步：搭建基本網站 使用如 Hostgator、Hostmonster 等虛擬主機建置網站 學會操作虛擬主機的 cPanel (Email ,FTP Setup) 用 Ftp 上傳網頁資料、建置 url 域名等等。 第五步:恭喜你! 你有網頁設計師的技能了!——但還不足以被稱為 網頁開發 工程師或 前端工程師 現階段的你可以： 1. 建立簡單的網站 2. 搭建網頁應用的界面 3. 可以把一張 PSD 檔轉化為基於 HTML /CSS 的靜態網頁 4. 有受雇成為網頁設計師的能力、或者選擇成為接網頁設計案子的 soho 族 (尚需與前端工程師配合，無法獨立架站) 接下來你還需要進修的有： 1. HTML /CSS框架：如 Bootstrap 2. 熟悉網頁後端的程式語言：PHP (建議初學者用)、Ruby 等 3. Ja...

身為前端工程師,怕人家笑你不內行?把Media Query學完大家都說:"您真內行啊!" 許多 前端工程師 在面對 網頁設計 時，都要處理 RWD網頁 。這些 RWD網頁 中的圖片如下圖所示，能根據網頁的大小而跟著放大或縮小。這就是所謂的「Fluid Image (流動圖片)」。 在 RWD網頁 中圖片的顯示方式有兩種，一種是傳統的「<img>」標籤，另一種就是直接使用 CSS 的背景圖。在網頁中插入一般的圖片，也就是使用「<img>」標籤的場合時，只需將其 width 或是 height 其中一個尺寸設定為百分比 ( % )，另一個則設為 auto 則可以達到 RWD 的效果，範例如下： #banner { max-width: 80%; /*最大寬度設為 80% 而不是 100%，是為了避免圖片糊掉*/ height: auto; /*高度設為 auto 好讓圖片可以等比例縮放*/ } 上述為一般圖片的 Fluid Image 設定，接下來說明背景圖的部分。 相信大家已經看過夠多美美的滿版圖片的網頁了吧？這是因為在背景圖的設定上，CSS3 的新屬性「background-size」可以指定背景圖片的大小是否可填滿整個容器。未指定「background-size」屬性的話就是 auto 原圖的大小；如果有指定為 cover 的話，那就可以使背景填滿容器。 快來看看以下背景圖片的 Fluid Image 設定為填滿容器的語法： #banner { background-size: cover; } 上過 網頁設計 課程的 前端工程師 應該可以一目了然： 下圖為 background-size 是否有指定為 cover 的差異。左上為有指定為 cover 的範例，右下為無指定 cover ，若圖尺寸不夠則無法填滿。 本篇為「前端工程師必備的RWD基礎」系列文章最後一篇，全系列目錄如下: (目錄) 前端工程師必備的RWD基礎(一)RWD基礎概念 前端工程師必備的RWD基礎(二)流動布局Fluid Grid 前端工程師必備的RWD基礎(三)Media Query基礎之Media Query使用...

目前到底有多少種媒體類型是前端工程師會碰到的?今天用一個表格直接KO!  【前文提要】 在 網頁設計 裡，何謂 Media Query 與 Media Feature？ 前端工程師 在製作 RWD 響應式網頁 時，一定會用到的 CSS 語法就是 Media Query 。簡單來說，我們可以把 Media 視為 CSS 的擴充元件，會比較好理解，而 Media 後面多加一個「Query」代表做 網頁設計 時，網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 ( Media Type )，再針對這些類型 ( Media Type ) 定義其樣式 (Media Feature)，而這個樣式就是所謂的「Media Feature (中文譯作「媒體樣式」或是「媒體特徵」)」。 參考文章： 如何在RWD網頁中套用Media Query語法 而 Media Query 的語法包含了三個部分：媒體類型 (Media Type)、 and/not/only 判斷條件 與媒體特徵 ( Media Features )。 and/not/only 判斷條件 於 本篇 文章做說明，而媒體特徵 (Media Feature) 的各式屬性也於 此篇（頁面尺寸與顯示品質的屬性） 與 此篇（「顏色類」和「互動類」的屬性） 列出。本篇就針對媒體類型 (Media Type) 說明如下： 這篇就直接開門見山了！ 請看下方表格，是 前端工程師 在運用 Media Query 時，首先要指定媒體類型 (media type) 種類，是不是很多種？ 媒體類型(media type) 簡介 all 所有裝置 screen 螢幕裝置 ( 除了 print 和 speech 之外的設備 ) 大小 print 印表機裝置 (包含使用列印預覽所產生的畫面，如列印為 pdf) projection 投影機裝置 speech 朗讀裝置 (針對可「讀出」網頁的設備) 本篇為「 前端工程師 的基礎 RWD教學 」系列文章第四篇，全系列文章如下: ...

前端工程師學習Media Query的媒體特性,一篇怎麼夠?大補帖第二彈點進來馬上索取! 【前文提要】 何謂 Media Query 與 Media Feature？ 前端工程師 在製作 RWD 響應式網頁 時，一定會用到的 CSS 語法就是 Media Query 。簡單來說，我們可以把 Media 視為 CSS 的擴充元件，會比較好理解，而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 ( Media Type )，再針對這些類型 ( Media Type ) 定義其樣式 (Media Feature)，而這個樣式就是所謂的「Media Feature (中文譯作「媒體樣式」或是「媒體特徵」)」。 參考文章： 如何在RWD網頁中套用Media Query語法 而 Media Query 的語法包含了三個部分：媒體類型 ( Media Type )、 and/not/only 判斷條件 與媒體特徵 ( Media Features )。「 媒體類型 (Media Type)」與「 and/not/only判斷條件 」已在本系列的前篇文章做說明，此篇就針對媒體特徵 (Media Feature) 的「顏色類」和「互動類」屬性做說明。而至於「視窗或頁面尺寸類 (Viewport/Page Dimensions)」以及 「顯示品質類 (Display Quality)」的屬性也已於 此篇 文章做說明。 本篇接續前篇介紹 Media Features 媒體特性的互動 (Interaction)與顏色 (Color) ： 用來定義互動 ( Interaction ) 的常見 Media Features 媒體特性一覽表 媒體特徵 說明 pointer、any-pointer 游標準確度 游標裝置 ( 例如滑鼠 ) 的準確性，有三個選項如下 none ：表示沒有游標裝置 coarse ：表示精準度較差的游標裝置，例如觸控螢幕 hover、any-hover hover 反應 簡單來說，hover 是在控制當滑鼠移至某元件時，某元件...

前端工程師必學的Media Query特性,這篇文章讓你看一遍就上手! 【前文提要】 RWD 網頁設計 必備語法：Media Query 前端工程師 在製作 RWD 響應式網頁 時，一定會用到的 CSS 語法就是 Media Query 。簡單來說，我們可以把 Media 視為 CSS 的擴充元件（這樣會比較好理解）。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的Media Type，也是本篇文章講解重點)，再針對這些 Media Type 定義其樣式 ( Media Features ，中文譯作「媒體樣式」或是「媒體特徵」)。 參考文章： 如何在RWD網頁中套用Media Query語法 而 Media Query 的語法則包含了三個部分：媒體類型 (Media Type)、 and/not/only 判斷條件 與媒體特徵 ( Media Features )。 and/not/only 判斷條件 於 本篇 文章做說明，而媒體特徵 (Media Feature) 的各式屬性也於 此篇（頁面尺寸與顯示品質的屬性） 與 此篇（「顏色類」和「互動類」的屬性） 列出。本篇就針對媒體類型 (Media Type) 說明如下： 如果 前端工程師 要運用 Media Query 做 網頁設計 時，首先要指定媒體類型 (media type) 。而目前常用的有多種分別介紹如下： 媒體類型(media type) 簡介 all 所有裝置 screen 螢幕裝置 ( 除了 print 和 speech 之外的設備 ) 大小 print 印表機裝置 (包含使用列印預覽所產生的畫面，如列印為 pdf) projection 投影機裝置 speech 朗讀裝置 (針對可「讀出」網頁的設備) 本篇為「 前端工程師 的基礎 RWD教學 」系列文章第四篇，全系列文章如下: 前端工程師 的基礎 RWD教學 系列文章目錄 前端工程師的基礎...

media query的CSS對前端工程師也是一門學問!尤其當碰到不同條件要加入不同插入字,還不懂的人快進來! 【前文提要】 RWD 網頁設計 必備語法：Media Query 前端工程師 在製作 RWD 響應式網頁 時，一定會用到的 CSS 語法就是 Media Query 。簡單來說，我們可以把 Media 視為 CSS 的擴充元件，會比較好理解，而 Media 後面多加一個「Query」代表做 網頁設計 時，網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 ( Media Type )，再針對這些類型 ( Media Type ) 定義其樣式 (Media Feature)，而這個樣式就是所謂的「Media Feature (中文譯作「媒體樣式」或是「媒體特徵」)」。 參考文章： 如何在RWD網頁中套用Media Query語法 而 Media Query 的語法包含了三個部分：媒體類型 ( Media Type )、and/not/only 判斷條件與媒體特徵 ( Media Features )。「 媒體類型 (Media Type)」已在本系列的前篇文章做說明，而媒體特徵 (Media Feature) 的各式屬性也於 此篇（頁面尺寸與顯示品質的屬性） 與 此篇（「顏色類」和「互動類」的屬性） 列出。 本篇就針對「and/not/only 等 Media Query 的判斷條件做說明如下： Media Query 語法可加入 ：and、or、not 和 only，而這篇主要為您整理相關的條件，教您如何判斷。 分別介紹如下：   🚀 Media Query 之 and 使用方法 1. 當單一條件成立時 範例：如果螢幕寬度超過 600px 以上時，就套用此份 css 設定 @media screen and (min-width:600px) { CSS設定 } 2. 同時符合兩種條件 範例：如果螢幕寬度介於 600 px ~ 800 px 時，就套用此份 css 設定 @media screen and (min-width:600px) and (max-width:800px) { CSS設...