CSS missing articles and CSS missing articles
Previous: I have already introduced some basic knowledge points about CSS. CSS is used to set samples for the page. In general, in a website, CSS should be independently enclosed in a single. CSS external file. Style settings are not difficult in general, but they need to be careful and patient. When I used to make simple static pages, I often encountered bugs, such as clearing floating pages and layout of the holy cup. These knowledge points are not difficult, but they are trivial, and I have not yet been able to fully organize them. Later, I will make a specific analysis based on the specific problem. Today, I will mainly look at the last summary and check for missing information, if you are interested, you can communicate with each other below. 1. fireworks tools
-- This tool is used to compile web pages based on the design drawing, and picpick is commonly used. I use this tool. Below is a brief introduction to this tool.
1.1 normal switch
K |
V |
H |
Z |
U |
T |
I |
G |
Slice |
Xiao Hei |
Xiaoshou |
Zoom |
Graphics |
Text |
Color Extraction |
Color Filling |
1.2 temporary Switch
Ctrl -- Xiao Hei |
Ctrl + space -- zoom in |
Space-hand |
Ctrl + Alt + space -- zoom out |
Normal zoom-in and zoom-out will be automatically moved to the middle of the image. The temporary zoom-in and zoom-out are still in the original position, which is convenient to use (Ctrl + N New; Ctrl + O open) |
1.3 Other skills
Unnecessary guides are automatically deleted after being dragged back to the ruler;
Ctrl + plus sign or scroll wheel to enlarge the image Ctrl + minus sign or scroll wheel to zoom out the image (inconvenient)
1.4 lock the image before measuring the image:
2. Two website construction strategies
Progressive enhancement-progressive enhancement: At the beginning, only the least features of the site are built, and then the function is continuously added to various browsers.
Elegant downgrade-graceful degradation: Build the complete functions of the site from the very beginning, and then test and fix the problems in the browser.
3. Introduction to common la s
1) Fixed Layout
2) Responsive Layout
3) stream Layout Fluid Layout
4) Grid Layout
5) Waterfall flow Layout Waterfall Layout
6) Holy Grail Layout
4. Set the website icon
4.1 Enable Logging;
4.2 place the icon in the root directory (or another directory) and insert it between the
4.3 shortcut
4.4 websites using web icons: http://www.bitbug.net/
5. Pay attention to the reference sequence when referencing a style file: base is a public style, index is a specific style, and the style of a specific webpage should be placed behind the public style to overwrite it.
Link label |
|
Learn more |
Charset |
Character encoding method of the linked document |
Almost no mainstream browsers support this attribute |
Href |
Location of the linked document |
|
Hreflang |
Language of the text in the linked document |
|
Rel |
Link between the linked document and the current document |
Commonly used stylesheet and shortcut icon (sizes-the size of the website icon, applies only to rel = "icon ") |
Rev |
Opposite to rel, reversed relationship |
Almost no mainstream browsers support this attribute |
Target |
Window or framework in which the linked document is loaded |
Almost no mainstream browsers support this attribute |
Type |
Link Document Type |
|
6. Hierarchy
6.1 remember to add positioning; otherwise, the z-index will not take effect.
The box behind 6.2 will hold down the front box, and the box with a high z-index will hold down the box with a low z-index; the higher the box is than its own z-index, the closer it will be, in addition to looking at themselves, they also need to look at their parent level. The higher the parent level, the higher the child level.
Summary:The level should not only compare the child level, but also compare the parent level (fight dad ). In theory, there is no maximum value for z-index, but it is actually the 32 power of 21474836472. If the minimum value is not 0, a negative number can be obtained.
7. CSS3 rounded corner (border-radius)
7.1 CSS3 attribute, used to add a rounded border to an element:
Border-top-left-radius: 2px;
Border-top-right-radius: 2px;
Border-bottom-right-radius: 2px;
Border-bottom-left-radius: 2px;
7.2 Abbreviation: border-radius: 2px; sequence is set clockwise from the upper left corner (upper left right bottom left)
8. Absolute positioning can change the display mode of elements, but relative positioning cannot be 9. translucent effect:
Background: rgba (0, 0,. 2 );
Red green blue alpha (red value green value blue value transparency)
The color value ranges from 0 ~ 255; Transparency value range: 0 ~ 1; if it is a zero point, the preceding Zero can be omitted.
Supplement 1: Emmet syntax
Http://docs.emmet.io/cheat-sheet/
Supplement 2: webpage Performance Optimization
Css Compression
Http://tool.oschina.net/jscompress/
Web page performance test
Http://www.webpagetest.org/