Css + Div layout Summary

1. Group selector.
Note: When the style attributes of several elements are the same, you can call the same declaration. elements are separated by commas,
P, td, li {
Font-size: 12px;
}

2. Derivative selector.
Note: You can use the derived selector to define a style for a child element in an element, for example: li strong {
Font-style: italic;
Font-weight: normal;
} Is to define a italic-not-bold pattern for the child element strong of li.

3. ID selector.
Note: The css layout is mainly implemented by the layer div, And the div style is defined by the 'id selector.
For example, we first define a layer. <div id = "menubar"> </div> and then define it in the style sheet, # menubar {
Margin: 0px;
Background: # FFFFF;
} Among them, menubar is the name of the self-defined div. Note that you must add the '#' sign before.
The id selector also supports derivation, for example: # menubar p {
Text-aglin: right;
Margin-top: 10px;
} This method is mainly used to define layers. It is more complex than those with multiple derived child elements,

4. Category selector.
Css: css uses a vertex to define a category selector, for example,. 12px {
Text-aglin: center;
Font-family:;
Font-size: 12px;
}
On the page, use the class = "class Name" method to call: <span class = "12px"> 12 PX font size </span> This method is flexible, can be created or deleted at any time,

5. Define the link style (pseudo style ),
Note: css uses four pseudo classes to define link styles, namely, a: link, a: visited, a: hover, And a: active. Example: a: link {font-weight: bold; text-decoration: none; color: # c30}
A: visited {font-weight: bold; text-decoration: none; color: # 16A}
A: hover {font-weight: bold; text-decoration: none; color: # FFFFF}
A: active {font-weight: bold; text-decoration: none; color: # EEE}
The preceding statement defines the style of "link, accessed link, mouse over, and mouse down.

Note that the above four styles can be "missing", but they cannot disrupt the order. Otherwise, the style will be different from what you expected. Their principle is: Love and hate.
That is, the love hate principle. The sequence is "l" in love is link, "v" is visited, "h" in hate is hover, and "a" is active.

6. Combine the selector to create exquisite design results.
Use a pretty pattern to replace the dull black spots in the normal unordered list. First, use css rules to tell the unordered list of the category attribute inventory.

Ul. inventory {
List-style: disc url (/images/common/lister2.gig) inside;
}

Its call Tag:

Code
<Ul class = "inventory">
<Li> <a href = "/angelfish"> Angelfish </a> (67 items) </li>
<Li> <a href = "/angeld"> Angels/Frogfish </a> (35 items) </li>
<Li> <a href = "/anthias"> Angelfish </a> (5526 items) </li>
<Li> <a href = "/basslets"> Angelfish </a> (15 items) </li>
<Ul>

7. The abbreviation is clockwise.

Margin: 25px 0 25px 0;
8. Row Height.
Note: The normal Row Height is 150%.

Line-height: 150%;
Well, the layout and Css of the project Login and Main pages have been developed over the past few days. It is not a professional artist. I want to learn and record useful things and share them with you.

Author blog: http://www.cnblogs.com/troubleLife/