布萊恩的創業小窩

  前端工程師 網頁開發神器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 的話，只要把它們用半形的句號隔開，接在一起就可以了。例如今天我們要產生 Class Name 為「new...

HTML5的電子書翻頁效果原來這麼多樣態,而且今天這篇文章還送你原始碼! 1. HTML5 書本翻頁動畫特效 首先，先來介紹手動翻書頁面特效的基本款～ 這款 HTML5 翻頁動畫可以用鼠標拖動頁面來模擬手動翻頁的效果，也可以點擊書頁的邊框來進行快速翻頁。 ▶網頁上展示 ▶原始碼下載 2. HTML5 3D書本翻頁特效   利用 HTML5 和 CSS3 不但可以實現翻頁動畫，還可以以3D 的立體形式實現！下面這款書本翻頁特效，使用鼠標拖拽書本頁面即可翻動頁面，在翻頁的過程中，書本還可以呈現出3D立體的效果 - 包括書本中的圖片也是。 ▶網頁上展示 ▶原始碼下載 3. HTML5 /CSS3書本翻頁3D動畫 另一種簡潔版書本3D動畫特效，就是這種：當我們將鼠標滑過書本時，書本就會自動一頁頁翻過去，書本的3D效果不但非常鮮明、極簡，舒服。 ▶網頁上展示 ▶原始碼下載 4. 超逼真書本翻頁動畫(CSS3版) 這款 CSS3 動畫效果是模擬書本翻頁的動畫特效。當鼠標滑過書本右上角時，書本即可向前翻一頁，而且翻頁動畫非常逼真。由於 CSS3 的運用，我們並不需要使用複雜的圖片來製造逼真的書本效果，書本翻頁可以很簡單地完成。 ▶網頁上展示 ▶原始碼下載 5. 超逼真書本翻頁動畫(jQuery版) 這款 jQuery 書本翻頁 3D 動畫，功能更加強大，支援頁數不限，並且也有非常逼真美觀的視覺效果。書本的內容支持所有的 HTML 元素，彈性高、強大好用。 ▶網頁上展示 ▶原始碼下載 6. jQuery/CSS3書本翻頁動畫特效 這是一款基於 jQuery 和 CSS3 的書本翻頁動畫特效，外觀清新、而且還有指示便於操作呢！除了點擊滑鼠來翻頁之外，我們還可以直接點擊左右按鈕進行翻頁。 ▶網頁上展示 ▶原始碼下載 延伸閱讀文章： 用Python寫出自己的番茄鐘!人工智慧來增加我效率了~下 Python可是你不能不了解的傳奇!有多好用?看這篇就知道~ 24個對Python初學者的中肯建議,你敢不聽嗎? Python vs ...

在那些前端工程師必學的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學習資料分析/視覺化？ 你首先應該了解資料分析和視覺化的基礎知識。在學習了資料分析和視覺化的基礎知識之後，學習統計學基礎知識也將會很有幫助。 三、腳本 什麼是腳本？腳本通常是指編寫能夠自動執行簡單任務的小程式。 我曾經在日本的一家小型創業公司工...

想成為前端工程師嗎?今天即使選擇自學,看完這篇你將不再是手無寸鐵! 今天小編要跟大家分享的文章是關於零基礎如何自學成 前端工程師 。目前網路發展迅速，前端也成了很重要的崗位之一，前端開發是很簡單的程式設計，甚至都不能叫做程式設計，因為它真的很簡單，很多想要轉行進入 IT 行業的新手會選擇 前端工程師 。那要怎麼自學?下面就來和小編一起來看一看文章吧~首先我們學習前端，要知道前端的三個大內容， HTML 、 CSS 、 JavaScript ，其中 HTML 和 CSS 是相互結合著學習，掌握了這兩個了以後我們就算真正入門了，然後再深入學習 JavaScript 等等。   一、首先我們要理解 HTML 、 CSS 、 JavaScript 分別是什麼？ 用這種觀點來看，其實就很好理解了： HTML 就相當於一個人， CSS 相當於一個人穿著的衣服， JavaScrip t 相當於讓這個人做什麼動作，而這個人就是網站，需要有 header 頭，body 身體，footer 腳……。而網站所呈現給我們各種各樣的樣子，就是我們寫的 CSS 樣式，網站裡的動態效果，都是我們用  JavaScript 去實現的。   二、零基礎學 前端工程師 難學嗎? 想知道 前端工程師 技術，自學的話難不難的新手，可以跟著下面的步驟一起來設計製造一個專屬的網頁！相信你就會知道。我們用到的軟件呢，對於入門級來說，我們一般推薦大家用 DreamWeaver，當你新建一個 HTML 後，出現的界面是這樣的： 下面我們開始輸入原始碼，我們可以看到這裡有這樣的原始碼<body></body>，這個就是我們網頁的身體，我們接下來要輸入的內容都是在這中間輸入的，這個括號表示的標籤，標籤都是一前一後的，成對兒出現的，除了一些特殊的標籤，隨後我們再一一給大家講解。現在我們輸入點內容，看看效果。 我們輸入一個標籤<div><div>，點擊右上角的地球瀏覽一下，會發現彈出了一個空網頁，什麼也沒有，那是因為我們現在只書寫了 HTML ，還沒有寫 CSS ，簡單來說就是，我們創建了一個東西在頁面裡，但是還沒有設置這個東西長什麼樣子，現在我們在設置它的樣子 ...

這篇當然也要替前端工程師好好介紹Emmet的功能!這次要介紹如何快速設定顯示文字和自訂屬性值,用過的都說讚! 前端工程師 必備「Emmet」基礎教學目錄： 如何使用 Emmet 快速產生 HTML 標籤名稱 如何使用 Emmet 快速產生 階層 如何使用 Emmet 複製元素與設定流水編號 如何使用 Emmet 快速設定顯示文字與自訂屬性值 顯示文字 使用 Emmet 能讓 前端工程師 快速展開各種 HTML 元素，但如果能在撰寫的時候就能產生內文，而不需等到元素展開後才補上內文，這樣不就更方便了嗎！別擔心，這個功能，萬能的Emmet 也有！不塊是 前端工程師 的省時神器呀！ 如果想要產生元素中的文字時，可以透過加上 {} 大括號並在其中寫上文字，如我們想要輸入名為「標題」的 h1 標籤、名為「副標題」的 h2 標籤，以及內容為 「內文」 的 p 標籤，就輸入「h1{標題}+h2{副標題}+p{內文}」後按下 Ctrl+E。 } 自訂屬性值 Emmet 除了可以讓 前端工程師 快速展開標籤與文字之外，對於像是 a href、img 等需要設定屬性的標籤，也可以在寫的時候就產生。 如果想要產生元素中的屬性時，可以透過加上 [] 中括號並在其中寫上屬性與值的內容，值需要用雙引號或是單引號包起來。例如我們今天要產生一個連結到網站「https://www.tedu.tw」的 a 元素，就輸入「a[href="https://www.tedu.tw"]」後按下 Ctrl+E。   若想要增加顯示文字，則在 [] 中括號後方加上{} 大括號並在其中寫上文字即可。承上例，我們可加上「達內教育」文字，就輸入「[a[href="https://www.tedu.tw"]{達內教育}」後按下 Ctrl+E。 若想要在 HTML 中，多增加一些屬性值，只要在同一個 [] 中括號中，將每個屬性值用空格隔開就可以了。如在上個例子中，想要設定網站在新分頁開啟，我們就輸入輸入「[a[href="https://www.tedu.tw" target="blank...