可直接不存檔 按右上角閃電在chrom直接預覽網頁
點選編輯中的tag或是css區塊 也會在chrome中反白
點選編輯中的tag或是css區塊 也會在chrome中反白
Quick Edit:選定某一 Element Tag,按下「Ctrl + E」會進入 Quick Edit 的狀態
ex 1.對著class name按 直接編輯其CSS
ex2.對著色碼按 直接編輯色碼
快速鍵:
開關 Live File Previwer:Ctrl + Alt + P
推薦外掛:Color Picker、emmet、Html Templates
ex 1.對著class name按 直接編輯其CSS
ex2.對著色碼按 直接編輯色碼
快速鍵:
開關 Live File Previwer:Ctrl + Alt + P
推薦外掛:Color Picker、emmet、Html Templates
Color Picker
option+command+K 選擇顏色(可包含透明度)
option+command+K 選擇顏色(可包含透明度)
emmt
1.輸入「div>p>a」按tab後 自動產生「<div><p><a></a></p></div>」
2.輸入「ul>li*3」按tab後 自動產生「<ul><li></li><li></li><li></li><ul>」
3.輸入「div>(header>ul>li*2>a)+footer>p」按tab後 自動產生
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
3.輸入「div>(header>ul>li*2>a)+footer>p」按tab後 自動產生
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
4.其他語法:http://docs.emmet.io/cheat-sheet/
Html Templates
開新檔案後,點選【Edit】 就會看到HTML Template的選項 在下拉選單中,就可選擇所需的HTML範本。
Html Templates
開新檔案後,點選【Edit】 就會看到HTML Template的選項 在下拉選單中,就可選擇所需的HTML範本。
沒有留言:
張貼留言