iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 6
4
影片教學

CSS 優良部份系列 第 6

Emmet Live Demo 火力教學

「工欲善其事,必先利其器」是亙古不變的道理,而 emmet 也是前端開發者必學的項目,除此之外,編輯器上的熱鍵也少不了要研究一些。

這裡筆者分享一部自己操作 emmet 的影片,全程 3 分半,同時講解自己用到的 emmet 語法與熱鍵,以及一些上稿的小撇步。

emmet

  1. 網頁環境:!
  2. 插入 CSS:link:css
  3. h1 標籤:h1
  4. .pfofile:<div class="profile"></div>
  5. 大括號可在 HTML 標籤內輸入文字:h2.title{中文標題}>span{英文標題}
  6. 先輸入文字列表,最後再上 HTML 標籤,是用 Wrapping individual lines 技巧,相當適合拿來多行上稿使用

OS 與 VSCode 熱鍵(Win 與 Mac 中文表,以下則使用 Win 為範例)

  • 在下方插入行:Cmd+Enter
  • 選取整行:Cmd+L
  • 選取多行:游標處 shift 按住後,使用上下鍵依序圈選
  • 系統在兩個軟體間的切換:Cmd+Tab

教學補充

新手建議熱鍵教學

一開始不用學太多,先將左側欄學一些就很實用了,如下圖,像是基礎跟游標搜尋基本上都必學
https://ithelp.ithome.com.tw/upload/images/20200920/200402212a7vWvGxvs.png


上一篇
多思考幾分鐘,你不需要那麼多 div 結構
下一篇
CSS 之 Utility 通用類別、Components 元件介紹
系列文
CSS 優良部份30

尚未有邦友留言

立即登入留言