娶了UI設計師的Python工程師-北歐生活

   你聽過 前端工程師 開發神器Emmet嗎?認識它你就開始省時啦!     目錄 快速產生標籤名稱 （Tag Name） 快速產生 className 與 id 父子兄弟階層、群組、上一層 父子元素一次輸入 兄弟階層一次輸入 將元素設為同一階層的群組 上一層 複製元素 編號 設定起始編號 顯示文字 自訂屬性值 身為一個 前端工程師 ，一定要裝一個「省時神器」 Emmet 外掛，可以大大節省前端工程師在編寫  HTML  及 CSS 的時間。省下的時間可以讓你去體驗人生各種美好的事物，如玩玩喵星人、上上健身房運動等等。 Emmet 支援的網頁編輯器如下圖： 安裝下載的方式因個網頁編輯器而異，且在網路上皆可以查到教學，故此省略。以下小編先介紹基本的使用方式： 快速產生標籤名稱 （Tag Name） 前端工程師 在寫網頁的第一步，就是在網頁編輯器中開出新的頁面，並產生標準的  HTML5  樣板。透過 Emmet，我們可以先在編輯器中輸入「!」或是「html:5」後，再按下 Ctrl+E 鍵即可。 假設我們要產生一個 p 元素，那麼我們只要直接輸入 p 後，再按下 Ctrl+E 鍵，就能自動產生起始元素及結束元素。如下所示： 只要是 HTML 所定義的元素，如 h1-h6、center、title 等等，都能使用上述方示，快速產生出相對應的語法如下 有些元素還會帶入跟該元素有關的屬性，例如：iframe、a 或是 img 等 快速產生 className 與 id 我們也可以在產生元素時，直接加上指定的 Class Name。寫法是元素名稱與 Class Name 名稱中間用英文句點隔開。例如今天我們要產生 Class Name 為「title」的 h1 標籤，則輸入「h1.title」後按 Ctrl+E 若是要針對單一元素要加上多個 class name 的話，只要把它們用半形的句號隔開，接在一起就可以了。例如今天我們要產生 C...

  AWD難道真比 RWD 難用?繼續往下看說不定會推翻你的理解呢!       目錄 該選擇 RWD 還是 AWD ? 先看看自己的需求吧！ 評估現有的資源人力 對網頁設計畫面要求較嚴謹的狀況下，就使用 AWD 吧！ AWD 要怎麼做才能對 SEO 無痛? 該選擇 RWD 還是 AWD ? 先看看自己的需求吧！ 當下  RWD  正夯，但並不代表所有的網頁都適用 RWD 技術。決策者必須先檢視網站的規模、內容、專案的需求以及人力，再決定使用  AWD  還是 RWD。至於哪一類的網站適合 RWD、哪一種的網站適合 AWD，簡單整理如下表所示 ：   RWD AWD 人力需求 較少，因為只有一套  CSS 較多 (因為需要多套 CSS)， 需要網頁人才與尚需 前端 工程師撰寫判斷裝置後自動匯入相應的 CSS 的程式 維護成本 較少，因為只有一套 CSS 較多，因為有多套  CSS  以及程式 適用內容 網站內容較單純時適用。 如簡單的企業形象網站、一頁式網站等等。 網站內容較多、較複雜時適用。 如博克來、MOMO 購物網、蝦皮拍賣等。 適用排版 較簡潔的畫面與排版 較多元化、複雜的畫面與排版 SEO  支援 SEO  優化、維護較容易 同左，但前提是不能直接把網站分成桌機版跟手機版兩個網站再進行轉址，導致流量分散。 工程師必須要在同一個 URL 下寫出對應裝置的網站架構並指定適用的 CSS 可支援的裝置 各裝置都適用 各裝置都適用 以上分析建議仔細看過。 以下再作補充說明： 評估現有的資源人力 只需要寫一套  CSS ...

  RWD 和AWD的差別到底在哪?還搞不清楚?今天你得要好好看完這篇啊!   目錄 RWD 和 AWD 的差異與優缺點 RWD、AWD 的異同之處 共同之處 不同之處 RWD AWD RWD 的優點與缺點 優點 缺點 AWD 的優點與缺點 優點 缺點 該選擇 RWD 還是 AWD ? 先看看自己的需求吧！ AWD  跟  RWD  的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。 在規劃網站時，相信有不少的 PM 在與 前端 工程師或是 網頁前端設計師 在溝通上遇到瓶頸，像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過 網頁設計 、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。 RWD 和 AWD 的差異與優缺點   在網頁上， RWD  是「Responsive Web Design (響應式 網頁設計 )」的縮寫；而 AWD 則是 「Adaptive Web Design (自適應式 網頁設計 )」的縮寫。RWD 與 AWD 是為現今大多數人們習慣使用手機、平板等行動裝置上網而生的  CSS  寫法，讓 網頁設計 無論在桌機螢幕上、或是尺寸較小的行動裝置上，都能清楚的呈現，讓使用者能更舒服的瀏覽網頁。 RWD 與 AWD 的差異，簡單的來說，前者是無論行動裝置或是桌機，都使用同一套 CSS；而後者是針對各種裝置撰寫對應的 CSS，可以有多套  CSS ，例如桌機有桌機的一套 CSS，手機有自己的一套 CSS。 RWD  與 AWD 的差異，簡單的來說，就是前者只有一套 CSS 檔案、後者卻有多套 CSS 檔案。詳述如下： RWD 會把所有裝置的樣式都寫在同一套  CSS  中，因此無論行動裝置或是桌機，都是使用同一套 CSS 。當使用者打開了網頁，就能即時透過網頁的寬度，決定要套用...

前端工程師絕不能不學CSS中的定位元素,還不會的,看完這篇就成功入門啦! 為了要設計出更複雜的網頁前端版面， 前端工程師 都必須知道 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）的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。 不同於靜態定...

  前端工程師都要必備的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屬性:display與visible屬性! 本篇介紹 網頁前端 排版的兩個 CSS 屬性：display 屬性與 visibility 屬性。 CSS ：display 屬性 display:block 對於 CSS 語法來說， 網頁前端 的每個元素都是一個矩形盒（rectangular box）模型。而使用「display」屬性，便可以決定「盒（box）」的呈現方式。 又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符。 以下範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。 在下方的顯示視窗中，按「CSS」，就可以觀看 CSS 的語法如何設定了！ See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 網頁前端 CSS 語法設定如下： span.block{ display:block; } display:inline inline 元素只佔用可用寬度的最大值，並不強制換行。 將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。 See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 CSS 語法設定如下： span{ display:inline; } display:none 「display:none」用來將元素隱藏使用，當元素隱藏後，就不佔用任何空間了，且在 網頁前端 頁面顯示時也不會被展現出來，就好像該元素不存在一樣。 在以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。 See the Pen display: none by Tedutw ( @Tedutw ) on CodePen . 上述介紹的「block」、「inline」、「none」都是最常碰到的的 d...