影片教學

如果喜歡我的文章或是影片，可以訂閱我的 Youtube 頻道、按讚、分享，我會分享更多實用的教學影片！

訂閱 Youtube 頻道

前往 Youtube 觀看

Chrome 開發者工具

首先要來介紹一下 Chrome 的開發者工具，功能非常非常的多，本篇文章著重在 Elements，若有人需要其他教學，可以在底下留言。

首先，要如何開啟 Chrome 的開發者工具呢？

使用快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)。

首先在上面先選擇 Elements，上半部的那些程式碼是網頁的HTML，下半部的程式碼是網頁的CSS。

HTML 是用來顯示文字、表格、區塊等等。

CSS 是用來調整 HTML 的樣式，像是文字大小、字體、位置等等。

CSS 語法

我這裡列出幾個比較常用到的CSS語法：

background-color : 背景顏色
font-family : 字型
color : 文字顏色
font-size : 文字大小
line-height : 行距
display : 顯示方式

如果想要練習，可以到這個網站學習與實作：w3schools

想要學習更完整的CSS語法，可以參考以下兩本書：

1. 學好跨平台網頁設計：HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班（第二版）

2. CSS 大全（第四版）

隱藏區塊

step 1

透過開發者工具的左上角的箭頭，選取要修改的區塊，再到開發者工具大概上下點一下，尋找最符合的區塊。

step 2

選擇要修改的區塊後，在下方按+的符號，輸入 CSS 語法。

這裡列出幾個常用的語法：


display: none; /*隱藏區塊*/

color: #ffffff; /*文字顏色*/

font-size: 20px; /*文字大小*/

background: red; /*背景顏色*/

step 3

接著到佈景主題自訂的地方，選擇客製化CSS，將語法貼進去，下圖是原本的樣子。

step 4

貼上隱藏的語法後，上面的 bar 就消失了。

結論

本篇文章是阿璋第一次透過影片來教學，教大家如何快速的客製化自己的網站，並且透過隱藏區塊來作為示範。

不知道這樣的影片教學大家的感受如何？希望可以在下面給我一點回應，我才知道接下來要不要繼續照這種模式。

如果想要學習更完整的前端語法，可以看看以下這部影片，教得很好很清楚！

(Ken Cen出品)建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL 建立網站

覺得自學很困難，不想要花時間在這上面，可以看看本站外包服務，由阿璋幫你客製化！

支持阿璋的新書《打開網路就有錢》，裡面分享許多自媒體以及投資理財的知識，非常適合網路創業者以及想要增加額外收入的上班族閱讀。

如果你對幣圈資訊有興趣，可以訂閱此電子報：幣圈最新資訊

我目前有成立一個亞洲最大的幣圈自媒體 Discord 社群：Crypto Mind 加密腦

推坑阿璋超愛的商品，歡迎加入團購群：阿璋好物團購 LINE 社群

12篇文章手把手教你如何透過部落格開始賺錢：站長之路

更多相關社群連結：工具王阿璋社群列表

本站有部分連結與商家有合作關係，透過我的連結購買，我會獲得少數佣金，讓我可以持續營運網站，但並不會影響您的任何權益，詳情查看免責聲明。

如果我的文章對你有幫助，歡迎贊助我一杯咖啡！

本站所有內容皆為阿璋個人經驗分享，如有涉及投資請謹慎評估，阿璋不做任何投資建議。

文章引用請來信索取授權，否則將保留法律追訴權。

by Johntool-工具王阿璋