Developer Tools (chrome)
- This tool is our indispensable tool. If there is a problem with the code in the future , our first reaction is:
- "Press F12" or "shift+ctrl+i" to open the developer tools.
- Menu: Right-click the webpage to blank out---check
- Find page elements through the developer tools small pointer tool
- The left side is the html page structure, the right side is the css style
skill:
- ctrl+wheel can enlarge the size of developer tool code
- On the left is the HTML element structure on the right is the CSS style
- The CSS style on the right can change the value and color to see the effect after the change
- ctrl + 0 restore browser size
Sublime shortcut operation emmet syntax
- The predecessor of Emmet is Zen coding, which uses abbreviations to improve the writing speed of html/css.
- Generate tags directly enter the tag name and press the tab key. For example, div and then tab key, you can generate <div></div>
- If you want to generate multiple same tags and add * , for example, div*3 can quickly generate 3 divs
- If there is a parent-child relationship tag, you can use> such as ul> li.
- If there is a sibling label, just use + , such as div+p
- If you generate a class name or id name, just write .demo or #two tab.
- If the generated div class names are in order, you can use the auto-increment symbol $
.demo$*3
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>