PSD page cut into HTML tips summary

Keyword: PSD cutting tips for generating HTML pictures Essentials CSS Styling essentials REM

Comparison with the master after cutting the code to improve the study (research points: The quality of the page after cutting, source size and image size, JS technology, animation technology, development and naming norms, etc.)

First, PSD cutting skills----------

Although the firework tool is cut, the code is generated automatically after cutting. But the standard specification has to be modified by itself, and I believe that automatic generation will have a lot of redundancy and garbled. If you want to learn and thoroughly master the production of HTML, or do your own good.

As long as the practice or more work, hand-written CSS is bound to be born skillfully, the inevitable system to make HTML+CSS code and less, maintenance and convenience. Write code and Practice martial arts, need to continue to cultivate, to become a master.

Cutting principles and techniques
1 div partition particle size suitable, so that the overall picture should not be cut apart, otherwise slow production and code K number more, not control, the separate cut separate.
2 duplicate pictures cut into a small picture of a wide height of 20px, which facilitates re-use.
3 cutting principle or to ensure the quality of the picture, now fast + cache.

Second, the creation of picture points----------

Consider the image quality first, then which format file is small, which one to use. Currently WiFi and 3g4g network speed, page transmission is very fast, there is a div is not before the table load slow.
JPG of the general loss in 60-80 for the best, GIF you see 128 and 256 of the loss difference is not big, not a choice of 128 on it, because such exported pictures small.
There are also commonly used PNG files, which can be used to apply transparent features. Convenient WebApp transparent layer development.

Three, CSS style points----------

How do the pictures in the div center?
The 1th method: The picture puts Div, div {margin:0px auto;}
2nd method: Text-align:center; Center vertically, calculated by Paddin-top = (height of div-image height)/2
Of course there are other ways.

How to make the text module suitable?
Indent each line: Padding-left:2em
Indent per paragraph: text-indent:2em
But how to control, the first line is not indented, the rest is indented 2 characters
The format is as follows:
1, I am the first line of text
To be aligned AH hehe and
It's aligned.
2, I am the second line of text
Yes, it's aligned.
Above this situation, can only separate get two Div, put the number of numbers put Div1 put the text div2 on the alignment.

Differences between HTML <radio> radio button controls and HTML5
CSS input checkbox and radio style beautification Http://www.haorooms.com/post/css_mh_ck_radio

Div scroll bar style overflow:auto;overflow-y:scroll;

/* Avatar: Centered and rounded, radius 100% 's application is wonderful */
. headpic {position:absolute; top:0px; left:0px; width:100%; height:100%; border-radius:100%; overflow:hidden; background-size:100%; }

How to solve the overlapping of the next Li content after the word wrapping in ul Li? Padding-left:2em;

Iv. about resolution, about the front-end font size----------

Mobile font Unit font-size Select px or REM
1. For only need to fit the mobile device, the use of PX can be;
2. Use REM for the need to adapt to a variety of mobile devices; For example, you just need a device that's quite different in resolution, such as iphone and ipad.

The relationship between logical resolution and physical resolution can be referred to: "Pixel", "render pixel" and "physical pixel". How do they relate?
Font size of front-end development PX,EM,REM,PT reference: http://blog.csdn.net/ttongzw/article/details/38040947
The "font size of the root element" is described in this web site. Let's get a detailed understanding of REM.
REM is a new way of defining the font size that CSS3 appears, and its difference from EM is that REM is always relative to the HTML element (HTML), not relative to the parent element, as follows:
html{
Font-size:1em;
}
. div2{
Font-size:2rem;

}
p{
Font-size:1rem;
}

You can see that the P element size is not as large as EM and div2, but as large as the 1rem of the HTML definition, 16px.
If the font size of the P element is percent%, which is multiplied by the percentage directly on the parent element, the same px (that is, if the set percentage is relative to the parent element)

CSS3 REM Sets the font size Http://www.w3cplus.com/css3/define-font-size-with-css3-rem
When using "Em" as a unit, you need to know the setting of its parent element, because "em" is a relative value, and a value relative to the parent element, whose true formula is:
1÷ the Font-sizex of the parent element needs to convert the pixel value = em value

Let's look at a simple code example:

HTML {font-size:62.5%;/*10÷16x100% = 62.5%*/}
Body {font-size:1.4rem;/*1.4x10px = 14px */}
h1 {font-size:2.4rem;/*2.4x10px = 24px*/}

I have defined a basic font size of 62.5% (that is, 10px) in root element

