How to improve my html&css technology, write structured code

Ext.: http://www.cnblogs.com/w-wanglei/p/5528940.html

Objective

Prior to writing four HTML and CSS knowledge points, also equivalent to a knowledge point summary. Need to be able to collect, usually in the development process should encounter these points, the time to review these blogs may be easier to understand. Starting with this article is more about the front end problems that often make people headache in the development process, and how to write front-end code with high performance. I also just into the front side of the dishes, I hope you front-end Daniel many corrections in the content of the wrong place, let me improve faster. Recently saw a lot of blog Park front-end Daniel, are in the major bat company work, this is my dream of development ...

Navigation

1. Basic article

These HTML, CSS knowledge points, interviews and peacetime development all need No1-no4 (knowledge points: HTML, CSS, box model, content layout)

These HTML, CSS knowledge points, interview and normal development need No5-no7 (knowledge points: Text settings, settings background, data list)

These HTML, CSS knowledge points, interviews and peacetime development all need No8-no9 (knowledge point: Media operations, build forms)

These HTML, CSS knowledge points, interviews and peacetime development all need no10-no11 (knowledge points: Table operations, code writing rules)

2. Advanced article

How to improve my html&css technology, write structured code

NO1.CSS Presentation and organization

1.CSS Structured

(1) Comparison of classic style architecture: We often see the web system style files are generally only index.css or base.css, but in the actual development process we should try to block the CSS style by module, put the same style into a module. Although a lot of CSS files are added after Modularization, when we release the version, we can compress all the CSS files into a CSS file, which can improve the loading speed of the page. The following is a more classic CSS style schema:

# Base//Base style –NORMALIZE.CSS  //Standardized style –LAYOUT.CSS  //Flow layout style –TYPOGRAPHY.CSS  //Paragraph Style # components//Component styles – alerts.css–buttons.css–forms.css–list.css–nav.css–tables.css# Modules Module Style –aside.css//Sidebar style –FOOTER.CSS//Bottom style –hea DER.CSS//Head style

(2) Modular CSS Architecture: includes base, Layout, module, State, Theme module. The meaning of each module is as follows:

# Base (the core element style, which overrides the default style of body, form, etc.) # Layout (different elements of size and grid style) # Module (individual special page style) # state (based on various events, provide different status styles, for example: Hover, etc.) # Theme (based on skin, look, feel Style)

2. How to increase page loading speed

(1) Selector notation: Because the browser renders each selector on the CSS style name path, you should keep a short selector path, reduce rendering, and increase page loading speed.

(2) Reduce or compress files: When the file is transmitted through the HTTP protocol, the HTML, CSS, and JS files can be compressed by gzip to reduce traffic. Different HTTP servers provide gzip compression transfers.

(3) Reduce HTTP requests-Reduce the number of files: combine similar files into one file, such as compressing multiple CSS files into a single CSS file, compressing multiple JS files into a single JS file, so that only one HTTP request is sent at a time.

(4) Reduce HTTP requests-load files in the correct location: The CSS file should be loaded at the beginning of the head and the JS file should be placed in the last position of the page (body close </body> before loading). This is because while loading the CSS file can load the rest of the page, while loading JS file will cause the page load blocking, so it is best to wait for the page to load the JS file, thus improving user perception.

(5) Picture cutting: Often see a set of action buttons, each button has a different icon, loading the page each icon loading will produce a request. We can use a merged picture as the background of multiple elements, and then use background-position to position the picture. The following page implements this thought:

<!        DOCTYPE html>
The results of the show are as follows:
No2. Element positioning
1.float Floating positioning problem
(1) Float classic question: First look at the code and show the results:
<! DOCTYPE html>
From the results shown below, the background color set by the parent container Box-set does not take effect, and the parent container's height equals 0.
(2) Workaround: Use overflow and clearfix two technologies.
(3) Workaround-overflow: Add the property Overflow:auto directly in the Box-set style and add it to see that the parent container's background settings are in effect. But considering the compatibility, the IE6 also needs to set the width and height. But there are other issues left here, if we set other styles, such as the Box-shadow style, that could cause the shadow effect to overflow the Box-set container.
(4) Workaround-clearfix: Change the page to the following code, run the page Box-set show normal and also solve the IE6 and 7 compatibility issues. It should be explained that: Bofore pseudo-class organization child of the Top-margin overflow, and: after Pseudo-class organization child buttom-margin overflow.
<! DOCTYPE html>
2.position Properties
(1) Position default value: The default position of the element is static.
(2) The relative value of position: The offset position relative to the element position property value is static. Relative does not cause changes in the position of other elements.
(3) absolute value of position: the element overflows from the regular flow document, the position of the element is relative to the nearest position to relative or the absolute is worth the parent element offset position, and the position of the element is not found relative to the body offset.
(4) Fixed value for position: The offset position of the element relative to the browser window does not change position as the browser's scroll bar scrolls. IE6 does not support this property.
(5) Fixed implementation header and foot docking function: The following example implementation footer consistent docking at the bottom of the browser, does not change with the scrollbar position.
<! DOCTYPE html>
3.z-index Property
(1) Default Z-index location: The higher the top position of the DOM node, the lower the z direction.
(2) Preconditions: If you want to set the Z-index property, you must set the position property of the element to relative, Aboslute, or fixed. For example, the following code docks elements hierarchically, respectively:
<! DOCTYPE html>Category: Front-end technology good text to the top attention to my collection of the article Heavi
Follow-15
Fans-195 + plus attention50(Please comment on the article) «Previous: These HTML, CSS knowledge points, interview and the usual development need no10-no11
How to improve my html&css technology, write structured code