Another example:
HTML {font-size:156.25%;/*25÷16x100% = 156.25%*/}
body {font-size:1.6rem;/*1.6x25px = 40px */}

HTML Simple Animation----------

Using H5 features and JS technology to achieve the page animation, follow-up: Html5+js commonly used animation summary should do a detailed study of the topic.

Page Animation Implementation method: Animation A total of two categories, is nothing more than frame animation (frame) and deformation animation (tween)
1 gif or Flash animations
2 JS control to achieve displacement and other animations
3 CSS3 style control for animation
4 HTML5 new features for animation

A small example of left and right motion:
$ (function () {
Animated effect of left and right movement
var changedivposition = function () {
$ ('. A12 img '). Animate ({' Left ': ' 1.5% '}, +). Animate ({' Left ': ' 0% '}, 600);
};
Changedivposition ();
Objsetinter = SetInterval (changedivposition, 1500);
Invite Mask Layer
$ (' #btnShare '). Click (function () {
Showinvite ();
});
});

/* Style sheet: Invite transparent layer */
The bottom Translucent mask
. invite1 {position:fixed; top:0%; left:0%; width:100%; height:200%; Background:rgba (0, 0, 0, 0.8) None repeat scroll 0 0! Important Filter:alpha (opacity=80); Background: #000000; z-index:1000; Display:none; }
Response Click Layer
. invite2 {position:fixed; top:0%; left:0%; width:100%; height:100%; z-index:1010; display:none;}
In the top right corner, click
. invite21 {width:800px; height:600px; Background-image:url ('.. /img/user/invite.png '); }
. vpbg {background-repeat:no-repeat; background-position:center top; background-size:100%;}

Page Call
<div class= "Invite1" ></div>
<div class= "Invite2" ><div class= "Invite21 vpbg" ></div></div>
</body>
<script>
var showinvite = function () {
$ ('. Invite1 '). Show ();
$ ('. Invite2 '). Show ();
};

$ (function () {
$ ('. Invite2 '). Click (function () {
$ ('. Invite1 '). Hide ();
$ ('. Invite2 '). Hide ();
});
});
</script>

---------- ---------- ----------
Block,inline and Inline-block Concepts and differences
Reprinted from: http://www.cnblogs.com/KeithWang/p/3139517.html
General concept

The two concepts of block and inline are abbreviated, complete and exact, block-level elements (block-level elements) and inline elements (inline elements). Block elements are usually separated by a separate line, and the inline element does not produce a newline, and a series of inline elements are displayed in a row until the row is full.
In general, the HTML element has its own layout level (block element or inline element):
Common block-level elements are DIV, FORM, TABLE, P, PRE, H1~h6, DL, OL, UL etc.
Common inline elements are SPAN, a, strong, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR, etc.
The block element can contain both the block element and the inline element, but the inline element can only contain inline elements. Note that this is a general statement that each specific element can contain elements that are also specific, so specific to individual elements, this rule is not applicable. For example, the P element can contain only inline elements, not block elements.
In general, you can change the layout level of an element by setting the Display:inline and Display:block.

Block,inline and Inlinke-block Details comparison

Display:block

The block element will have a single row, and multiple block elements will have their own new row. By default, the block element width automatically fills the width of its parent element.
The block element can set the Width,height property. Block-level elements, even if they are set to a width, are still exclusive rows.
The block element can set the margin and padding properties.

Display:inline

The inline element does not have a single row, and multiple adjacent inline elements are arranged in the same row until one line is not arranged before a new line is changed, and its width varies with the contents of the element.
The inline element setting width,height property is invalid.
The margin and padding properties of the inline element, horizontal padding-left, Padding-right, Margin-left, and margin-right all produce margin effects, but the vertical direction of the padding-top, Padding-bottom, Margin-top, Margin-bottom does not produce a margin effect.

Display:inline-block

In simple terms, the object is rendered as an inline object, but the object's contents are rendered as a block object. Subsequent inline objects are arranged in the same row. For example, we can give a link (a element) Inline-block attribute value, so that it has both block width height and inline peer characteristics.

Additional Information

In general, we will use Display:block,display:inline or Display:inline-block to adjust the layout level of elements, in fact, display parameters far more than these three kinds, is only more commonly used.
IE (low version IE) originally does not support Inline-block, so in IE, inline elements using Display:inline-block, in theory, IE is not the other, but the use of display:inline-block in IE will trigger layout , so that the inline element has the appearance of the Display:inline-block attribute.

The PSD page is cut into HTML tips summary