CSS3 and page layout learning summary (2) Box Model, margin folding, inline and block tags, CSSReset

1. Box Model

The box model is also called the box model. Most elements in HTML will generate a rectangular area in the browser. Each area contains four components, from outside to inside: margin (Margin), border (Border) , padding and content. In fact, there are two box models, namely the ie box model and the standard w3c box model. With the addition of the doctype statement, all browsers will use the standard w3c box model to explain you. box. When setting the style of an element as follows:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>盒子模型<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
            #box</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px solid blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            Box Model
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

Run result:

1.1, width test

Calculate the maximum width, the example is as follows:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>盒子模型<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
            #box</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 800px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 5px solid blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            .sbox</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                display</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> inline-block</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>  <span style="background-color: #f5f5f5; color: #ff0000;">
                margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>   <span style="background-color: #f5f5f5; color: #ff0000;">
                border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> solid 10px coral</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> lightblue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> ?</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sbox"</span><span style="color: #0000ff;">></span>Left<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sbox"</span><span style="color: #0000ff;">></span>Right<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

To achieve the following effect, what is the maximum number of pixels that can be set at the request?

Answer:

340px

View Code

1.2, overflow test

The code is as follows:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>盒子模型<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
            #box</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 800px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 5px solid blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            #box #innerBox</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> lightblue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">50px </span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px solid lightcoral</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="innerBox"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
                innerBox
            </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

Will the innerBox exceed the box when running? If so, by how much?

可见部分=850-815=35，还有10个margin不可见，45px

View Code

If you don’t want the innerBox to exceed, you should delete its 100% width setting and remove width:100%. Generally, you don’t need to set it. It’s unnecessary.

1.3, box-sizing attribute

Sets or retrieves the box model composition mode of an object

content-box: padding and border are not included in the defined width and height. The actual width of the object is equal to the sum of the set width value, border, and padding, that is (Element width = width + border + padding, but margin must be added to occupy the page position). This attribute behaves like a box model in standard mode.

Example:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>盒子模型<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
            #box</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px solid blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            Box Model
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

Run result:

Because the default is content-box, there is no direct setting here, and the occupied width is 160px;

border-box: padding and border are included within the defined width and height. The actual width of the object is equal to the set width value. Even if border and padding are defined, the actual width of the object will not be changed, that is (Element width = width). This attribute behaves like a box model in weird mode.

Sample code:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>盒子模型<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
            #box</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px solid blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                box-sizing</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> border-box</span><span style="background-color: #f5f5f5; color: #000000;">;</span>  <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">在上一个例子中添加的</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            Box Model
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

Run result:

When box-sizing: border-box, the width setting will include border and padding, but not margin, but margin will also occupy the position.

1.4. Use CSS to draw pictures

Sample code:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>盒子模型 - 三角形<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
            #box</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px solid blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                border-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> blue transparent transparent transparent</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
                <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">设置边线的颜色，transparent表示透明的颜色，按上右下左的顺时钟方向</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

Run result:

Heart Shape:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
            #heart </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> relative</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 90px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            #heart:after,#heart:before </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                content</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> ""</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 80px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> red</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                border-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px 50px 0px 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> rotate(-45deg)</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                transform-origin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            #heart:after </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> rotate(45deg)</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                transform-origin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100% 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="heart"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

运行结果：

二、边距折叠

2.1、概要

外边距折叠：相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）
相邻：没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系，如：

示例代码：

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
            #div1</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 3px solid blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> lightcoral</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            #div2</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> lightgreen</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            #div3</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> lightblue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div1"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div2"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div3"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

运行结果：

因为div2与div3的外边距是相邻的（是父子关系的相邻），当div2 margin-top为20,div3的margin-top也为20,此时div2与div3的外边距会合并，就是折叠。

如果想让div3的margin-top生效，可以破坏相邻的限制，示例：

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
            #div1</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 3px solid blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> lightcoral</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            
            #div2</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> lightgreen</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1px solid green</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            
            #div3</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> lightblue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div1"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div2"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div3"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

View Code

 

运行结果：

2.2、垂直方向外边距合并计算

a)、参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。

示例：

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>边距折叠<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="height:90px; margin-bottom:99px; width:90px; background-color: red;"</span><span style="color: #0000ff;">></span>X<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="height:90px; margin-top:100px; width:90px; background-color: blue;"</span><span style="color: #0000ff;">></span>Y<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

运行结果：

b)、参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。
示例：

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>边距折叠<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="height:90px; margin-bottom:-10px; width:90px; background-color: red;"</span><span style="color: #0000ff;">></span>X<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="height:90px; margin-top:-30px;width:70px; background-color: blue;"</span><span style="color: #0000ff;">></span>Y<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

结果：

c)、参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
示例：

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>参与折叠的 margin 中有正值，有负值<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="height:90px; margin-bottom:-30px; width:90px; background-color: red;"</span><span style="color: #0000ff;">></span>X<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="height:90px; margin-top:30px;width:70px; background-color: blue;"</span><span style="color: #0000ff;">></span>Y<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

运行结果：

 

三、内联与块级标签

3.1、行内标签与块标签区别

html中的标签默认主要分为两大类型，一类为块级元素，另一类是行内元素，许多人也把行内称为内联，所以叫内联元素，其实就是一个意思。为了很好的布局，必须理解它们间的区别，区别如下：

常用块级与内联元素：

<span style="color: #000000;">内联元素（行内元素）内联元素(inline element)
 a </span>-<span style="color: #000000;"> 超链接
 abbr </span>-<span style="color: #000000;"> 缩写
 acronym </span>-<span style="color: #000000;"> 首字
 bdo </span>-<span style="color: #000000;"> bidi override
 big </span>-<span style="color: #000000;"> 大字体
 br </span>-<span style="color: #000000;"> 换行
 cite </span>-<span style="color: #000000;"> 引用
 code </span>-<span style="color: #000000;"> 计算机代码(在引用源码的时候需要)
 dfn </span>-<span style="color: #000000;"> 定义字段
 em </span>-<span style="color: #000000;"> 强调
 i </span>-<span style="color: #000000;"> 斜体
 img </span>-<span style="color: #000000;"> 图片
 input </span>-<span style="color: #000000;"> 输入框
 kbd </span>-<span style="color: #000000;"> 定义键盘文本
 label </span>-<span style="color: #000000;"> 表格标签
 q </span>-<span style="color: #000000;"> 短引用
 samp </span>-<span style="color: #000000;"> 定义范例计算机代码
 select </span>-<span style="color: #000000;"> 项目选择
 small </span>-<span style="color: #000000;"> 小字体文本
 span </span>-<span style="color: #000000;"> 常用内联容器，定义文本内区块
 strike </span>-<span style="color: #000000;"> 中划线
 strong </span>-<span style="color: #000000;"> 粗体强调
 sub </span>-<span style="color: #000000;"> 下标
 sup </span>-<span style="color: #000000;"> 上标
 textarea </span>-<span style="color: #000000;"> 多行文本输入框
 tt </span>-<span style="color: #000000;"> 电传文本
 u </span>-<span style="color: #000000;"> 下划线
 </span><span style="color: #0000ff;">var</span> -<span style="color: #000000;"> 定义变量

块元素(block element)
 address </span>-<span style="color: #000000;"> 地址
 blockquote </span>-<span style="color: #000000;"> 块引用
 center </span>-<span style="color: #000000;"> 举中对齐块
 dir </span>-<span style="color: #000000;"> 目录列表
 div </span>-<span style="color: #000000;"> 常用块级容易，也是css layout的主要标签
 dl </span>-<span style="color: #000000;"> 定义列表
 fieldset </span>-<span style="color: #000000;"> form控制组
 form </span>-<span style="color: #000000;"> 交互表单
 h1 </span>-<span style="color: #000000;"> 大标题
 h2 </span>-<span style="color: #000000;"> 副标题
 h3 </span>-<span style="color: #000000;"> 3级标题
 h4 </span>-<span style="color: #000000;"> 4级标题
 h5 </span>-<span style="color: #000000;"> 5级标题
 h6 </span>-<span style="color: #000000;"> 6级标题
 hr </span>-<span style="color: #000000;"> 水平分隔线
 isindex </span>-<span style="color: #000000;"> input prompt
 menu </span>-<span style="color: #000000;"> 菜单列表
 noframes </span>-<span style="color: #000000;"> frames可选内容，（对于不支持frame的浏览器显示此区块内容
 noscript </span>-<span style="color: #000000;"> ）可选脚本内容（对于不支持script的浏览器显示此内容）
 ol </span>-<span style="color: #000000;"> 排序表单
 p </span>-<span style="color: #000000;"> 段落
 pre </span>-<span style="color: #000000;"> 格式化文本
 table </span>-<span style="color: #000000;"> 表格
 ul </span>-<span style="color: #000000;"> 非排序列表

可变元素，可变元素为根据上下文语境决定该元素为块元素或者内联元素。
 applet </span>-<span style="color: #000000;"> java applet
 button </span>-<span style="color: #000000;"> 按钮
 del </span>-<span style="color: #000000;"> 删除文本
 iframe </span>-<span style="color: #000000;"> inline frame
 ins </span>-<span style="color: #000000;"> 插入的文本
 map </span>-<span style="color: #000000;"> 图片区块(map)
 object </span>-<span style="color: #000000;"> object对象
 script </span>- 客户端脚本

View Code

行内标签与块标签特性示例：

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>块级标签与行内标签<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
            #div1,
            #div2 </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> lightblue</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            span </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
                <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">无效</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
                <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">无效</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
                <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">水平方向有效，垂直方向无效</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
                padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
                <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">水平方向有效，垂直方向无效</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            #div3</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 500px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1px solid #ADD8E6</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                word-break</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> break-all</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>块级标签与行内标签<span style="color: #0000ff;"></</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div1"</span><span style="color: #0000ff;">></span>div1<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div2"</span><span style="color: #0000ff;">></span>div2<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div3"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="span1"</span><span style="color: #0000ff;">></span>span1<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="span2"</span><span style="color: #0000ff;">></span>span2<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="span3"</span><span style="color: #0000ff;">></span>span3<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="span4"</span><span style="color: #0000ff;">></span>spanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspan4<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

运行结果：

使用display设置元素的显示方式

语法如下：

display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex
默认值：inline

none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline： 指定对象为内联元素。
block： 指定对象为块元素。
list-item： 指定对象为列表项目。
inline-block： 指定对象为内联块元素。（CSS2）
table： 指定对象作为块元素级的表格。类同于html标签

（CSS2）
inline-table： 指定对象作为内联元素级的表格。类同于html标签（CSS2）
table-caption： 指定对象作为表格标题。类同于html标签（CSS2）
table-row-group： 指定对象作为表格行组。类同于html标签（CSS2）
table-column： 指定对象作为表格列。类同于html标签（CSS2）
table-column-group： 指定对象作为表格列组显示。类同于html标签（CSS2）
table-header-group： 指定对象作为表格标题组。类同于html标签（CSS2）
table-footer-group： 指定对象作为表格脚注组。类同于html标签（CSS2）
run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3）
box： 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

• 如果display设置为none，float及position属性定义将不生效；
• 如果position既不是static也不是relative或者float不是none或者元素是根元素，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它情况为指定值；

• IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果；你可以这样：

• 全兼容的inline-block：

  div {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  }

Basic Support包含值：none | inline | block | list-item | inline-block
table系包含值：table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group
IE6,7只支持inline元素设置为inline-block，其它类型元素均不可以

3.2、隐藏

可以使用3种办法让元素隐藏：

a)、使用CSS的display:none，不会占有原来的位置

b)、使用CSS的visibility:hidden，会占有原来的位置

c)、使用HTML5中的新增属性hidden="hidden"，不会占有原来的位置

示例：

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>隐藏<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        div</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 2px solid blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
        #div1
        </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            display</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> none</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
        #div2</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            visibility</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> hidden</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div0"</span><span style="color: #0000ff;">></span>div0<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div1"</span><span style="color: #0000ff;">></span>div1<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div2"</span><span style="color: #0000ff;">></span>div2<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div3"</span><span style="color: #ff0000;"> hidden</span><span style="color: #0000ff;">="hidden"</span><span style="color: #0000ff;">></span>div3<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div4"</span><span style="color: #0000ff;">></span>div4<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

 

运行结果：

3.3、行内块标签

当元素的样式display为inline-block属性时就被设置成了行内块标签，同时拥有行内标签与块标签的特性，不再占整行；可以设置宽度，高度；padding与margin都有效。

示例：

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>inline-block<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        div,span</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 2px solid blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            display</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> inline-block</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div0"</span><span style="color: #0000ff;">></span>div0<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div1"</span><span style="color: #0000ff;">></span>div1<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div2"</span><span style="color: #0000ff;">></span>div2<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div3"</span><span style="color: #0000ff;">></span>div3<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div4"</span><span style="color: #0000ff;">></span>div4<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>span1<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>span2<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>span3<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

运行结果：

3.4、菜单示例

使用display属性结合图片实现网页中的图片菜单：

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>menu<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
            * </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            
            #menu </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1004px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0 auto</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #348200</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> url(img/menubg.jpg) repeat-x</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 49px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                line-height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 49px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            
            #menu a </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                display</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> inline-block</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 96px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 49px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                line-height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 49px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> url(img/menu.jpg) no-repeat</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> white</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 13px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                text-decoration</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> none</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                text-align</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> center</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin-right</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            
            #menu a:hover </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background-image</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> url(img/menunow.jpg)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            
            #divLeft </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 25px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 49px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                line-height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 49px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> url(img/menuleft.jpg) no-repeat</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> left</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            
            #divRight </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 25px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 49px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> url(img/menuright.jpg) no-repeat</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> right</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            
            #divTime </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 260px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 49px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 14px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                text-align</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> center</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> left</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

            #divMenu</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> right</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="menu"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="divLeft"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="iDiv"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="divTime"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="iDiv"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #000000;">
                时间：2016/11/24 下午2:49:56
                </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="divRight"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="iDiv"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="iDiv"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="divMenu"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">='index.html'</span><span style="color: #0000ff;">></span>网站首页<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">='articleList/15.html'</span><span style="color: #0000ff;">></span>公司简介<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">='productList/11.html'</span><span style="color: #0000ff;">></span>产品展示<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">='articleList/17.html'</span><span style="color: #0000ff;">></span>养殖技术<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">='articleList/18.html'</span><span style="color: #0000ff;">></span>娃娃鱼介绍<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">='productList/18.html'</span><span style="color: #0000ff;">></span>企业资质<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">='productList/19.html'</span><span style="color: #0000ff;">></span>友情链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

View Code

运行效果：

四、重置浏览器默认样式

下图是同一段HTML在3个不同内核的浏览器中打开的效果，你发现有不一样吗？很明显有区别，这就是浏览器的默认样式，每一个浏览器会设置user agent stylesheet，比如默认字体大小为16px。浏览器的默认样式会给我们带一定的麻烦，比如在计算元素的大小时默认样式会设置padding与margin值，不同的浏览器可能设置的不一样，就会出现误差，重置浏览器样式就是让您可以在一张白纸上写字。

最开始会使用一个简单的办法，如 ：

<span style="color: #800000;">            *
            </span>{<span style="color: #ff0000;">
                margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
                padding</span>:<span style="color: #0000ff;"> 0</span>;
            }

虽然能全部重置，但由于性能较低，不推荐使用。因为*需要遍历整个DOM树，当页面节点较多时，会影响页面的渲染性能。

4.1、CSSReset

每种浏览器都有一套默认的样式表，即user agent stylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题，CSSReset可以将所有浏览器默认样式设置成一样。

4.1.1、MT css reset

<span style="color: #008000;">/*</span><span style="color: #008000;">MT css reset</span><span style="color: #008000;">*/</span><span style="color: #800000;">
body,dl,dd,p,h1,h2,h3,h4,h5,h6</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
h1,h2,h3,h4,h5,h6</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">100%</span>}   <span style="color: #008000;">/*</span><span style="color: #008000;">继承body设定的字体大小</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;"> 根据屏幕大小改变文字大小 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
html</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">20px</span>;}  <span style="color: #008000;">/*</span><span style="color: #008000;">chorme下设置为10px无效，推荐设置为20px，1rem=20px</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@media screen and (max-width:768px)</span>{    <span style="color: #008000;">/*</span><span style="color: #008000;">手机屏幕</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
html{font-size</span>:<span style="color: #0000ff;"> 15px</span>;}<span style="color: #800000;"> 
}
@media screen and (min-width: 768px) and (max-width:992px)</span>{  <span style="color: #008000;">/*</span><span style="color: #008000;">平板屏幕</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
html{font-size</span>:<span style="color: #0000ff;"> 20px</span>;}<span style="color: #800000;">
}
@media screen and (min-width: 992px)</span>{   <span style="color: #008000;">/*</span><span style="color: #008000;">电脑屏幕</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
html{font-size</span>:<span style="color: #0000ff;"> 25px</span>;}<span style="color: #800000;">
}  
body</span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;"> "Droid Sans Fallback","Heiti SC","Droid Sans",Helvetica,"Helvetica Neue",sans-self</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">#555</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;">#F7F7F7</span>;}<span style="color: #800000;">
.clearfix:after</span>{<span style="color: #ff0000;">content</span>:<span style="color: #0000ff;">"."</span>;<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #ff0000;"> visibility</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;">both</span>;}   <span style="color: #008000;">/*</span><span style="color: #008000;">除去浮动</span><span style="color: #008000;">*/</span><span style="color: #800000;">
a:hover</span>{<span style="color: #ff0000;">text-decoration</span>:<span style="color: #0000ff;"> none</span>;}<span style="color: #800000;">
ul,ol</span>{<span style="color: #ff0000;">list-style</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
img </span>{<span style="color: #ff0000;">max-width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;"> auto</span>;} <span style="color: #008000;">/*</span><span style="color: #008000;"> 图片自适应 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
em,i</span>{<span style="color: #ff0000;">font-style</span>:<span style="color: #0000ff;"> normal</span>}  <span style="color: #008000;">/*</span><span style="color: #008000;">如需默认样式可修改</span><span style="color: #008000;">*/</span><span style="color: #800000;">
button,input,select,textarea</span>{<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">middle</span>;<span style="color: #ff0000;">outline</span>:<span style="color: #0000ff;">none</span>;}  <span style="color: #008000;">/*</span><span style="color: #008000;">出去获得焦点下的蓝色边框</span><span style="color: #008000;">*/</span><span style="color: #800000;">
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #ccc</span>;}  <span style="color: #008000;">/*</span><span style="color: #008000;">修改placeholder文字颜色</span><span style="color: #008000;">*/</span>

View Code

 4.1.2、PC css reset

<span style="color: #008000;">/*</span><span style="color: #008000;">PC css reset</span><span style="color: #008000;">*/</span><span style="color: #800000;">
body,dl,dd,p,h1,h2,h3,h4,h5,h6</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
h1,h2,h3,h4,h5,h6</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">100%</span>}   <span style="color: #008000;">/*</span><span style="color: #008000;">继承body设定的字体大小</span><span style="color: #008000;">*/</span><span style="color: #800000;">   
body</span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;"> "Microsoft YaHei",Tahoma,Arial,Simsun,sans-self</span>;}<span style="color: #800000;">
.clearfix:after</span>{<span style="color: #ff0000;">content</span>:<span style="color: #0000ff;">"."</span>;<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #ff0000;"> visibility</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;">both</span>;} <span style="color: #008000;">/*</span><span style="color: #008000;">除去浮动</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.clearfix</span>{<span style="color: #ff0000;">zoom</span>:<span style="color: #0000ff;">1</span>;}<span style="color: #800000;">  
a:hover</span>{<span style="color: #ff0000;">text-decoration</span>:<span style="color: #0000ff;"> none</span>;}<span style="color: #800000;"> 
ul,ol</span>{<span style="color: #ff0000;">list-style</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">0</span>;}    <span style="color: #008000;">/*</span><span style="color: #008000;">当要添加小图标时可修改</span><span style="color: #008000;">*/</span><span style="color: #800000;">
img</span>{<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">middle</span>;<span style="color: #ff0000;">border</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">-ms-interpolation-mode</span>:<span style="color: #0000ff;">bicubic</span>;} <span style="color: #008000;">/*</span><span style="color: #008000;">在IE下除去边框和底部空白</span><span style="color: #008000;">*/</span><span style="color: #800000;">
em,i</span>{<span style="color: #ff0000;">font-style</span>:<span style="color: #0000ff;"> normal</span>}  <span style="color: #008000;">/*</span><span style="color: #008000;">如需默认样式可修改</span><span style="color: #008000;">*/</span><span style="color: #800000;">
input,select,textarea</span>{<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">middle</span>;<span style="color: #ff0000;">outline</span>:<span style="color: #0000ff;">none</span>;}  <span style="color: #008000;">/*</span><span style="color: #008000;">出去获得焦点下的蓝色边框</span><span style="color: #008000;">*/</span><span style="color: #800000;">
textarea</span>{<span style="color: #ff0000;">resize</span>:<span style="color: #0000ff;">none</span>;}  <span style="color: #008000;">/*</span><span style="color: #008000;">禁止用户缩放文本框</span><span style="color: #008000;">*/</span><span style="color: #800000;">
table </span>{<span style="color: #ff0000;">border-collapse</span>:<span style="color: #0000ff;"> collapse</span>;<span style="color: #ff0000;">border-spacing</span>:<span style="color: #0000ff;"> 0</span>;}<span style="color: #800000;"> 
button,input[type="button"],input[type="reset"],input[type="submit"] </span>{<span style="color: #ff0000;">cursor</span>:<span style="color: #0000ff;">pointer</span>;<span style="color: #ff0000;">-webkit-appearance</span>:<span style="color: #0000ff;">button</span>;<span style="color: #ff0000;">-moz-appearance</span>:<span style="color: #0000ff;">button</span>;} <span style="color: #008000;">/*</span><span style="color: #008000;">按钮初始化</span><span style="color: #008000;">*/</span><span style="color: #800000;">
input::-moz-placeholder,textarea::-moz-placeholder </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #ccc</span>;}   <span style="color: #008000;">/*</span><span style="color: #008000;">修改placeholder文字颜色</span><span style="color: #008000;">*/</span><span style="color: #800000;">
input:-ms-input-placeholder,textarea:-ms-input-placeholder </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #ccc</span>;}<span style="color: #800000;">
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #ccc</span>;}

View Code

 4.1.3、PPTV css reset

<span style="color: #800000;">@charset "utf-8";
body,div,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,code,form,fieldset,legend,button,textarea,table,tbody,tfoot,thead,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">outline</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;">transparent</span>;}<span style="color: #800000;">article,aside,dialog,figure,footer,header,hgroup,nav,section</span>{<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">block</span>;}<span style="color: #800000;">body,button,input,select,textarea</span>{<span style="color: #ff0000;">font</span>:<span style="color: #0000ff;">12px/1.5 arial,\5b8b\4f53,sans-serif</span>;}<span style="color: #800000;">h1,h2,h3,h4,h5,h6,button,input,select,textarea</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">100%</span>;}<span style="color: #800000;">address,cite,dfn,em,var</span>{<span style="color: #ff0000;">font-style</span>:<span style="color: #0000ff;">normal</span>;}<span style="color: #800000;">code,kbd,pre,samp</span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;">courier new,courier,monospace</span>;}<span style="color: #800000;">small</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">12px</span>;}<span style="color: #800000;">ul,ol,li</span>{<span style="color: #ff0000;">list-style</span>:<span style="color: #0000ff;">none</span>;}<span style="color: #800000;">img</span>{<span style="color: #ff0000;">border</span>:<span style="color: #0000ff;">none</span>;}<span style="color: #800000;">a</span>{<span style="color: #ff0000;">text-decoration</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">outline</span>:<span style="color: #0000ff;">thin none</span>;}<span style="color: #800000;">a:hover</span>{<span style="color: #ff0000;">text-decoration</span>:<span style="color: #0000ff;">underline</span>;}<span style="color: #800000;">table</span>{<span style="color: #ff0000;">border-collapse</span>:<span style="color: #0000ff;">collapse</span>;<span style="color: #ff0000;">border-spacing</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">.clear</span>{<span style="color: #ff0000;">clear</span>:<span style="color: #0000ff;">both</span>;}<span style="color: #800000;">.clearfix:after</span>{<span style="color: #ff0000;">visibility</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">content</span>:<span style="color: #0000ff;">" "</span>;<span style="color: #ff0000;">clear</span>:<span style="color: #0000ff;">both</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">html</span>{<span style="color: #ff0000;">-webkit-text-size-adjust</span>:<span style="color: #0000ff;"> none</span>;}<span style="color: #800000;">
body</span>{<span style="color: #ff0000;">font</span>:<span style="color: #0000ff;">12px/1.5 \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53,sans-serif</span>;}

View Code

4.1.4 YUI css reset

<span style="color: #008000;">/*</span><span style="color: #008000;">
YUI 3.4.1 (build 4118)
Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
 
html</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;">#FFF</span>}<span style="color: #800000;">
 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">0</span>}<span style="color: #800000;">
 
table</span>{<span style="color: #ff0000;">border-collapse</span>:<span style="color: #0000ff;">collapse</span>;<span style="color: #ff0000;">border-spacing</span>:<span style="color: #0000ff;">0</span>}<span style="color: #800000;">
 
fieldset,img</span>{<span style="color: #ff0000;">border</span>:<span style="color: #0000ff;">0</span>}<span style="color: #800000;">
 
address,caption,cite,code,dfn,em,strong,th,var</span>{<span style="color: #ff0000;">font-style</span>:<span style="color: #0000ff;">normal</span>;<span style="color: #ff0000;">font-weight</span>:<span style="color: #0000ff;">normal</span>}<span style="color: #800000;">
 
ol,ul</span>{<span style="color: #ff0000;">list-style</span>:<span style="color: #0000ff;">none</span>}<span style="color: #800000;">
 
caption,th</span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;">left</span>}<span style="color: #800000;">
 
h1,h2,h3,h4,h5,h6</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">100%</span>;<span style="color: #ff0000;">font-weight</span>:<span style="color: #0000ff;">normal</span>}<span style="color: #800000;">
 
q:before,q:after</span>{<span style="color: #ff0000;">content</span>:<span style="color: #0000ff;">''</span>}<span style="color: #800000;">
 
abbr,acronym</span>{<span style="color: #ff0000;">border</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">font-variant</span>:<span style="color: #0000ff;">normal</span>}<span style="color: #800000;">
 
sup</span>{<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">text-top</span>}<span style="color: #800000;">
 
sub</span>{<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">text-bottom</span>}<span style="color: #800000;">
 
input,textarea,select</span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;">inherit</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">inherit</span>;<span style="color: #ff0000;">font-weight</span>:<span style="color: #0000ff;">inherit</span>}<span style="color: #800000;">
 
input,textarea,select</span>{<span style="color: #ff0000;">*font-size</span>:<span style="color: #0000ff;">100%</span>}<span style="color: #800000;">
 
legend</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#000</span>}

View Code

4.1.5、marx css reset

<span style="color: #008000;">/*</span><span style="color: #008000;">! sanitize.css v3.3.0 | CC0 1.0 Public Domain | github.com/10up/sanitize.css </span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
 * Normalization
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
abbr[title] </span>{<span style="color: #ff0000;">
  text-decoration</span>:<span style="color: #0000ff;"> underline</span>;<span style="color: #ff0000;">
  text-decoration</span>:<span style="color: #0000ff;"> underline dotted</span>; }<span style="color: #800000;">

audio:not([controls]) </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">

b,
strong </span>{<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> bolder</span>; }<span style="color: #800000;">

button </span>{<span style="color: #ff0000;">
  -webkit-appearance</span>:<span style="color: #0000ff;"> button</span>;<span style="color: #ff0000;">
  overflow</span>:<span style="color: #0000ff;"> visible</span>; }<span style="color: #800000;">

button::-moz-focus-inner,
input::-moz-focus-inner </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">

button:-moz-focusring,
input:-moz-focusring </span>{<span style="color: #ff0000;">
  outline</span>:<span style="color: #0000ff;"> 1px dotted ButtonText</span>; }<span style="color: #800000;">

button,
select </span>{<span style="color: #ff0000;">
  text-transform</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">

details </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>; }<span style="color: #800000;">

hr </span>{<span style="color: #ff0000;">
  overflow</span>:<span style="color: #0000ff;"> visible</span>; }<span style="color: #800000;">

html </span>{<span style="color: #ff0000;">
  -ms-overflow-style</span>:<span style="color: #0000ff;"> -ms-autohiding-scrollbar</span>;<span style="color: #ff0000;">
  overflow-y</span>:<span style="color: #0000ff;"> scroll</span>;<span style="color: #ff0000;">
  -webkit-text-size-adjust</span>:<span style="color: #0000ff;"> 100%</span>; }<span style="color: #800000;">

input </span>{<span style="color: #ff0000;">
  -webkit-border-radius</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">
  input[type="button"], input[type="reset"], input[type="submit"] </span>{<span style="color: #ff0000;">
    -webkit-appearance</span>:<span style="color: #0000ff;"> button</span>; }<span style="color: #800000;">
  input[type="number"] </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> auto</span>; }<span style="color: #800000;">
  input[type="search"] </span>{<span style="color: #ff0000;">
    -webkit-appearance</span>:<span style="color: #0000ff;"> textfield</span>; }<span style="color: #800000;">
    input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration </span>{<span style="color: #ff0000;">
      -webkit-appearance</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">

main </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>; }<span style="color: #800000;">

pre </span>{<span style="color: #ff0000;">
  overflow</span>:<span style="color: #0000ff;"> auto</span>; }<span style="color: #800000;">

progress </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>; }<span style="color: #800000;">

summary </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>; }<span style="color: #800000;">

svg:not(:root) </span>{<span style="color: #ff0000;">
  overflow</span>:<span style="color: #0000ff;"> hidden</span>; }<span style="color: #800000;">

template </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">

textarea </span>{<span style="color: #ff0000;">
  overflow</span>:<span style="color: #0000ff;"> auto</span>; }<span style="color: #800000;">

[hidden] </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> none</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;">
 * Universal inheritance
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
*,
::before,
::after </span>{<span style="color: #ff0000;">
  box-sizing</span>:<span style="color: #0000ff;"> inherit</span>; }<span style="color: #800000;">

* </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> inherit</span>;<span style="color: #ff0000;">
  line-height</span>:<span style="color: #0000ff;"> inherit</span>; }<span style="color: #800000;">

::before,
::after </span>{<span style="color: #ff0000;">
  text-decoration</span>:<span style="color: #0000ff;"> inherit</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> inherit</span>; }<span style="color: #800000;">

button,
input,
select,
textarea </span>{<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> inherit</span>;<span style="color: #ff0000;">
  font-style</span>:<span style="color: #0000ff;"> inherit</span>;<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> inherit</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;">
 * Opinionated defaults
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
* </span>{<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">

*,
::before,
::after </span>{<span style="color: #ff0000;">
  border-style</span>:<span style="color: #0000ff;"> solid</span>;<span style="color: #ff0000;">
  border-width</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">

a,
area,
button,
input,
label,
select,
textarea,
[tabindex] </span>{<span style="color: #ff0000;">
  -ms-touch-action</span>:<span style="color: #0000ff;"> manipulation</span>;<span style="color: #ff0000;">
      touch-action</span>:<span style="color: #0000ff;"> manipulation</span>; }<span style="color: #800000;">

select </span>{<span style="color: #ff0000;">
  -moz-appearance</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
  -webkit-appearance</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">
  select::-ms-expand </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">
  select::-ms-value </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> currentColor</span>; }<span style="color: #800000;">

svg </span>{<span style="color: #ff0000;">
  fill</span>:<span style="color: #0000ff;"> currentColor</span>; }<span style="color: #800000;">

[aria-busy="true"] </span>{<span style="color: #ff0000;">
  cursor</span>:<span style="color: #0000ff;"> progress</span>; }<span style="color: #800000;">

[aria-controls] </span>{<span style="color: #ff0000;">
  cursor</span>:<span style="color: #0000ff;"> pointer</span>; }<span style="color: #800000;">

[aria-disabled] </span>{<span style="color: #ff0000;">
  cursor</span>:<span style="color: #0000ff;"> default</span>; }<span style="color: #800000;">

[hidden][aria-hidden="false"] </span>{<span style="color: #ff0000;">
  clip</span>:<span style="color: #0000ff;"> rect(0 0 0 0)</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inherit</span>;<span style="color: #ff0000;">
  position</span>:<span style="color: #0000ff;"> absolute</span>; }<span style="color: #800000;">
  [hidden][aria-hidden="false"]:focus </span>{<span style="color: #ff0000;">
    clip</span>:<span style="color: #0000ff;"> auto</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;">
 * Configurable defaults
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
* </span>{<span style="color: #ff0000;">
  background-repeat</span>:<span style="color: #0000ff;"> no-repeat</span>; }<span style="color: #800000;">

:root </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #ffffff</span>;<span style="color: #ff0000;">
  box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #000000</span>;<span style="color: #ff0000;">
  cursor</span>:<span style="color: #0000ff;"> default</span>;<span style="color: #ff0000;">
  font</span>:<span style="color: #0000ff;"> 66.66667% sans-serif</span>; }<span style="color: #800000;">

a </span>{<span style="color: #ff0000;">
  text-decoration</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">

audio,
canvas,
iframe,
img,
svg,
video </span>{<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> middle</span>; }<span style="color: #800000;">

button,
input,
select,
textarea </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> inherit</span>; }<span style="color: #800000;">

button,
[type="button"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="reset"],
[type="search"],
[type="submit"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea </span>{<span style="color: #ff0000;">
  min-height</span>:<span style="color: #0000ff;"> 1.5em</span>; }<span style="color: #800000;">

code,
kbd,
pre,
samp </span>{<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> monospace, monospace</span>; }<span style="color: #800000;">

nav ol,
nav ul </span>{<span style="color: #ff0000;">
  list-style</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">

small </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 75%</span>; }<span style="color: #800000;">

table </span>{<span style="color: #ff0000;">
  border-collapse</span>:<span style="color: #0000ff;"> collapse</span>;<span style="color: #ff0000;">
  border-spacing</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">

textarea </span>{<span style="color: #ff0000;">
  resize</span>:<span style="color: #0000ff;"> vertical</span>; }<span style="color: #800000;">

::-moz-selection </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #b3d4fc</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #ffffff</span>;<span style="color: #ff0000;">
  text-shadow</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">

::selection </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #b3d4fc</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #ffffff</span>;<span style="color: #ff0000;">
  text-shadow</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">

main,
header,
footer,
article,
section,
aside,
details,
summary </span>{<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
  margin-bottom</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>; }<span style="color: #800000;">

main </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
  max-width</span>:<span style="color: #0000ff;"> 768px</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 0 16px 16px</span>; }<span style="color: #800000;">

footer </span>{<span style="color: #ff0000;">
  border-top</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  clear</span>:<span style="color: #0000ff;"> both</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
  float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
  max-width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 16px 0</span>;<span style="color: #ff0000;">
  text-align</span>:<span style="color: #0000ff;"> center</span>; }<span style="color: #800000;">
  footer p </span>{<span style="color: #ff0000;">
    margin-bottom</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">

hr </span>{<span style="color: #ff0000;">
  border-top</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
  margin-bottom</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>; }<span style="color: #800000;">

img </span>{<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
  max-width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> baseline</span>; }<span style="color: #800000;">

@media screen and (max-width: 400px) </span>{<span style="color: #ff0000;">
  article,
  section,
  aside {
    clear</span>:<span style="color: #0000ff;"> both</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    max-width</span>:<span style="color: #0000ff;"> 100%</span>; }<span style="color: #800000;">
  img </span>{<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> 16px</span>; }<span style="color: #800000;"> }

body </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.8)</span>;<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
  line-height</span>:<span style="color: #0000ff;"> 1.4</span>; }<span style="color: #800000;">

p </span>{<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  margin-bottom</span>:<span style="color: #0000ff;"> 16px</span>; }<span style="color: #800000;">

h1,
h2,
h3,
h4,
h5,
h6 </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> inherit</span>;<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> inherit</span>;<span style="color: #ff0000;">
  line-height</span>:<span style="color: #0000ff;"> inherit</span>; }<span style="color: #800000;">

h1 </span>{<span style="color: #ff0000;">
  border-bottom</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 36px</span>;<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 20px 0 16px</span>; }<span style="color: #800000;">

h2 </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 20px 0 16px</span>; }<span style="color: #800000;">

h3 </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 16px 0 4px</span>; }<span style="color: #800000;">

h4 </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 18px</span>;<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> 600</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 16px 0 4px</span>; }<span style="color: #800000;">

h5 </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> 600</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 16px 0 4px</span>; }<span style="color: #800000;">

h6 </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.54)</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> 600</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 16px 0 4px</span>; }<span style="color: #800000;">

small </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.54)</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> bottom</span>; }<span style="color: #800000;">

pre </span>{<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> #efefef</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.8)</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> Menlo, Monaco, Consolas, "Courier New", monospace</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 16px 0</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
  white-space</span>:<span style="color: #0000ff;"> pre-wrap</span>; }<span style="color: #800000;">

code </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.8)</span>;<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> Menlo, Monaco, Consolas, "Courier New", monospace</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
  line-height</span>:<span style="color: #0000ff;"> inherit</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> baseline</span>;<span style="color: #ff0000;">
  word-break</span>:<span style="color: #0000ff;"> break-all</span>;<span style="color: #ff0000;">
  word-wrap</span>:<span style="color: #0000ff;"> break-word</span>; }<span style="color: #800000;">

a </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #2196f3</span>; }<span style="color: #800000;">
  a:hover, a:focus </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #2196f3</span>;<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> underline</span>; }<span style="color: #800000;">

dl </span>{<span style="color: #ff0000;">
  margin-bottom</span>:<span style="color: #0000ff;"> 16px</span>; }<span style="color: #800000;">

dd </span>{<span style="color: #ff0000;">
  margin-left</span>:<span style="color: #0000ff;"> 40px</span>; }<span style="color: #800000;">

ul,
ol </span>{<span style="color: #ff0000;">
  margin-bottom</span>:<span style="color: #0000ff;"> 8px</span>;<span style="color: #ff0000;">
  padding-left</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> baseline</span>; }<span style="color: #800000;">

blockquote </span>{<span style="color: #ff0000;">
  border-left</span>:<span style="color: #0000ff;"> 2px solid #2196f3</span>;<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> Georgia, Times, "Times New Roman", serif</span>;<span style="color: #ff0000;">
  font-style</span>:<span style="color: #0000ff;"> italic</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 16px 0</span>;<span style="color: #ff0000;">
  padding-left</span>:<span style="color: #0000ff;"> 16px</span>; }<span style="color: #800000;">

figcaption </span>{<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> Georgia, Times, "Times New Roman", serif</span>; }<span style="color: #800000;">

u </span>{<span style="color: #ff0000;">
  text-decoration</span>:<span style="color: #0000ff;"> underline</span>; }<span style="color: #800000;">

s </span>{<span style="color: #ff0000;">
  text-decoration</span>:<span style="color: #0000ff;"> line-through</span>; }<span style="color: #800000;">

sup </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> super</span>; }<span style="color: #800000;">

sub </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> sub</span>; }<span style="color: #800000;">

mark </span>{<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> #ffeb3b</span>; }<span style="color: #800000;">

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"],
input[type="number"],
input[type="search"],
input[type="tel"],
select </span>{<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.8)</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> middle</span>; }<span style="color: #800000;">

input[type="color"] </span>{<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> middle</span>; }<span style="color: #800000;">

input:not([type]) </span>{<span style="color: #ff0000;">
  -webkit-appearance</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
  background-clip</span>:<span style="color: #0000ff;"> padding-box</span>;<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 8px</span>;<span style="color: #ff0000;">
  text-align</span>:<span style="color: #0000ff;"> left</span>; }<span style="color: #800000;">

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
select:focus,
textarea:focus </span>{<span style="color: #ff0000;">
  border-color</span>:<span style="color: #0000ff;"> #2196f3</span>; }<span style="color: #800000;">

input:not([type]):focus </span>{<span style="color: #ff0000;">
  border-color</span>:<span style="color: #0000ff;"> #2196f3</span>; }<span style="color: #800000;">

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus </span>{<span style="color: #ff0000;">
  outline</span>:<span style="color: #0000ff;"> 1px thin rgba(0, 0, 0, 0.12)</span>; }<span style="color: #800000;">

input[type="text"][disabled],
input[type="password"][disabled],
input[type="email"][disabled],
input[type="url"][disabled],
input[type="date"][disabled],
input[type="month"][disabled],
input[type="time"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="week"][disabled],
input[type="number"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="color"][disabled],
select[disabled],
textarea[disabled] </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.54)</span>;<span style="color: #ff0000;">
  cursor</span>:<span style="color: #0000ff;"> not-allowed</span>; }<span style="color: #800000;">

input:not([type])[disabled] </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.54)</span>;<span style="color: #ff0000;">
  cursor</span>:<span style="color: #0000ff;"> not-allowed</span>; }<span style="color: #800000;">

input[readonly],
select[readonly],
textarea[readonly] </span>{<span style="color: #ff0000;">
  border-color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.54)</span>; }<span style="color: #800000;">

input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid </span>{<span style="color: #ff0000;">
  border-color</span>:<span style="color: #0000ff;"> #ea1c0d</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #f44336</span>; }<span style="color: #800000;">

input[type="file"]:focus:invalid:focus,
input[type="radio"]:focus:invalid:focus,
input[type="checkbox"]:focus:invalid:focus </span>{<span style="color: #ff0000;">
  outline-color</span>:<span style="color: #0000ff;"> #f44336</span>; }<span style="color: #800000;">

select </span>{<span style="color: #ff0000;">
  -webkit-appearance</span>:<span style="color: #0000ff;"> menulist-button</span>;<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> sub</span>; }<span style="color: #800000;">

select[multiple] </span>{<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> auto</span>; }<span style="color: #800000;">

label </span>{<span style="color: #ff0000;">
  line-height</span>:<span style="color: #0000ff;"> 2</span>; }<span style="color: #800000;">

fieldset </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 8px 0</span>; }<span style="color: #800000;">

legend </span>{<span style="color: #ff0000;">
  border-bottom</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.8)</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
  margin-bottom</span>:<span style="color: #0000ff;"> 8px</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 8px 0</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>; }<span style="color: #800000;">

textarea </span>{<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
  margin-bottom</span>:<span style="color: #0000ff;"> 8px</span>;<span style="color: #ff0000;">
  max-width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 8px</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> middle</span>; }<span style="color: #800000;">

input[type=submit],
input[type=reset],
button </span>{<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> #2196f3</span>;<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  cursor</span>:<span style="color: #0000ff;"> pointer</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 8px 16px</span>;<span style="color: #ff0000;">
  text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> middle</span>;<span style="color: #ff0000;">
  white-space</span>:<span style="color: #0000ff;"> nowrap</span>; }<span style="color: #800000;">

input[type=submit]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner,
button::-moz-focus-inner </span>{<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">

input[type=submit]:hover,
input[type=reset]:hover,
button:hover </span>{<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> #0c7cd5</span>;<span style="color: #ff0000;">
  border-color</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.54)</span>; }<span style="color: #800000;">

input[type=submit]:active,
input[type=reset]:active,
button:active </span>{<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> #0c7cd5</span>;<span style="color: #ff0000;">
  border-color</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.54)</span>;<span style="color: #ff0000;">
  box-shadow</span>:<span style="color: #0000ff;"> inset 0 0 4px 0 rgba(0, 0, 0, 0.2)</span>;<span style="color: #ff0000;">
  outline-offset</span>:<span style="color: #0000ff;"> -2px</span>; }<span style="color: #800000;">

input[type=submit]:focus,
input[type=reset]:focus,
button:focus </span>{<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> #0c7cd5</span>;<span style="color: #ff0000;">
  border-color</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.54)</span>;<span style="color: #ff0000;">
  box-shadow</span>:<span style="color: #0000ff;"> inset 0 0 4px 0 rgba(0, 0, 0, 0.2)</span>;<span style="color: #ff0000;">
  outline</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">

input[type=submit]:disabled,
button:disabled </span>{<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.38)</span>;<span style="color: #ff0000;">
  cursor</span>:<span style="color: #0000ff;"> not-allowed</span>; }<span style="color: #800000;">

table </span>{<span style="color: #ff0000;">
  border-top</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  margin-bottom</span>:<span style="color: #0000ff;"> 16px</span>; }<span style="color: #800000;">

caption </span>{<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 8px 0</span>; }<span style="color: #800000;">

thead th </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  border-bottom</span>:<span style="color: #0000ff;"> 2px solid rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  text-align</span>:<span style="color: #0000ff;"> left</span>; }<span style="color: #800000;">

tr </span>{<span style="color: #ff0000;">
  margin-bottom</span>:<span style="color: #0000ff;"> 8px</span>; }<span style="color: #800000;">

th,
td </span>{<span style="color: #ff0000;">
  border-bottom</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.12)</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> inherit</span>; }<span style="color: #800000;">

tfoot tr </span>{<span style="color: #ff0000;">
  text-align</span>:<span style="color: #0000ff;"> left</span>; }<span style="color: #800000;">

tfoot td </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.54)</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 8px</span>;<span style="color: #ff0000;">
  font-style</span>:<span style="color: #0000ff;"> italic</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 16px 4px</span>; }

View Code

示例：

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="IE=edge"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1"</span><span style="color: #0000ff;">></span>

  <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Marx Template<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>

  <span style="color: #008000;"><!--</span><span style="color: #008000;"> Marx CSS </span><span style="color: #008000;">--></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="css/marx_cssreset.css"</span><span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
  <span style="color: #008000;"><!--</span><span style="color: #008000;"> main is the container </span><span style="color: #008000;">--></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">main</span><span style="color: #0000ff;">></span>
    <span style="color: #008000;"><!--</span><span style="color: #008000;"> Navigation </span><span style="color: #008000;">--></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span>First<span style="color: #0000ff;"></</span><span style="color: #800000;">b</span><span style="color: #0000ff;">></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Second<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Third<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Fourth<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span>
    
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>Add Item<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

    <span style="color: #008000;"><!--</span><span style="color: #008000;"> article </span><span style="color: #008000;">--></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>Article<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>

    <span style="color: #008000;"><!--</span><span style="color: #008000;"> aside </span><span style="color: #008000;">--></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">aside</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>Aside<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">aside</span><span style="color: #0000ff;">></span>

    <span style="color: #008000;"><!--</span><span style="color: #008000;"> section </span><span style="color: #008000;">--></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>Section<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>

    <span style="color: #008000;"><!--</span><span style="color: #008000;"> footer </span><span style="color: #008000;">--></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">&copy;</span> Matthew Blode 2016<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></</span><span style="color: #800000;">main</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

 运行结果：

这一个是github上点赞最多的一个，github地址，它除了css reset还有一些base css内容。

4.1.6、EricMeyer css reset

<span style="color: #008000;">/*</span><span style="color: #008000;"> http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
</span><span style="color: #008000;">*/</span><span style="color: #800000;">

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;"> inherit</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> baseline</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> HTML5 display-role reset for older browsers </span><span style="color: #008000;">*/</span><span style="color: #800000;">
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;
}<span style="color: #800000;">
body </span>{<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1</span>;
}<span style="color: #800000;">
ol, ul </span>{<span style="color: #ff0000;">
    list-style</span>:<span style="color: #0000ff;"> none</span>;
}<span style="color: #800000;">
blockquote, q </span>{<span style="color: #ff0000;">
    quotes</span>:<span style="color: #0000ff;"> none</span>;
}<span style="color: #800000;">
blockquote:before, blockquote:after,
q:before, q:after </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> none</span>;
}<span style="color: #800000;">
table </span>{<span style="color: #ff0000;">
    border-collapse</span>:<span style="color: #0000ff;"> collapse</span>;<span style="color: #ff0000;">
    border-spacing</span>:<span style="color: #0000ff;"> 0</span>;
}

View Code

4.1.7、天猫 css reset

<span style="color: #800000;">@charset "gb2312";
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td </span>{<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">
body, button, input, select, textarea </span>{<span style="color: #ff0000;">
font</span>:<span style="color: #0000ff;"> 12px "microsoft yahei"</span>;<span style="color: #ff0000;">
line-height</span>:<span style="color: #0000ff;"> 1.5</span>;<span style="color: #ff0000;">
-ms-overflow-style</span>:<span style="color: #0000ff;"> scrollbar
</span>}<span style="color: #800000;">
h1, h2, h3, h4, h5, h6 </span>{<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 100%
</span>}<span style="color: #800000;">
ul, ol </span>{<span style="color: #ff0000;">
list-style</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">
a </span>{<span style="color: #ff0000;">
text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
cursor</span>:<span style="color: #0000ff;">pointer
</span>}<span style="color: #800000;">
a:hover </span>{<span style="color: #ff0000;">
text-decoration</span>:<span style="color: #0000ff;"> underline
</span>}<span style="color: #800000;">
img </span>{<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">
button, input, select, textarea </span>{<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 100%
</span>}<span style="color: #800000;">
table </span>{<span style="color: #ff0000;">
border-collapse</span>:<span style="color: #0000ff;"> collapse</span>;<span style="color: #ff0000;">
border-spacing</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.clear </span>{<span style="color: #ff0000;">
clear</span>:<span style="color: #0000ff;">both
</span>}<span style="color: #800000;">
.fr </span>{<span style="color: #ff0000;">
float</span>:<span style="color: #0000ff;">right
</span>}<span style="color: #800000;">
.fl </span>{<span style="color: #ff0000;">
float</span>:<span style="color: #0000ff;">left
</span>}<span style="color: #800000;">
.block </span>{<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #ff0000;">
text-indent</span>:<span style="color: #0000ff;">-999em
</span>}

View Code

4.1.8、ress css reset

<span style="color: #008000;">/*</span><span style="color: #008000;">!
 * ress.css • v1.1.2
 * MIT License
 * github.com/filipelinhares/ress
 </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> # =================================================================
   # Global selectors
   # ================================================================= </span><span style="color: #008000;">*/</span><span style="color: #800000;">

html </span>{<span style="color: #ff0000;">
  box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  overflow-y</span>:<span style="color: #0000ff;"> scroll</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> All browsers without overlaying scrollbars </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  -webkit-text-size-adjust</span>:<span style="color: #0000ff;"> 100%</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> iOS 8+ </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

*,
::before,
::after </span>{<span style="color: #ff0000;">
  box-sizing</span>:<span style="color: #0000ff;"> inherit</span>;
}<span style="color: #800000;">

::before,
::after </span>{<span style="color: #ff0000;">
  text-decoration</span>:<span style="color: #0000ff;"> inherit</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Inherit text-decoration and vertical align to ::before and ::after pseudo elements </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> inherit</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Remove margin, padding of all elements and set background-no-repeat as default </span><span style="color: #008000;">*/</span><span style="color: #800000;">
* </span>{<span style="color: #ff0000;">
  background-repeat</span>:<span style="color: #0000ff;"> no-repeat</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Set `background-repeat: no-repeat` to all elements </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 0</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Reset `padding` and `margin` of all elements </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> # =================================================================
   # General elements
   # ================================================================= </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> Add the correct display in iOS 4-7.</span><span style="color: #008000;">*/</span><span style="color: #800000;">
audio:not([controls]) </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">

hr </span>{<span style="color: #ff0000;">
  overflow</span>:<span style="color: #0000ff;"> visible</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Show the overflow in Edge and IE </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;">
* Correct `block` display not defined for any HTML5 element in IE 8/9
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox
* Correct `block` display not defined for `main` in IE 11
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
}<span style="color: #800000;">

summary </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> list-item</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Add the correct display in all browsers </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

small </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 80%</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Set font-size to 80% in `small` elements </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

[hidden],
template </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> none</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Add the correct display in IE </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

abbr[title] </span>{<span style="color: #ff0000;">
  border-bottom</span>:<span style="color: #0000ff;"> 1px dotted</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Add a bordered underline effect in all browsers </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  text-decoration</span>:<span style="color: #0000ff;"> none</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Remove text decoration in Firefox 40+ </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

a </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> transparent</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Remove the gray background on active links in IE 10 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  -webkit-text-decoration-skip</span>:<span style="color: #0000ff;"> objects</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Remove gaps in links underline in iOS 8+ and Safari 8+ </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

a:active,
a:hover </span>{<span style="color: #ff0000;">
  outline-width</span>:<span style="color: #0000ff;"> 0</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Remove the outline when hovering in all browsers </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

code,
kbd,
pre,
samp </span>{<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> monospace, monospace</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Specify the font family of code elements </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

b,
strong </span>{<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> bolder</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Correct style set to `bold` in Edge 12+, Safari 6.2+, and Chrome 18+ </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

dfn </span>{<span style="color: #ff0000;">
  font-style</span>:<span style="color: #0000ff;"> italic</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Address styling not present in Safari and Chrome </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Address styling not present in IE 8/9 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
mark </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #ff0</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #000</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> https://gist.github.com/unruthless/413930 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
sub,
sup </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 75%</span>;<span style="color: #ff0000;">
  line-height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> baseline</span>;
}<span style="color: #800000;">

sub </span>{<span style="color: #ff0000;">
  bottom</span>:<span style="color: #0000ff;"> -0.25em</span>;
}<span style="color: #800000;">

sup </span>{<span style="color: #ff0000;">
  top</span>:<span style="color: #0000ff;"> -0.5em</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> # =================================================================
   # Forms
   # ================================================================= </span><span style="color: #008000;">*/</span><span style="color: #800000;">

input </span>{<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> 0</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Apply cursor pointer to button elements </span><span style="color: #008000;">*/</span><span style="color: #800000;">
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] </span>{<span style="color: #ff0000;">
  cursor</span>:<span style="color: #0000ff;"> pointer</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Replace pointer cursor in disabled elements </span><span style="color: #008000;">*/</span><span style="color: #800000;">
[disabled] </span>{<span style="color: #ff0000;">
  cursor</span>:<span style="color: #0000ff;"> default</span>;
}<span style="color: #800000;">

[type="number"] </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> auto</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Firefox 36+ </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

[type="search"] </span>{<span style="color: #ff0000;">
  -webkit-appearance</span>:<span style="color: #0000ff;"> textfield</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Safari 8+ </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration </span>{<span style="color: #ff0000;">
  -webkit-appearance</span>:<span style="color: #0000ff;"> none</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Safari 8 </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

textarea </span>{<span style="color: #ff0000;">
  overflow</span>:<span style="color: #0000ff;"> auto</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Internet Explorer 11+ </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  resize</span>:<span style="color: #0000ff;"> vertical</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Specify textarea resizability </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

button,
input,
optgroup,
select,
textarea </span>{<span style="color: #ff0000;">
  font</span>:<span style="color: #0000ff;"> inherit</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Specify font inheritance of form elements </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

optgroup </span>{<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> bold</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Restore the font weight unset by the previous rule. </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

button </span>{<span style="color: #ff0000;">
  overflow</span>:<span style="color: #0000ff;"> visible</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Address `overflow` set to `hidden` in IE 8/9/10/11 </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Remove inner padding and border in Firefox 4+ </span><span style="color: #008000;">*/</span><span style="color: #800000;">
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner </span>{<span style="color: #ff0000;">
  border-style</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 0</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Replace focus style removed in the border reset above </span><span style="color: #008000;">*/</span><span style="color: #800000;">
button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner </span>{<span style="color: #ff0000;">
  outline</span>:<span style="color: #0000ff;"> 1px dotted ButtonText</span>;
}<span style="color: #800000;">

button,
html [type="button"], </span><span style="color: #008000;">/*</span><span style="color: #008000;"> Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
[type="reset"],
[type="submit"] </span>{<span style="color: #ff0000;">
  -webkit-appearance</span>:<span style="color: #0000ff;"> button</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Correct the inability to style clickable types in iOS </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

button,
select </span>{<span style="color: #ff0000;">
  text-transform</span>:<span style="color: #0000ff;"> none</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Firefox 40+, Internet Explorer 11- </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Remove the default button styling in all browsers </span><span style="color: #008000;">*/</span><span style="color: #800000;">
button,
input,
select,
textarea </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
  border-style</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> inherit</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Style select like a standard input </span><span style="color: #008000;">*/</span><span style="color: #800000;">
select </span>{<span style="color: #ff0000;">
  -moz-appearance</span>:<span style="color: #0000ff;"> none</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Firefox 36+ </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  -webkit-appearance</span>:<span style="color: #0000ff;"> none</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Chrome 41+ </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

select::-ms-expand </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> none</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Internet Explorer 11+ </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

select::-ms-value </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> currentColor</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Internet Explorer 11+ </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

legend </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 0</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Correct `color` not being inherited in IE 8/9/10/11 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> inherit</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Correct the color inheritance from `fieldset` elements in IE </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> table</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Correct the text wrapping in Edge and IE </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  max-width</span>:<span style="color: #0000ff;"> 100%</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Correct the text wrapping in Edge and IE </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  white-space</span>:<span style="color: #0000ff;"> normal</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Correct the text wrapping in Edge and IE </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

::-webkit-file-upload-button </span>{<span style="color: #ff0000;">
  -webkit-appearance</span>:<span style="color: #0000ff;"> button</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Correct the inability to style clickable types in iOS and Safari </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  font</span>:<span style="color: #0000ff;"> inherit</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Change font properties to `inherit` in Chrome and Safari </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

[type="search"] </span>{<span style="color: #ff0000;">
  -webkit-appearance</span>:<span style="color: #0000ff;"> textfield</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Correct the odd appearance in Chrome and Safari </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  outline-offset</span>:<span style="color: #0000ff;"> -2px</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Correct the outline style in Safari </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> # =================================================================
   # Specify media element style
   # ================================================================= </span><span style="color: #008000;">*/</span><span style="color: #800000;">

img </span>{<span style="color: #ff0000;">
  border-style</span>:<span style="color: #0000ff;"> none</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Remove border when inside `a` element in IE 8/9/10 </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Add the correct vertical alignment in Chrome, Firefox, and Opera </span><span style="color: #008000;">*/</span><span style="color: #800000;">
progress </span>{<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> baseline</span>;
}<span style="color: #800000;">

svg:not(:root) </span>{<span style="color: #ff0000;">
  overflow</span>:<span style="color: #0000ff;"> hidden</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Internet Explorer 11- </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

audio,
canvas,
progress,
video </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Internet Explorer 11+, Windows Phone 8.1+ </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> # =================================================================
   # Accessibility
   # ================================================================= </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> Hide content from screens but not screenreaders </span><span style="color: #008000;">*/</span><span style="color: #800000;">
@media screen </span>{<span style="color: #ff0000;">
  [hidden~="screen"] {
    display</span>:<span style="color: #0000ff;"> inherit</span>;
  }<span style="color: #800000;">
  [hidden~="screen"]:not(:active):not(:focus):not(:target) </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute !important</span>;<span style="color: #ff0000;">
    clip</span>:<span style="color: #0000ff;"> rect(0 0 0 0) !important</span>;
  }<span style="color: #800000;">
}

</span><span style="color: #008000;">/*</span><span style="color: #008000;"> Specify the progress cursor of updating elements </span><span style="color: #008000;">*/</span><span style="color: #800000;">
[aria-busy="true"] </span>{<span style="color: #ff0000;">
  cursor</span>:<span style="color: #0000ff;"> progress</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Specify the pointer cursor of trigger elements </span><span style="color: #008000;">*/</span><span style="color: #800000;">
[aria-controls] </span>{<span style="color: #ff0000;">
  cursor</span>:<span style="color: #0000ff;"> pointer</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements </span><span style="color: #008000;">*/</span><span style="color: #800000;">
[aria-disabled] </span>{<span style="color: #ff0000;">
  cursor</span>:<span style="color: #0000ff;"> default</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> # =================================================================
   # Selection
   # ================================================================= </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> Specify text selection background color and omit drop shadow </span><span style="color: #008000;">*/</span><span style="color: #800000;">

::-moz-selection </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #b3d4fc</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Required when declaring ::selection </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #000</span>;<span style="color: #ff0000;">
  text-shadow</span>:<span style="color: #0000ff;"> none</span>;
}<span style="color: #800000;">

::selection </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #b3d4fc</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Required when declaring ::selection </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #000</span>;<span style="color: #ff0000;">
  text-shadow</span>:<span style="color: #0000ff;"> none</span>;
}

View Code

github上css reset点赞排名第2

https://github.com/filipelinhares/ress/

4.2、normalize

也许有些cssreset过于简单粗暴，有点伤及无辜，normalize是另一个选择。bootstrap已经引用该css来重置浏览器默认样式，比普通的cssreset要精细一些，保留浏览器有用的默认样式，支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。

Normalize.css和传统Reset的区别：
a)、Normalize.css 保护了有价值的默认值
Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

b)、Normalize.css 修复了浏览器的bug
它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

 github的下载地址：https://github.com/necolas/normalize.css

<span style="color: #008000;">/*</span><span style="color: #008000;">! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> Document
   ========================================================================== </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

html </span>{<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> sans-serif</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  line-height</span>:<span style="color: #0000ff;"> 1.15</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 2 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  -ms-text-size-adjust</span>:<span style="color: #0000ff;"> 100%</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 3 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  -webkit-text-size-adjust</span>:<span style="color: #0000ff;"> 100%</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 3 </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Sections
   ========================================================================== </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Remove the margin in all browsers (opinionated).
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

body </span>{<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Add the correct display in IE 9-.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

article,
aside,
footer,
header,
nav,
section </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

h1 </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 2em</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0.67em 0</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Grouping content
   ========================================================================== </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

figcaption,
figure,
main </span>{ <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Add the correct margin in IE 8.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

figure </span>{<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 1em 40px</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

hr </span>{<span style="color: #ff0000;">
  box-sizing</span>:<span style="color: #0000ff;"> content-box</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 0</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  overflow</span>:<span style="color: #0000ff;"> visible</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 2 </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

pre </span>{<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> monospace, monospace</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 1em</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 2 </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Text-level semantics
   ========================================================================== </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

a </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> transparent</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  -webkit-text-decoration-skip</span>:<span style="color: #0000ff;"> objects</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 2 </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

a:active,
a:hover </span>{<span style="color: #ff0000;">
  outline-width</span>:<span style="color: #0000ff;"> 0</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

abbr[title] </span>{<span style="color: #ff0000;">
  border-bottom</span>:<span style="color: #0000ff;"> none</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  text-decoration</span>:<span style="color: #0000ff;"> underline</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 2 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  text-decoration</span>:<span style="color: #0000ff;"> underline dotted</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 2 </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

b,
strong </span>{<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> inherit</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Add the correct font weight in Chrome, Edge, and Safari.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

b,
strong </span>{<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> bolder</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

code,
kbd,
samp </span>{<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> monospace, monospace</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 1em</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 2 </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Add the correct font style in Android 4.3-.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

dfn </span>{<span style="color: #ff0000;">
  font-style</span>:<span style="color: #0000ff;"> italic</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Add the correct background and color in IE 9-.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

mark </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #ff0</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #000</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Add the correct font size in all browsers.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

small </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 80%</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

sub,
sup </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 75%</span>;<span style="color: #ff0000;">
  line-height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> baseline</span>;
}<span style="color: #800000;">

sub </span>{<span style="color: #ff0000;">
  bottom</span>:<span style="color: #0000ff;"> -0.25em</span>;
}<span style="color: #800000;">

sup </span>{<span style="color: #ff0000;">
  top</span>:<span style="color: #0000ff;"> -0.5em</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Embedded content
   ========================================================================== </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Add the correct display in IE 9-.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

audio,
video </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Add the correct display in iOS 4-7.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

audio:not([controls]) </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 0</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Remove the border on images inside links in IE 10-.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

img </span>{<span style="color: #ff0000;">
  border-style</span>:<span style="color: #0000ff;"> none</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Hide the overflow in IE.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

svg:not(:root) </span>{<span style="color: #ff0000;">
  overflow</span>:<span style="color: #0000ff;"> hidden</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Forms
   ========================================================================== </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

button,
input,
optgroup,
select,
textarea </span>{<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> sans-serif</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 100%</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  line-height</span>:<span style="color: #0000ff;"> 1.15</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 2 </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

button,
input </span>{ <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  overflow</span>:<span style="color: #0000ff;"> visible</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

button,
select </span>{ <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  text-transform</span>:<span style="color: #0000ff;"> none</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

button,
html [type="button"], </span><span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
[type="reset"],
[type="submit"] </span>{<span style="color: #ff0000;">
  -webkit-appearance</span>:<span style="color: #0000ff;"> button</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 2 </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Remove the inner border and padding in Firefox.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner </span>{<span style="color: #ff0000;">
  border-style</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 0</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Restore the focus styles unset by the previous rule.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring </span>{<span style="color: #ff0000;">
  outline</span>:<span style="color: #0000ff;"> 1px dotted ButtonText</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Change the border, margin, and padding in all browsers (opinionated).
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

fieldset </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #c0c0c0</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0 2px</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 0.35em 0.625em 0.75em</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

legend </span>{<span style="color: #ff0000;">
  box-sizing</span>:<span style="color: #0000ff;"> border-box</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> inherit</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 2 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> table</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  max-width</span>:<span style="color: #0000ff;"> 100%</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 0</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 3 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  white-space</span>:<span style="color: #0000ff;"> normal</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

progress </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> baseline</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 2 </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Remove the default vertical scrollbar in IE.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

textarea </span>{<span style="color: #ff0000;">
  overflow</span>:<span style="color: #0000ff;"> auto</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

[type="checkbox"],
[type="radio"] </span>{<span style="color: #ff0000;">
  box-sizing</span>:<span style="color: #0000ff;"> border-box</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 0</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 2 </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Correct the cursor style of increment and decrement buttons in Chrome.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button </span>{<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> auto</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

[type="search"] </span>{<span style="color: #ff0000;">
  -webkit-appearance</span>:<span style="color: #0000ff;"> textfield</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  outline-offset</span>:<span style="color: #0000ff;"> -2px</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 2 </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration </span>{<span style="color: #ff0000;">
  -webkit-appearance</span>:<span style="color: #0000ff;"> none</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

::-webkit-file-upload-button </span>{<span style="color: #ff0000;">
  -webkit-appearance</span>:<span style="color: #0000ff;"> button</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  font</span>:<span style="color: #0000ff;"> inherit</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 2 </span><span style="color: #008000;">*/</span>
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Interactive
   ========================================================================== </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;">
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

details, </span><span style="color: #008000;">/*</span><span style="color: #008000;"> 1 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
menu </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">
 * Add the correct display in all browsers.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

summary </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> list-item</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Scripting
   ========================================================================== </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Add the correct display in IE 9-.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

canvas </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Add the correct display in IE.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

template </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> none</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> Hidden
   ========================================================================== </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * Add the correct display in IE 10-.
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

[hidden] </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> none</span>;
}

View Code

4.3、base css

如果说css reset是为了重置浏览器的默认样式，则base css是准备一些通用的css提高开发效率，如.fl表示float left，左浮动，也有人移为common.css，也有把该部分内容与cssreset合并的，这样可以减少http请求，简单的示例如下：

<span style="color: #800000;">.clear </span>{<span style="color: #ff0000;">
clear</span>:<span style="color: #0000ff;">both
</span>}<span style="color: #800000;">
.fr </span>{<span style="color: #ff0000;">
float</span>:<span style="color: #0000ff;">right
</span>}<span style="color: #800000;">
.fl </span>{<span style="color: #ff0000;">
float</span>:<span style="color: #0000ff;">left
</span>}<span style="color: #800000;">
.block </span>{<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #ff0000;">
text-indent</span>:<span style="color: #0000ff;">-999em
</span>}<span style="color: #800000;">
.w100</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 100px</span>;}<span style="color: #800000;">;
.w200</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 200px</span>;}<span style="color: #800000;">;
.w300</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 300px</span>;}<span style="color: #800000;">;
.w400</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 400px</span>;}<span style="color: #800000;">;
.w500</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 500px</span>;}<span style="color: #800000;">;
</span><span style="color: #008000;">/*</span><span style="color: #008000;">....</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.wp100</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 100%</span>;}<span style="color: #800000;">;
.wp50</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 50%</span>;}<span style="color: #800000;">;
.wp33</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 33%</span>;}<span style="color: #800000;">;
.wp25</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 25%</span>;}<span style="color: #800000;">;
.wp20</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 20%</span>;}<span style="color: #800000;">;</span>

View Code

示例2：

<span style="color: #800000;">@charset "utf-8";
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 字体 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.n</span>{<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;">normal</span>;<span style="color: #ff0000;"> 
    font-style</span>:<span style="color: #0000ff;">normal</span>;
}<span style="color: #800000;">
.b</span>{<span style="color: #ff0000;">font-weight</span>:<span style="color: #0000ff;">bold</span>;}<span style="color: #800000;"> 
.i</span>{<span style="color: #ff0000;">font-style</span>:<span style="color: #0000ff;">italic</span>;}<span style="color: #800000;">
.fa</span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;">Arial</span>;}<span style="color: #800000;"> 
.fs</span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;">'宋体'</span>;}<span style="color: #800000;"> 
.fw</span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;">'microsoft yahei'</span>;}<span style="color: #800000;"> 
.fg</span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;">Georgia</span>;}<span style="color: #800000;"> 
.ft</span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;">Tahoma</span>;}<span style="color: #800000;"> 
.fl</span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;">Lucida Console</span>;}<span style="color: #800000;">
.tdl</span>{<span style="color: #ff0000;">text-decoration</span>:<span style="color: #0000ff;">underline</span>;}<span style="color: #800000;"> 
.tdn, .tdn:hover, a.tdl:hover</span>{<span style="color: #ff0000;">text-decoration</span>:<span style="color: #0000ff;">none</span>;}


<span style="color: #008000;">/*</span><span style="color: #008000;"> 对齐 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.tc</span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;">center</span>;}<span style="color: #800000;"> 
.tr</span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;">right</span>;}<span style="color: #800000;"> 
.tl</span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;">left</span>;}<span style="color: #800000;">
.auto</span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">auto</span>;<span style="color: #ff0000;"> 
    margin-right</span>:<span style="color: #0000ff;">auto</span>;
}<span style="color: #800000;">
.auto0</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0 auto</span>;}<span style="color: #800000;">
.vm</span>{<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">middle</span>;}<span style="color: #800000;">
.vtb</span>{<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">text-bottom</span>;}<span style="color: #800000;"> 
.vt</span>{<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">top</span>;}<span style="color: #800000;"> 
.vn</span>{<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">-4px</span>;}<span style="color: #800000;"> 
.vimg</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">-3px</span>;}


<span style="color: #008000;">/*</span><span style="color: #008000;"> 大小颜色 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.g0</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#000</span>;}<span style="color: #800000;"> 
.g3</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#333</span>;}<span style="color: #800000;"> 
.g6</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#666</span>;}<span style="color: #800000;"> 
.g9</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#999</span>;}<span style="color: #800000;"> 
.red</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}<span style="color: #800000;"> 
.wh</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">white</span>;}<span style="color: #800000;">
.f0</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;"> 
.f10</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;"> 
.f12</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">12px</span>;}<span style="color: #800000;"> 
.f13</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">13px</span>;}<span style="color: #800000;"> 
.f14</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">14px</span>;}<span style="color: #800000;"> 
.f16</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">16px</span>;}<span style="color: #800000;"> 
.f20</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;"> 
.f24</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">24px</span>;}


<span style="color: #008000;">/*</span><span style="color: #008000;"> 外边距 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.m0</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;"> 
.ml1</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">1px</span>;}<span style="color: #800000;"> 
.ml2</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">2px</span>;}<span style="color: #800000;">
.ml5</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.ml10</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;"> 
.ml20</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;"> 
.mr1</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">1px</span>;}<span style="color: #800000;"> 
.mr2</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">2px</span>;}<span style="color: #800000;"> 
.mr5</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;"> 
.mr10</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;"> 
.mr20</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.mt1</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">1px</span>;}<span style="color: #800000;"> 
.mt2</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">2px</span>;}<span style="color: #800000;"> 
.mt5</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;"> 
.mt10</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;"> 
.mt20</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.mb1</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">1px</span>;}<span style="color: #800000;"> 
.mb2</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">2px</span>;}<span style="color: #800000;"> 
.mb5</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;"> 
.mb10</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;"> 
.mb20</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.ml-1</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">-1px</span>;}<span style="color: #800000;"> 
.mt-1</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">-1px</span>;}


<span style="color: #008000;">/*</span><span style="color: #008000;"> 内边距 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.p1</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">1px</span>;}<span style="color: #800000;"> 
.pl1</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">1px</span>;}<span style="color: #800000;"> 
.pt1</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">1px</span>;}<span style="color: #800000;"> 
.pr1</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">1px</span>;}<span style="color: #800000;"> 
.pb1</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">1px</span>;}<span style="color: #800000;"> 
.p2</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">2px</span>;}<span style="color: #800000;"> 
.pl2</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">2px</span>;}<span style="color: #800000;"> 
.pt2</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">2px</span>;}<span style="color: #800000;"> 
.pr2</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">2px</span>;}<span style="color: #800000;"> 
.pb2</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">2px</span>;}<span style="color: #800000;">
.pl5</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;"> 
.p5</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;"> 
.pt5</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;"> 
.pr5</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;"> 
.pb5</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;"> 
.p10</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;"> 
.pl10</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;"> 
.pt10</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;"> 
.pr10</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;"> 
.pb10</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.p20</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;"> 
.pl20</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;"> 
.pt20</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;"> 
.pr20</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;"> 
.pb20</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">20px</span>;}

<span style="color: #008000;">/*</span><span style="color: #008000;"> 位置 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.l</span>{<span style="color: #ff0000;">float</span>:<span style="color: #0000ff;">left</span>;}<span style="color: #800000;"> 
.r</span>{<span style="color: #ff0000;">float</span>:<span style="color: #0000ff;">right</span>;}<span style="color: #800000;"> 
.cl</span>{<span style="color: #ff0000;">clear</span>:<span style="color: #0000ff;">both</span>;}<span style="color: #800000;">
.rel</span>{<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;">relative</span>;}<span style="color: #800000;"> 
.abs</span>{<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;">absolute</span>;}<span style="color: #800000;"> 
.zx1</span>{<span style="color: #ff0000;">z-index</span>:<span style="color: #0000ff;">1</span>;}<span style="color: #800000;"> 
.zx2</span>{<span style="color: #ff0000;">z-index</span>:<span style="color: #0000ff;">2</span>;}<span style="color: #800000;">
.dn</span>{<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;}<span style="color: #800000;"> 
.db</span>{<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">block</span>;}<span style="color: #800000;"> 
.dib</span>{<span style="color: #ff0000;">-moz-inline-stack</span>:<span style="color: #0000ff;">inline-block</span>;<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;">inline-block</span>;}<span style="color: #800000;"> 
.di</span>{<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">inline</span>;}<span style="color: #800000;">
.ovh</span>{<span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;">hidden</span>;}<span style="color: #800000;"> 
.ovs</span>{<span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;">scroll</span>;}<span style="color: #800000;"> 
.vh</span>{<span style="color: #ff0000;">visibility</span>:<span style="color: #0000ff;">hidden</span>;}<span style="color: #800000;"> 
.vv</span>{<span style="color: #ff0000;">visibility</span>:<span style="color: #0000ff;">visible</span>;}

<span style="color: #008000;">/*</span><span style="color: #008000;"> 高度 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.lh14</span>{<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">14px</span>;}<span style="color: #800000;"> 
.lh16</span>{<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">16px</span>;}<span style="color: #800000;"> 
.lh18</span>{<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">18px</span>;}<span style="color: #800000;"> 
.lh20</span>{<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;"> 
.lh22</span>{<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">22px</span>;}<span style="color: #800000;"> 
.lh24</span>{<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">24px</span>;}<span style="color: #800000;">
.h14</span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">14px</span>;}<span style="color: #800000;"> 
.h16</span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">16px</span>;}<span style="color: #800000;"> 
.h18</span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">18px</span>;}<span style="color: #800000;"> 
.h20</span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;"> 
.h22</span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">22px</span>;}<span style="color: #800000;"> 
.h24</span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">24px</span>;}

<span style="color: #008000;">/*</span><span style="color: #008000;"> 缩放 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.fix</span>{<span style="color: #ff0000;">*zoom</span>:<span style="color: #0000ff;">1</span>;}<span style="color: #800000;"> 
.fix:after</span>{<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #ff0000;"> content</span>:<span style="color: #0000ff;">"clear"</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;">both</span>;<span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #ff0000;"> visibility</span>:<span style="color: #0000ff;">hidden</span>;}<span style="color: #800000;"> 
.z</span>{<span style="color: #ff0000;">_zoom</span>:<span style="color: #0000ff;">1</span>;}

<span style="color: #008000;">/*</span><span style="color: #008000;"> 样子 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.poi</span>{<span style="color: #ff0000;">cursor</span>:<span style="color: #0000ff;">pointer</span>;}<span style="color: #800000;"> 
.def</span>{<span style="color: #ff0000;">cursor</span>:<span style="color: #0000ff;">default</span>;}<span style="color: #800000;"> 
.ln</span>{<span style="color: #ff0000;">list-style</span>:<span style="color: #0000ff;">none</span>;}<span style="color: #800000;">
.br4</span>{<span style="color: #ff0000;">-moz-border-radius</span>:<span style="color: #0000ff;">4px</span>;<span style="color: #ff0000;">-webkit-border-radius</span>:<span style="color: #0000ff;">4px</span>;<span style="color: #ff0000;">border-radius</span>:<span style="color: #0000ff;">4px</span>;}<span style="color: #800000;">
.br8</span>{<span style="color: #ff0000;">-moz-border-radius</span>:<span style="color: #0000ff;">8px</span>;<span style="color: #ff0000;">-webkit-border-radius</span>:<span style="color: #0000ff;">8px</span>;<span style="color: #ff0000;">border-radius</span>:<span style="color: #0000ff;">8px</span>;}

<span style="color: #008000;">/*</span><span style="color: #008000;"> 换行 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.bk</span>{<span style="color: #ff0000;">word-wrap</span>:<span style="color: #0000ff;">break-word</span>;}


<span style="color: #008000;">/*</span><span style="color: #008000;">************************* Reset 样式类  酌情添加 *******************************************</span><span style="color: #008000;">*/</span><span style="color: #800000;">
body, ul, form</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
a </span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">border</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">baseline</span>;}<span style="color: #800000;">
a img</span>{<span style="color: #ff0000;">border</span>:<span style="color: #0000ff;">none</span>;}<span style="color: #800000;">
table </span>{<span style="color: #ff0000;">border-collapse</span>:<span style="color: #0000ff;">collapse</span>;}<span style="color: #800000;">
hr </span>{<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">1px</span>;<span style="color: #ff0000;">border</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">border-top</span>:<span style="color: #0000ff;">1px solid #ccc</span>;<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">1em 0</span>;}<span style="color: #800000;">
input, select,textarea </span>{<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">middle/9</span>;<span style="color: #ff0000;">letter-spacing</span>:<span style="color: #0000ff;">1px</span>;<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#555</span>;}

示例3：

<span style="color: #008000;">/*</span><span style="color: #008000;">base.css</span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;">CSS reset</span><span style="color: #008000;">*/</span><span style="color: #800000;">

body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquoteth,td</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
table</span>{<span style="color: #ff0000;">border-collapse</span>:<span style="color: #0000ff;">collapse</span>;<span style="color: #ff0000;">border-spacing</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
fieldset,img </span>{<span style="color: #ff0000;">border</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
address,caption, cite,code,dfn,em,strong,th,var</span>{<span style="color: #ff0000;">font-style</span>:<span style="color: #0000ff;">normal</span>;<span style="color: #ff0000;">font-weight</span>:<span style="color: #0000ff;">normal</span>;}<span style="color: #800000;">
ol,ul </span>{<span style="color: #ff0000;">list-style</span>:<span style="color: #0000ff;">none</span>;}<span style="color: #800000;">
capation,th</span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;">left</span>;}<span style="color: #800000;">
h1,h2,h3,h4,h5,h6</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">100%</span>;<span style="color: #ff0000;">font-weight</span>:<span style="color: #0000ff;">normal</span>;}<span style="color: #800000;">
q:before, q:after</span>{<span style="color: #ff0000;">content</span>:<span style="color: #0000ff;">' '</span>}<span style="color: #800000;">
abbr,acronym</span>{<span style="color: #ff0000;">border</span>:<span style="color: #0000ff;">0</span>;}

 

<span style="color: #008000;">/*</span><span style="color: #008000;">文字排版</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.f12</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">12px</span>;}<span style="color: #800000;">
.f13</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">13px</span>;}<span style="color: #800000;">
.f14</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">14px</span>;}<span style="color: #800000;">
.f16</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">16px</span>;}<span style="color: #800000;">
.f20</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.fb</span>{<span style="color: #ff0000;">font-weight</span>:<span style="color: #0000ff;">bold</span>;}<span style="color: #800000;">
.fn</span>{<span style="color: #ff0000;">font-weight</span>:<span style="color: #0000ff;">normal</span>;}<span style="color: #800000;">
.t2</span>{<span style="color: #ff0000;">text-indent</span>:<span style="color: #0000ff;">2em</span>;}<span style="color: #800000;">
.lh150</span>{<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">150%</span>}<span style="color: #800000;">
.lh180</span>{<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">180%</span>}<span style="color: #800000;">
.lh200</span>{<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">200%</span>}<span style="color: #800000;">
.unl</span>{<span style="color: #ff0000;">text-decoration</span>:<span style="color: #0000ff;">underline</span>;}<span style="color: #800000;">
.no_unl</span>{<span style="color: #ff0000;">text-decoration</span>:<span style="color: #0000ff;">none</span>;}

 

<span style="color: #008000;">/*</span><span style="color: #008000;">定位</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.tl</span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;">left</span>;}<span style="color: #800000;">
.tc</span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;">center</span>;}<span style="color: #800000;">
.tr</span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;">right</span>;}<span style="color: #800000;">
.bc</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">auto</span>;<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">auto</span>;}<span style="color: #800000;">
.fl</span>{<span style="color: #ff0000;">float</span>:<span style="color: #0000ff;">left</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">inline</span>;}<span style="color: #800000;">
.fr</span>{<span style="color: #ff0000;">float</span>:<span style="color: #0000ff;">right</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">inline</span>;}<span style="color: #800000;">
.cb</span>{<span style="color: #ff0000;">clear</span>:<span style="color: #0000ff;">both</span>;}<span style="color: #800000;">
.cl</span>{<span style="color: #ff0000;">clear</span>:<span style="color: #0000ff;">left</span>;}<span style="color: #800000;">
.cr</span>{<span style="color: #ff0000;">clear</span>:<span style="color: #0000ff;">right</span>;}<span style="color: #800000;">
.clearfix:after</span>{<span style="color: #ff0000;">content</span>:<span style="color: #0000ff;">'.'</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">clear</span>:<span style="color: #0000ff;">both</span>;<span style="color: #ff0000;">visibility</span>:<span style="color: #0000ff;">hidden</span>}<span style="color: #800000;">
.clearfix</span>{<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">inline-block</span>;}<span style="color: #800000;">
*html .clearfix</span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">1%</span>}<span style="color: #800000;">
. Clearfix</span>{<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">block</span>;}<span style="color: #800000;">
.vm</span>{<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">center</span>;}<span style="color: #800000;">
.pr</span>{<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;">relative</span>;}<span style="color: #800000;">
.pa</span>{<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;">absolute</span>;}<span style="color: #800000;">
.abs-right</span>{<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;">absolute</span>;<span style="color: #ff0000;">right</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
.zoom</span>{<span style="color: #ff0000;">zoom</span>:<span style="color: #0000ff;">1</span>}<span style="color: #800000;">
.hidden</span>{<span style="color: #ff0000;">visibility</span>:<span style="color: #0000ff;">hidden</span>;}<span style="color: #800000;">
.none</span>{<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;}

 

<span style="color: #008000;">/*</span><span style="color: #008000;">长度高度</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.w10</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.w20</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.w30</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.w40</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">40px</span>;}<span style="color: #800000;">
.w50</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.w60</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">60px</span>;}<span style="color: #800000;">
.w70</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">70px</span>;}<span style="color: #800000;">
.w80</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">80px</span>;}<span style="color: #800000;">
.w90</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">90px</span>;}<span style="color: #800000;">
.w100</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.w200</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">200px</span>;}<span style="color: #800000;">
.w300</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">300px</span>;}<span style="color: #800000;">
.w400</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">400px</span>;}<span style="color: #800000;">
.w500</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">
.w600</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">600px</span>;}<span style="color: #800000;">
.w700</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">700px</span>;}<span style="color: #800000;">
.w800</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">800px</span>;}<span style="color: #800000;">
.w</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">100%</span>}<span style="color: #800000;">
.h50</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.h80</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">80px</span>;}<span style="color: #800000;">
.h100</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.h200</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">200px</span>;}<span style="color: #800000;">
.h</span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">100%</span>}

 

<span style="color: #008000;">/*</span><span style="color: #008000;">边距</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.m10</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.m15</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.m30</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.mt5</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.mt10</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.mt15</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.mt20</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.mt30</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.mt50</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.mt100</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.mb5</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.mb10</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.mb15</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.mb20</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.mb30</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.mb50</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.mb100</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.ml5</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.ml10</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.ml15</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.ml20</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.ml30</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.ml50</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.ml100</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.mr5</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.mr10</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.mr15</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.mr20</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.mr30</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.mr50</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.mr100</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.p10</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.p15</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.p30</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.pt5</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.pt10</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.pt15</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.pt20</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.pt30</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.pt50</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.pt100</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.pb5</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.pb10</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.pb15</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.pb20</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.pb30</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.pb50</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.pb100</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.pl5</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.pl10</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.pl15</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.pl20</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.pl30</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.pl50</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.pl100</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.pr5</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.pr10</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.pr15</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.pr20</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.pr30</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.pr50</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.pr100</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">100px</span>;}

View Code

示例4：

<span style="color: #800000;">@charset "utf-8";
</span><span style="color: #008000;">/*</span><span style="color: #008000;">!
 * @名称：base.css
 * @功能：1、重设浏览器默认样式
 *       2、设置通用原子类
 </span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;"> 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
html </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">white</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">black</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 内外边距通常让各个浏览器样式的表现位置不同 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;">0</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 要注意表单元素并不继承父级 font 的问题 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
body,button,input,select,textarea </span>{<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;">12px \5b8b\4f53,arial,sans-serif</span>;
}<span style="color: #800000;">
input,select,textarea </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">100%</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 去掉 table cell 的边距并让其边重合 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
table </span>{<span style="color: #ff0000;">
    border-collapse</span>:<span style="color: #0000ff;">collapse</span>;<span style="color: #ff0000;">
    border-spacing</span>:<span style="color: #0000ff;">0</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> ie bug：th 不继承 text-align </span><span style="color: #008000;">*/</span><span style="color: #800000;">
th </span>{<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;">inherit</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 去除默认边框 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
fieldset,img </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> ie6 7 8(q) bug 显示为行内表现 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
iframe </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;">block</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 去掉 firefox 下此元素的边框 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
abbr,acronym </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">
    font-variant</span>:<span style="color: #0000ff;">normal</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 一致的 del 样式 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
del </span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;">line-through</span>;
}<span style="color: #800000;">
address,caption,cite,code,dfn,em,th,var </span>{<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;">normal</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;">500</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 去掉列表前的标识，li 会继承 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
ol,ul </span>{<span style="color: #ff0000;">
    list-style</span>:<span style="color: #0000ff;">none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 对齐是排版最重要的因素，别让什么都居中 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
caption,th </span>{<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;">left</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 来自yahoo，让标题都自定义，适应多个系统应用 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
h1,h2,h3,h4,h5,h6 </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">100%</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;">500</span>;
}<span style="color: #800000;">
q:before,q:after </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;">''</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 统一上标和下标 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
sub,sup </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">75%</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;">baseline</span>;
}<span style="color: #800000;">
sup </span>{<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;">-0.5em</span>;
}<span style="color: #800000;">
sub </span>{<span style="color: #ff0000;">
    bottom</span>:<span style="color: #0000ff;">-0.25em</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 让链接在 hover 状态下显示下划线 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a:hover </span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;">underline</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 默认不显示下划线，保持页面简洁 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
ins,a </span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;">none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 去除 ie6 & ie7 焦点点状线 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a:focus,*:focus </span>{<span style="color: #ff0000;">
    outline</span>:<span style="color: #0000ff;">none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 清除浮动 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.clearfix:before,.clearfix:after </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;">""</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;">table</span>;
}<span style="color: #800000;">
.clearfix:after </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;">both</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;">hidden</span>;
}<span style="color: #800000;">
.clearfix </span>{<span style="color: #ff0000;">
    zoom</span>:<span style="color: #0000ff;">1</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> for ie6 & ie7 </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">
.clear </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;">both</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;">hidden</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置显示和隐藏，通常用来与 js 配合 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.hide </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;">none</span>;
}<span style="color: #800000;">
.block </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;">block</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置浮动，减少浮动带来的 bug </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.fl,.fr </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;">inline</span>;
}<span style="color: #800000;">
.fl </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;">left</span>;
}<span style="color: #800000;">
.fr </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;">right</span>;
}

View Code

示例5：

<span style="color: #800000;">@charset "utf-8";
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> CSS Document </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;">
CSS reset
重置浏览器默认css设置
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
htm_left</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;">#FFF</span>;}<span style="color: #800000;">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pr,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
table</span>{<span style="color: #ff0000;">border-collapse</span>:<span style="color: #0000ff;">collapse</span>;<span style="color: #ff0000;">border-spacing</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
fieldset,img</span>{<span style="color: #ff0000;">border</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
address,cap_topion,cite,code,dfn,em,strong,th,var,op_topgroup</span>{<span style="color: #ff0000;">font-style</span>:<span style="color: #0000ff;">inherit</span>;<span style="color: #ff0000;">font-weight</span>:<span style="color: #0000ff;">inherit</span>;}<span style="color: #800000;">
del,ins</span>{<span style="color: #ff0000;">text-decoration</span>:<span style="color: #0000ff;">none</span>;}<span style="color: #800000;">
li</span>{<span style="color: #ff0000;">list-style</span>:<span style="color: #0000ff;">none</span>;}<span style="color: #800000;">
cap_topion,th</span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;">left</span>;}<span style="color: #800000;">
h1,h2,h3,h4,h5,h6</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">100%</span>;<span style="color: #ff0000;">font-weight</span>:<span style="color: #0000ff;">normal</span>;}<span style="color: #800000;">
q:before,q:after</span>{<span style="color: #ff0000;">content</span>:<span style="color: #0000ff;">''</span>;}<span style="color: #800000;">
abbr,acronym</span>{<span style="color: #ff0000;">border</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">font-variant</span>:<span style="color: #0000ff;">normal</span>;}<span style="color: #800000;">
sup</span>{<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">baseline</span>;}<span style="color: #800000;">
sub</span>{<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">baseline</span>;}<span style="color: #800000;">
legend</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#000</span>;}<span style="color: #800000;">
input,button,textarea,select,op_topgroup,op_topion</span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;">inherit</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">inherit</span>;<span style="color: #ff0000;">font-style</span>:<span style="color: #0000ff;">inherit</span>;}<span style="color: #800000;">
input,button,textarea,select</span>{<span style="color: #ff0000;">*font-size</span>:<span style="color: #0000ff;">100%</span>;}<span style="color: #800000;">
a</span>{<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;">none</span>;}<span style="color: #800000;">
a:hover</span>{<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;">underline</span>;}<span style="color: #800000;">
a:focus </span>{<span style="color: #ff0000;"> outline</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">
.float_l,float_r</span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;">inline</span>;}

<span style="color: #008000;">/*</span><span style="color: #008000;">
color
字体颜色取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.color_666</span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#666</span>;
}<span style="color: #800000;">
.write</span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">write</span>;
}<span style="color: #800000;">
.red</span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">red</span>;
}<span style="color: #800000;">
.green</span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">green</span>;
}<span style="color: #800000;">
.blue</span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">blue</span>;
}<span style="color: #800000;">
.gray</span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">gray</span>;
}<span style="color: #800000;">
.yellow</span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">yellow</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
font-size
字号取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.font_12</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">12px</span>;
}<span style="color: #800000;">
.font_14</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">14px</span>;
}<span style="color: #800000;">
.font_16</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">16px</span>;
}<span style="color: #800000;">
.font_18</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">18px</span>;
}<span style="color: #800000;">
.font_20</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">20px</span>;
}<span style="color: #800000;">
.font_24</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">24px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
font-weight
字体宽度取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.f_bold</span>{<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;">bold</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
float
浮动取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
float_l</span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;">left</span>;
}<span style="color: #800000;">
float_r</span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;">right</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
disp_leftay
区块取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.hidden</span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;">none</span>;
}<span style="color: #800000;">
.block</span>{<span style="color: #ff0000;">
    disp_leftay</span>:<span style="color: #0000ff;">block</span>;
}<span style="color: #800000;">
.inline</span>{<span style="color: #ff0000;">
    disp_leftay</span>:<span style="color: #0000ff;">inline</span>;
}<span style="color: #800000;">
.inline_block</span>{<span style="color: #ff0000;">
    disp_leftay</span>:<span style="color: #0000ff;">inline-block</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
position
定位取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.position_abs</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;">absolute</span>;
}<span style="color: #800000;">
.position_rel</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;">relative</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
background-color
背景颜色取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.bgc_gray_333</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;">#333</span>;
}<span style="color: #800000;">
.bgc_gray_666</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;">#666</span>;
}<span style="color: #800000;">
.bgc_gray_999</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;">#999</span>;
}<span style="color: #800000;">
.bgc_gray_ccc</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;">#ccc</span>;
}<span style="color: #800000;">
.bgc_blue</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;">blue</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
list-style
列表风格取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.li_s_none</span>{<span style="color: #ff0000;">
    list-style</span>:<span style="color: #0000ff;">none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
text-align
文本位置取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.text_center</span>{<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;">center</span>;
}<span style="color: #800000;">
.text_left</span>{<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;">left</span>;
}<span style="color: #800000;">
.text_right</span>{<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;">right</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
text-decoration
下划线取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.text_d_none</span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;">none</span>;
}<span style="color: #800000;">
.text_d_under</span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;">underline</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
text-indent
首行缩进取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.indent_24px</span>{<span style="color: #ff0000;">
    text-indent</span>:<span style="color: #0000ff;">24px</span>;
}<span style="color: #800000;">
.indent_2em</span>{<span style="color: #ff0000;">
    text-indent</span>:<span style="color: #0000ff;">2em</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
line-height
行高取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.line_h_150</span>{<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;">150%</span>;
}<span style="color: #800000;">
.line_h_180</span>{<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;">180%</span>;
}<span style="color: #800000;">
.line_h_200</span>{<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;">200%</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
clear
浮动清除取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.clear_b</span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;">both</span>;
}<span style="color: #800000;">
.clear_l</span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;">left</span>;
}<span style="color: #800000;">
.clear_r</span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;">rigth</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
width
宽度取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.w10</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.w20</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.w30</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.w40</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">40px</span>;}<span style="color: #800000;">
.w50</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.w60</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">60px</span>;}<span style="color: #800000;">
.w70</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">70px</span>;}<span style="color: #800000;">
.w80</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">80px</span>;}<span style="color: #800000;">
.w90</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">90px</span>;}<span style="color: #800000;">
.w100</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.w200</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">200px</span>;}<span style="color: #800000;">
.w300</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">300px</span>;}<span style="color: #800000;">
.w400</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">400px</span>;}<span style="color: #800000;">
.w500</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">
.w600</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">600px</span>;}<span style="color: #800000;">
.w700</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">700px</span>;}<span style="color: #800000;">
.w800</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">800px</span>;}<span style="color: #800000;">
.w998</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">998px</span>;}<span style="color: #800000;">
.w1001</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">1001px</span>;}
<span style="color: #008000;">/*</span><span style="color: #008000;">
margin
外边距取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.m_auto</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">auto</span>;}<span style="color: #800000;">
.m10</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.m15</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.m30</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.m_top5</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.m_top10</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.m_top_top15</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.m_top20</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.m_top30</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.m_top50</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.m_top100</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.m_bottom5</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.m_bottom10</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.m_bottom15</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.m_bottom20</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.m_bottom30</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.m_bottom50</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.m_bottom100</span>{<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.m_left5</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.m_left10</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.m_left15</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.m_left20</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.m_left30</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.m_left50</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.m_left100</span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.m_right5</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.m_right10</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.m_right15</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.m_right20</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.m_right30</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.m_right50</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.m_right100</span>{<span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;">100px</span>;}
<span style="color: #008000;">/*</span><span style="color: #008000;">
padding
内边距取值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.p10</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.p15</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.p30</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.p_top5</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.p_top10</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.p_top15</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.p_top20</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.p_top30</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.p_top50</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.p_top100</span>{<span style="color: #ff0000;">padding-top</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.p_bottom5</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.p_bottom10</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.p_bottom15</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.p_bottom20</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.p_bottom30</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.p_bottom50</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.p_bottom100</span>{<span style="color: #ff0000;">padding-bottom</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.p_left5</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.p_left10</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.p_left15</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.p_left20</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.p_left30</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.p_left50</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.p_left100</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">100px</span>;}<span style="color: #800000;">
.p_right5</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">5px</span>;}<span style="color: #800000;">
.p_right10</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">10px</span>;}<span style="color: #800000;">
.p_right15</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">15px</span>;}<span style="color: #800000;">
.p_right20</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">20px</span>;}<span style="color: #800000;">
.p_right30</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
.p_right50</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">50px</span>;}<span style="color: #800000;">
.p_right100</span>{<span style="color: #ff0000;">padding-right</span>:<span style="color: #0000ff;">100px</span>;}

View Code

示例6：（来自小米）

<span style="color: #800000;">article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block
</span>}<span style="color: #800000;">

audio,
canvas,
video </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    *display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

audio:not([controls]) </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

[hidden] </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

html </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    -ms-text-size-adjust</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    -webkit-text-size-adjust</span>:<span style="color: #0000ff;"> 100%
</span>}<span style="color: #800000;">

html,
button,
input,
select,
textarea </span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> sans-serif
</span>}<span style="color: #800000;">

body </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

a:active,
a:hover </span>{<span style="color: #ff0000;">
    outline</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

h1 </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 2em</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0.67em 0
</span>}<span style="color: #800000;">

h2 </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 1.5em</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0.83em 0
</span>}<span style="color: #800000;">

h3 </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 1.17em</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 1em 0
</span>}<span style="color: #800000;">

h4 </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 1em</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 1.33em 0
</span>}<span style="color: #800000;">

h5 </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 0.83em</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 1.67em 0
</span>}<span style="color: #800000;">

h6 </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 0.67em</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 2.33em 0
</span>}<span style="color: #800000;">

abbr[title] </span>{<span style="color: #ff0000;">
    border-bottom</span>:<span style="color: #0000ff;"> 1px dotted
</span>}<span style="color: #800000;">

b,
strong </span>{<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> bold
</span>}<span style="color: #800000;">

blockquote </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 1em 40px
</span>}<span style="color: #800000;">

dfn </span>{<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> italic
</span>}<span style="color: #800000;">

hr </span>{<span style="color: #ff0000;">
    -webkit-box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

mark </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #ff0</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #000
</span>}<span style="color: #800000;">

p,
pre </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 1em 0
</span>}<span style="color: #800000;">

code,
kbd,
pre,
samp </span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> monospace, serif</span>;<span style="color: #ff0000;">
    _font-family</span>:<span style="color: #0000ff;"> 'courier new', monospace</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 1em
</span>}<span style="color: #800000;">

pre </span>{<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;"> pre</span>;<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;"> pre-wrap</span>;<span style="color: #ff0000;">
    word-wrap</span>:<span style="color: #0000ff;"> break-word
</span>}<span style="color: #800000;">

q </span>{<span style="color: #ff0000;">
    quotes</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

q:before,
q:after </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

small </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 80%
</span>}<span style="color: #800000;">

sub,
sup </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 75%</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> baseline
</span>}<span style="color: #800000;">

sup </span>{<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> -0.5em
</span>}<span style="color: #800000;">

sub </span>{<span style="color: #ff0000;">
    bottom</span>:<span style="color: #0000ff;"> -0.25em
</span>}<span style="color: #800000;">

dl,
menu,
ol,
ul </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 1em 0
</span>}<span style="color: #800000;">

dd </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 0 0 40px
</span>}<span style="color: #800000;">

menu,
ol,
ul </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 0 0 40px
</span>}<span style="color: #800000;">

nav ul,
nav ol </span>{<span style="color: #ff0000;">
    list-style</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    list-style-image</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

img </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    -ms-interpolation-mode</span>:<span style="color: #0000ff;"> bicubic
</span>}<span style="color: #800000;">

svg:not(:root) </span>{<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

figure </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

form </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

fieldset </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #c0c0c0</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 2px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0.35em 0.625em 0.75em
</span>}<span style="color: #800000;">

legend </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
    *margin-left</span>:<span style="color: #0000ff;"> -7px
</span>}<span style="color: #800000;">

button,
input,
select,
textarea </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> baseline</span>;<span style="color: #ff0000;">
    *vertical-align</span>:<span style="color: #0000ff;"> middle
</span>}<span style="color: #800000;">

button,
input </span>{<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> normal
</span>}<span style="color: #800000;">

button,
select </span>{<span style="color: #ff0000;">
    text-transform</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] </span>{<span style="color: #ff0000;">
    -webkit-appearance</span>:<span style="color: #0000ff;"> button</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;<span style="color: #ff0000;">
    *overflow</span>:<span style="color: #0000ff;"> visible
</span>}<span style="color: #800000;">

button[disabled],
html input[disabled] </span>{<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> default
</span>}<span style="color: #800000;">

input[type="checkbox"],
input[type="radio"] </span>{<span style="color: #ff0000;">
    -webkit-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    *height</span>:<span style="color: #0000ff;"> 13px</span>;<span style="color: #ff0000;">
    *width</span>:<span style="color: #0000ff;"> 13px
</span>}<span style="color: #800000;">

input[type="search"] </span>{<span style="color: #ff0000;">
    -webkit-appearance</span>:<span style="color: #0000ff;"> textfield</span>;<span style="color: #ff0000;">
    -webkit-box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;"> content-box
</span>}<span style="color: #800000;">

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration </span>{<span style="color: #ff0000;">
    -webkit-appearance</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

button::-moz-focus-inner,
input::-moz-focus-inner </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

textarea </span>{<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> top
</span>}<span style="color: #800000;">

table </span>{<span style="color: #ff0000;">
    border-collapse</span>:<span style="color: #0000ff;"> collapse</span>;<span style="color: #ff0000;">
    border-spacing</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

body </span>{<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;"> 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #333</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    min-width</span>:<span style="color: #0000ff;"> 1226px
</span>}<span style="color: #800000;">

a </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575</span>;<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

a:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700</span>;<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.clearfix </span>{<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.clearfix:before,
.clearfix:after </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> " "</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table
</span>}<span style="color: #800000;">

.clearfix:after </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both
</span>}<span style="color: #800000;">

.hide </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none !important
</span>}<span style="color: #800000;">

.ir </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    text-indent</span>:<span style="color: #0000ff;"> -9999em</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.sep,
.ndash </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 .25em</span>;<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> sans-serif
</span>}<span style="color: #800000;">

.container </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 1226px</span>;<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> auto
</span>}<span style="color: #800000;">

.container:before,
.container:after </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> " "</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table
</span>}<span style="color: #800000;">

.container:after </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both
</span>}<span style="color: #800000;">

.row </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -14px</span>;<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.row:before,
.row:after </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> " "</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table
</span>}<span style="color: #800000;">

.row:after </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both
</span>}<span style="color: #800000;">

.page-main </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #f5f5f5
</span>}<span style="color: #800000;">

.span1,
.span2,
.span3,
.span4,
.span5,
.span6,
.span7,
.span8,
.span9,
.span10,
.span11,
.span12,
.span13,
.span14,
.span15,
.span16,
.span17,
.span18,
.span19,
.span20 </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    min-height</span>:<span style="color: #0000ff;"> 1px
</span>}<span style="color: #800000;">

.span1 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 48px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span2 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 110px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span3 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 172px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span4 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 234px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span5 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 296px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span6 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 358px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span7 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 420px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span8 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 482px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span9 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 544px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span10 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 606px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span11 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 668px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span12 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 730px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span13 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 792px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span14 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 854px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span15 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 916px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span16 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 978px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span17 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 1040px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span18 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 1102px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span19 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 1164px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.span20 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 1226px
</span>}<span style="color: #800000;">

.span-first </span>{<span style="color: #ff0000;">
    _margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.offset1 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 48px
</span>}<span style="color: #800000;">

.offset2 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 110px
</span>}<span style="color: #800000;">

.offset3 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 172px
</span>}<span style="color: #800000;">

.offset4 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 234px
</span>}<span style="color: #800000;">

.offset5 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 296px
</span>}<span style="color: #800000;">

.offset6 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 358px
</span>}<span style="color: #800000;">

.offset7 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 420px
</span>}<span style="color: #800000;">

.offset8 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 482px
</span>}<span style="color: #800000;">

.offset9 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 544px
</span>}<span style="color: #800000;">

.offset10 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 606px
</span>}<span style="color: #800000;">

.offset11 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 668px
</span>}<span style="color: #800000;">

.offset12 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 730px
</span>}<span style="color: #800000;">

.offset13 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 792px
</span>}<span style="color: #800000;">

.offset14 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 854px
</span>}<span style="color: #800000;">

.offset15 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 916px
</span>}<span style="color: #800000;">

.offset16 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 978px
</span>}<span style="color: #800000;">

.offset17 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 1040px
</span>}<span style="color: #800000;">

.offset18 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 1102px
</span>}<span style="color: #800000;">

.offset19 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 1164px
</span>}<span style="color: #800000;">

.offset20 </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 1226px
</span>}<span style="color: #800000;">

@font-face </span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> 'iconfont'</span>;<span style="color: #ff0000;">
    src</span>:<span style="color: #0000ff;"> url("/i/font/iconfont.eot")</span>;<span style="color: #ff0000;">
    src</span>:<span style="color: #0000ff;"> url("/i/font/iconfont.eot?#iefix") format("embedded-opentype")
</span>}<span style="color: #800000;">

@font-face </span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> 'iconfont'</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">被删除了</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal
</span>}<span style="color: #800000;">

.iconfont </span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> "iconfont" !important</span>;<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
    -webkit-font-smoothing</span>:<span style="color: #0000ff;"> antialiased</span>;<span style="color: #ff0000;">
    -webkit-text-stroke-width</span>:<span style="color: #0000ff;"> 0.2px</span>;<span style="color: #ff0000;">
    -moz-osx-font-smoothing</span>:<span style="color: #0000ff;"> grayscale
</span>}<span style="color: #800000;">

.btn </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    *display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 158px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 38px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #b0b0b0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 38px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> all .4s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> all .4s
</span>}<span style="color: #800000;">

.btn:hover </span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0
</span>}<span style="color: #800000;">

.btn:focus </span>{<span style="color: #ff0000;">
    outline</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.btn:active </span>{<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> inset 0 2px 4px rgba(0, 0, 0, 0.18)</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> inset 0 2px 4px rgba(0, 0, 0, 0.18)
</span>}<span style="color: #800000;">

.btn[disabled] </span>{<span style="color: #ff0000;">
    border-style</span>:<span style="color: #0000ff;"> dashed !important</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #e0e0e0</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fff !important</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0 !important</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> default !important
</span>}<span style="color: #800000;">

.btn-disabled </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #e0e0e0 !important</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #e0e0e0 !important</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0 !important</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> default !important
</span>}<span style="color: #800000;">

.btn-small </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 118px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 28px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 28px
</span>}<span style="color: #800000;">

.btn-large </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 178px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 48px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 48px
</span>}<span style="color: #800000;">

.btn-block </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    padding-left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding-right</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

input.btn,
button.btn </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 160px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px
</span>}<span style="color: #800000;">

input.btn-small,
button.btn-small </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 30px
</span>}<span style="color: #800000;">

input.btn-large,
button.btn-large </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 180px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 50px
</span>}<span style="color: #800000;">

.btn-gray </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-gray:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #757575</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #757575</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-primary </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #ff6700</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ff6700</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-primary:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f25807</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #f25807</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-green </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #83c44e</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #83c44e</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-green:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #71b639</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #71b639</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-orange </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #ffac13</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ffac13</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-orange:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #ff920f</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ff920f</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-gold </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #ffd600</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ffd600</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-gold:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fec517</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #fec517</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-ocean </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #2196f3</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #2196f3</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-ocean:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #0c80dc</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #0c80dc</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-blue </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #545ad0</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #545ad0</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-blue:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #494fc5</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #494fc5</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-red </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #e53935</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #e53935</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-red:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #e42a27</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #e42a27</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-purple </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #a31daf</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #a31daf</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-purple:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #9715a2</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #9715a2</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-pink </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #f93e7a</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #f93e7a</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-pink:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #e9306c</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #e9306c</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-cyan </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #00c0a5</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #00c0a5</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-cyan:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #03b3ad</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #03b3ad</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.btn-line-gray </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575
</span>}<span style="color: #800000;">

.btn-line-gray:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #757575</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #757575
</span>}<span style="color: #800000;">

.btn-line-primary </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ff6700</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.btn-line-primary:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f25807</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #f25807
</span>}<span style="color: #800000;">

.btn-line-green </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #83c44e</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #83c44e
</span>}<span style="color: #800000;">

.btn-line-green:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #71b639</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #71b639
</span>}<span style="color: #800000;">

.btn-line-orange </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ffac13</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ffac13
</span>}<span style="color: #800000;">

.btn-line-orange:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #ff920f</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ff920f
</span>}<span style="color: #800000;">

.btn-line-gold </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ffd600</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ffd600
</span>}<span style="color: #800000;">

.btn-line-gold:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fec517</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #fec517
</span>}<span style="color: #800000;">

.btn-line-ocean </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #2196f3</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #2196f3
</span>}<span style="color: #800000;">

.btn-line-ocean:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #0c80dc</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #0c80dc
</span>}<span style="color: #800000;">

.btn-line-blue </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #545ad0</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #545ad0
</span>}<span style="color: #800000;">

.btn-line-blue:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #494fc5</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #494fc5
</span>}<span style="color: #800000;">

.btn-line-red </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #e53935</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #e53935
</span>}<span style="color: #800000;">

.btn-line-red:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #e42a27</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #e42a27
</span>}<span style="color: #800000;">

.btn-line-purple </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #a31daf</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #a31daf
</span>}<span style="color: #800000;">

.btn-line-purple:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #9715a2</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #9715a2
</span>}<span style="color: #800000;">

.btn-line-pink </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #f93e7a</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #f93e7a
</span>}<span style="color: #800000;">

.btn-line-pink:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #e9306c</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #e9306c
</span>}<span style="color: #800000;">

.btn-line-cyan </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #00c0a5</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #00c0a5
</span>}<span style="color: #800000;">

.btn-line-cyan:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #03b3ad</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #03b3ad
</span>}<span style="color: #800000;">

.input-label </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 11px</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 3px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 18px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> text</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> all .2s linear</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> all .2s linear
</span>}<span style="color: #800000;">

.input-text </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 186px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 18px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 10px 16px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 18px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> border-color .2s linear</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> border-color .2s linear
</span>}<span style="color: #800000;">

.input-text:hover </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #b0b0b0
</span>}<span style="color: #800000;">

.input-text:focus </span>{<span style="color: #ff0000;">
    outline</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

textarea.input-text </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 3em</span>;<span style="color: #ff0000;">
    resize</span>:<span style="color: #0000ff;"> vertical
</span>}<span style="color: #800000;">

.xm-select </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 220px</span>;<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> 14px
</span>}<span style="color: #800000;">

.xm-select label </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 11px</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;<span style="color: #ff0000;">
    pointer-events</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.xm-select select </span>{<span style="color: #ff0000;">
    -webkit-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 120%</span>;<span style="color: #ff0000;">
    max-width</span>:<span style="color: #0000ff;"> 120%</span>;<span style="color: #ff0000;">
    min-width</span>:<span style="color: #0000ff;"> 120%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 38px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 16px</span>;<span style="color: #ff0000;">
    -webkit-appearance</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    -moz-appearance</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    appearance</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> 400</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 38px</span>;<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;"> nowrap</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> middle</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #333</span>;<span style="color: #ff0000;">
    outline</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer
</span>}<span style="color: #800000;">

.xm-select .dropdown </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    max-width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 38px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #333</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> border-color .2s linear</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> border-color .2s linear
</span>}<span style="color: #800000;">

.xm-select:hover .dropdown </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #b0b0b0
</span>}<span style="color: #800000;">

.xm-ie-select label </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.xm-ie-select select </span>{<span style="color: #ff0000;">
    -webkit-box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 96%</span>;<span style="color: #ff0000;">
    max-width</span>:<span style="color: #0000ff;"> 96%</span>;<span style="color: #ff0000;">
    min-width</span>:<span style="color: #0000ff;"> 96%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 28px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 28px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 2%
</span>}<span style="color: #800000;">

.xm-ie-select .dropdown </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 33px</span>;<span style="color: #ff0000;">
    *height</span>:<span style="color: #0000ff;"> 32px</span>;<span style="color: #ff0000;">
    padding-top</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
    *padding-top</span>:<span style="color: #0000ff;"> 8px</span>;<span style="color: #ff0000;">
    *border</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.form-section </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 0 14px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> left
</span>}<span style="color: #800000;">

.form-section .input-text::-webkit-input-placeholder </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.form-section .input-text::-moz-placeholder </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.form-section .input-text:-ms-input-placeholder </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.form-section .input-text::placeholder </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.form-section .input-text[disabled] </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f5f5f5
</span>}<span style="color: #800000;">

.form-section .input-text[disabled]::-webkit-input-placeholder </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #f5f5f5
</span>}<span style="color: #800000;">

.form-section .input-text[disabled]::-moz-placeholder </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #f5f5f5
</span>}<span style="color: #800000;">

.form-section .input-text[disabled]:-ms-input-placeholder </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #f5f5f5
</span>}<span style="color: #800000;">

.form-section .input-text[disabled]::placeholder </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #f5f5f5
</span>}<span style="color: #800000;">

.form-section .msg </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> -26px</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 5</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 6px 12px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> 0 3px 4px rgba(0, 0, 0, 0.18)</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> 0 3px 4px rgba(0, 0, 0, 0.18)
</span>}<span style="color: #800000;">

.form-section .msg-error </span>{<span style="color: #ff0000;">
    visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    visibility</span>:<span style="color: #0000ff;"> visible \9</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none \9</span>;<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=0)\9</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #e53935</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(0, 5px, 0)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate3d(0, 5px, 0)</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> all .2s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> all .2s
</span>}<span style="color: #800000;">

.form-section .msg-error:after </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 15px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 6px</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url("data:image/png</span>;<span style="color: #ff0000;">base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAGCAYAAAD37n+BAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkY4QzZBOTEzMDMyMTFFNTlCQzFDMTI2ODdDRkMyNzciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkY4QzZBOTAzMDMyMTFFNTlCQzFDMTI2ODdDRkMyNzciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQTZCNDRFMzJFOTAxMUU1OUJDMUMxMjY4N0NGQzI3NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQTZCNDRFNDJFOTAxMUU1OUJDMUMxMjY4N0NGQzI3NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoqQVgUAAABNSURBVHjaYnxhrlvPwMDQwEAcaGACEo1AXE+EYpCaRiYop4mApnqoGgYmJEGQQB0WxXUwxegaQKAZiGuR+LVQMThgwWJiCw42GAAEGADDKgvj76U41wAAAABJRU5ErkJggg==") no-repeat 50% 50%
</span>}<span style="color: #800000;">

.form-section-focus .input-text </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.form-section-focus .input-text::-webkit-input-placeholder </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> color .2s .2s linear</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> color .2s .2s linear
</span>}<span style="color: #800000;">

.form-section-focus .input-text::-moz-placeholder </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> color .2s .2s linear
</span>}<span style="color: #800000;">

.form-section-focus .input-text:-ms-input-placeholder </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> color .2s .2s linear
</span>}<span style="color: #800000;">

.form-section-focus .input-text::placeholder </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> color .2s .2s linear</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> color .2s .2s linear
</span>}<span style="color: #800000;">

.form-section-focus .input-label </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.form-section-focus .msg-error </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block \9</span>;<span style="color: #ff0000;">
    visibility</span>:<span style="color: #0000ff;"> visible</span>;<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=100)\9</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)
</span>}<span style="color: #800000;">

.form-section-active .input-label </span>{<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> -7px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.form-section-error textarea.input-text,
.form-section-error input.input-text </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url("../i/icon/input-err.png") no-repeat 95% 50%
</span>}<span style="color: #800000;">

.loading </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 20px 0
</span>}<span style="color: #800000;">

.loader </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #ff6700</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> visible</span>;<span style="color: #ff0000;">
    -webkit-animation-delay</span>:<span style="color: #0000ff;"> 0s</span>;<span style="color: #ff0000;">
    animation-delay</span>:<span style="color: #0000ff;"> 0s</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> scale(1, 1)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> scale(1, 1)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> scale(1, 1)
</span>}<span style="color: #800000;">

.loader,
.loader:before,
.loader:after </span>{<span style="color: #ff0000;">
    -webkit-transform-origin</span>:<span style="color: #0000ff;"> 50% 50%</span>;<span style="color: #ff0000;">
    -ms-transform-origin</span>:<span style="color: #0000ff;"> 50% 50%</span>;<span style="color: #ff0000;">
    transform-origin</span>:<span style="color: #0000ff;"> 50% 50%</span>;<span style="color: #ff0000;">
    -webkit-animation-name</span>:<span style="color: #0000ff;"> loader</span>;<span style="color: #ff0000;">
    animation-name</span>:<span style="color: #0000ff;"> loader</span>;<span style="color: #ff0000;">
    -webkit-animation-duration</span>:<span style="color: #0000ff;"> .3s</span>;<span style="color: #ff0000;">
    animation-duration</span>:<span style="color: #0000ff;"> .3s</span>;<span style="color: #ff0000;">
    -webkit-animation-timing-function</span>:<span style="color: #0000ff;"> linear</span>;<span style="color: #ff0000;">
    animation-timing-function</span>:<span style="color: #0000ff;"> linear</span>;<span style="color: #ff0000;">
    -webkit-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">
    animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">
    -webkit-animation-direction</span>:<span style="color: #0000ff;"> alternate-reverse</span>;<span style="color: #ff0000;">
    animation-direction</span>:<span style="color: #0000ff;"> alternate-reverse
</span>}<span style="color: #800000;">

.loader:before,
.loader:after </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.loader:before </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> -10px 0 0 -10px</span>;<span style="color: #ff0000;">
    -webkit-animation-delay</span>:<span style="color: #0000ff;"> .25s</span>;<span style="color: #ff0000;">
    animation-delay</span>:<span style="color: #0000ff;"> .25s</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> scale(1, 0.3)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> scale(1, 0.3)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> scale(1, 0.3)
</span>}<span style="color: #800000;">

.loader:after </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> -10px 0 0 6px</span>;<span style="color: #ff0000;">
    -webkit-animation-delay</span>:<span style="color: #0000ff;"> .5s</span>;<span style="color: #ff0000;">
    animation-delay</span>:<span style="color: #0000ff;"> .5s</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> scale(1, 0.5)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> scale(1, 0.5)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> scale(1, 0.5)
</span>}<span style="color: #800000;">

.loader-white,
.loader-white:before,
.loader-white:after </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.loader-gray,
.loader-gray:before,
.loader-gray:after </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.3)</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> progid: DXImageTransform.Microsoft.gradient(startColorstr="#4c000000", endColorstr="#4c000000")\9
</span>}<span style="color: #800000;">

@-webkit-keyframes loader </span>{<span style="color: #ff0000;">
    0% {
        -webkit-transform</span>:<span style="color: #0000ff;"> scale(1, 0.5)</span>;<span style="color: #ff0000;">
        opacity</span>:<span style="color: #0000ff;"> .2</span>;<span style="color: #ff0000;">
        filter</span>:<span style="color: #0000ff;"> alpha(opacity=20)\9
    </span>}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">
        -webkit-transform</span>:<span style="color: #0000ff;"> scale(1, 1)</span>;<span style="color: #ff0000;">
        opacity</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
        filter</span>:<span style="color: #0000ff;"> alpha(opacity=100)\9
    </span>}<span style="color: #800000;">
}

@keyframes loader </span>{<span style="color: #ff0000;">
    0% {
        -webkit-transform</span>:<span style="color: #0000ff;"> scale(1, 0.5)</span>;<span style="color: #ff0000;">
        transform</span>:<span style="color: #0000ff;"> scale(1, 0.5)</span>;<span style="color: #ff0000;">
        opacity</span>:<span style="color: #0000ff;"> .2</span>;<span style="color: #ff0000;">
        filter</span>:<span style="color: #0000ff;"> alpha(opacity=20)\9
    </span>}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">
        -webkit-transform</span>:<span style="color: #0000ff;"> scale(1, 1)</span>;<span style="color: #ff0000;">
        transform</span>:<span style="color: #0000ff;"> scale(1, 1)</span>;<span style="color: #ff0000;">
        opacity</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
        filter</span>:<span style="color: #0000ff;"> alpha(opacity=100)\9
    </span>}<span style="color: #800000;">
}

.fade </span>{<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=0)\9</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> opacity .15s linear</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> opacity .15s linear
</span>}<span style="color: #800000;">

.fade.in </span>{<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=100)\9
</span>}<span style="color: #800000;">

.modal-backdrop </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> fixed !important</span>;<span style="color: #ff0000;">
    _position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 1040</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #000
</span>}<span style="color: #800000;">

.modal-backdrop.fade </span>{<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=0)\9
</span>}<span style="color: #800000;">

.modal-backdrop,
.modal-backdrop.fade.in </span>{<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 0.5</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=50)\9
</span>}<span style="color: #800000;">

.modal </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> fixed !important</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    _position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    _top</span>:<span style="color: #0000ff;"> 15%</span>;<span style="color: #ff0000;">
    _margin-top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 1050</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 660px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -330px</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> -300px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    outline</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.modal.fade </span>{<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> opacity .4s linear, top .4s ease-out</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> opacity .4s linear, top .4s ease-out</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> -25%
</span>}<span style="color: #800000;">

.modal.fade.in </span>{<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    _top</span>:<span style="color: #0000ff;"> 15%
</span>}<span style="color: #800000;">

.modal .close </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> all .2s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> all .2s</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 10</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 15px
</span>}<span style="color: #800000;">

.modal .close:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #e53935
</span>}<span style="color: #800000;">

.modal .close .iconfont </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> 200</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> middle
</span>}<span style="color: #800000;">

.modal-hide </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.modal-header,
.modal-hd </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 32px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 14px 20px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f5f5f5
</span>}<span style="color: #800000;">

.modal-header h3,
.modal-header .title,
.modal-hd h3,
.modal-hd .title </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 18px</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> 400</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 32px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242
</span>}<span style="color: #800000;">

.modal-body,
.modal-bd </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    max-height</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 40px 60px
</span>}<span style="color: #800000;">

.modal-footer,
.modal-ft </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 20px 0</span>;<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f5f5f5</span>;<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.modal-footer:before,
.modal-footer:after,
.modal-ft:before,
.modal-ft:after </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> " "</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table
</span>}<span style="color: #800000;">

.modal-footer:after,
.modal-ft:after </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both
</span>}<span style="color: #800000;">

.modal-footer .btn,
.modal-ft .btn </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 7px
</span>}<span style="color: #800000;">

.modal-alert </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 500px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -250px
</span>}<span style="color: #800000;">

.modal-alert .modal-bd </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 60px 60px 40px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.modal-alert .text </span>{<span style="color: #ff0000;">
    min-height</span>:<span style="color: #0000ff;"> 130px
</span>}<span style="color: #800000;">

.modal-alert h3,
.modal-alert .title </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> 400</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242
</span>}<span style="color: #800000;">

.modal-alert p </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 18px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0
</span>}<span style="color: #800000;">

.modal-alert .actions .btn </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 7px
</span>}<span style="color: #800000;">

.breadcrumbs </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #f5f5f5</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #616161
</span>}<span style="color: #800000;">

.breadcrumbs a </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575
</span>}<span style="color: #800000;">

.breadcrumbs a:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242
</span>}<span style="color: #800000;">

.breadcrumbs .sep </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 0.5em</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0
</span>}<span style="color: #800000;">

.xm-pagenavi </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 15px 0</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.xm-pagenavi .numbers </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    *display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 48px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 3px 0</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 7px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 18px</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> 200</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0
</span>}<span style="color: #800000;">

.xm-pagenavi .iconfont </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> bottom
</span>}<span style="color: #800000;">

.xm-pagenavi a.numbers </span>{<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> all .2s linear</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> all .2s linear
</span>}<span style="color: #800000;">

.xm-pagenavi a.numbers:hover </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.xm-pagenavi .current </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #757575</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.xm-carousel-list </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    list-style-type</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.xm-carousel-list li </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 234px</span>;<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> 14px
</span>}<span style="color: #800000;">

.xm-carousel-col-4-list li </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 296px
</span>}<span style="color: #800000;">

.xm-carousel-col-5-list li </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 234px
</span>}<span style="color: #800000;">

.xm-controls .control </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    *display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> color .5s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> color .5s
</span>}<span style="color: #800000;">

.xm-controls .control:focus </span>{<span style="color: #ff0000;">
    outline</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.xm-controls .control:hover,
.xm-controls .control.active </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.xm-controls-small .control </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 16px 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 16px
</span>}<span style="color: #800000;">

.xm-controls-middle .control </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 48px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 48px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 24px 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 48px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 48px
</span>}<span style="color: #800000;">

.xm-controls-large .control </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 64px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 64px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 16px 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 64px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 64px
</span>}<span style="color: #800000;">

.xm-controls-line-small .control </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 3px 5px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 16px
</span>}<span style="color: #800000;">

.xm-controls-line-small .control-disabled,
.xm-controls-small .control-disabled,
.xm-controls-middle .control-disabled,
.xm-controls-large .control-disabled </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #e0e0e0
</span>}<span style="color: #800000;">

.xm-controls-line-small .control-disabled:hover,
.xm-controls-line-small .control-disabled.active,
.xm-controls-small .control-disabled:hover,
.xm-controls-small .control-disabled.active,
.xm-controls-middle .control-disabled:hover,
.xm-controls-middle .control-disabled.active,
.xm-controls-large .control-disabled:hover,
.xm-controls-large .control-disabled.active </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #e0e0e0
</span>}<span style="color: #800000;">

.xm-controls-block-small .control,
.xm-controls-block-middle .control </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> rgba(66, 66, 66, 0.2)</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> progid: DXImageTransform.Microsoft.gradient(startColorstr="#33424242", endColorstr="#33424242")\9</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> background-color .5s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> background-color .5s
</span>}<span style="color: #800000;">

.xm-controls-block-small .control:hover,
.xm-controls-block-small .control.active,
.xm-controls-block-middle .control:hover,
.xm-controls-block-middle .control.active </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #757575</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> rgba(66, 66, 66, 0.6)</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> progid: DXImageTransform.Microsoft.gradient(startColorstr="#99424242", endColorstr="#99424242")\9
</span>}<span style="color: #800000;">

.xm-controls-block-small .control-disabled,
.xm-controls-block-middle .control-disabled </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fafafa
</span>}<span style="color: #800000;">

.xm-controls-block-small .control-disabled:hover,
.xm-controls-block-small .control-disabled.active,
.xm-controls-block-middle .control-disabled:hover,
.xm-controls-block-middle .control-disabled.active </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fafafa
</span>}<span style="color: #800000;">

.xm-controls-block-small .control </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 12px 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 18px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 24px
</span>}<span style="color: #800000;">

.xm-controls-block-middle .control </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 36px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 48px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 24px 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 36px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 48px
</span>}<span style="color: #800000;">

.xm-controls .control-disabled </span>{<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> default
</span>}<span style="color: #800000;">

.xm-pagers-wrapper </span>{<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.xm-pagers </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    list-style-type</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.xm-pagers .dot </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 6px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 6px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 2px solid #f5f5f5</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 6px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    text-indent</span>:<span style="color: #0000ff;"> -9999em</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> all .5s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> all .5s
</span>}<span style="color: #800000;">

.xm-pagers .pager </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    *display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 2px</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer
</span>}<span style="color: #800000;">

.xm-pagers .pager:hover .dot </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.xm-pagers .pager-active </span>{<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> default
</span>}<span style="color: #800000;">

.xm-pagers .pager-active .dot,
.xm-pagers .pager-active:hover .dot </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ff6700</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f5f5f5</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> transparent
</span>}<span style="color: #800000;">

.site-topbar </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 30</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #333
</span>}<span style="color: #800000;">

.site-topbar a </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0
</span>}<span style="color: #800000;">

.site-topbar a:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.site-topbar .sep </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 .5em</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242
</span>}<span style="color: #800000;">

.site-topbar .topbar-nav </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.site-topbar .topbar-cart,
.site-topbar .topbar-info </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
    _display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px
</span>}<span style="color: #800000;">

.site-topbar .topbar-cart </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 15px
</span>}<span style="color: #800000;">

.site-topbar .topbar-cart-filled .cart-mini </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-topbar .topbar-cart-active .cart-mini </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.site-topbar .topbar-info </span>{<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px
</span>}<span style="color: #800000;">

.site-topbar .topbar-info .link,
.site-topbar .topbar-info .user,
.site-topbar .topbar-info .message,
.site-topbar .topbar-info .sep </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left
</span>}<span style="color: #800000;">

.site-topbar .topbar-info .link </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 5px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.site-topbar .topbar-info .link-order </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 70px
</span>}<span style="color: #800000;">

.site-topbar .topbar-info .sep </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.site-topbar .cart-mini </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 32</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #424242
</span>}<span style="color: #800000;">

.site-topbar .cart-mini i </span>{<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> -4px
</span>}<span style="color: #800000;">

.site-topbar .cart-mini-num </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -4px
</span>}<span style="color: #800000;">

.site-topbar .cart-menu </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> -1px \9</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 31</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 316px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 15px 0 0</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0 \9</span>;<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 0 \9</span>;<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> 0 2px 10px rgba(0, 0, 0, 0.15)</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> 0 2px 10px rgba(0, 0, 0, 0.15)
</span>}<span style="color: #800000;">

.site-topbar .cart-menu .loading </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 5px 20px 20px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.site-topbar .cart-menu .msg </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 5px 20px 20px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.site-topbar .cart-list </span>{<span style="color: #ff0000;">
    *position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    list-style-type</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.site-topbar .cart-list li </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 80px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 20px
</span>}<span style="color: #800000;">

.site-topbar .cart-list li:first-child .cart-item,
.site-topbar .cart-list li.first .cart-item </span>{<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.site-topbar .cart-item </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 60px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 10px 0</span>;<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 20px
</span>}<span style="color: #800000;">

.site-topbar .cart-item:hover .btn-del </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block
</span>}<span style="color: #800000;">

.site-topbar .cart-item .thumb </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> 10px
</span>}<span style="color: #800000;">

.site-topbar .cart-item .thumb img </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 60px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 60px
</span>}<span style="color: #800000;">

.site-topbar .cart-item .name </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    _display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 95px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 10px 0</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242
</span>}<span style="color: #800000;">

.site-topbar .cart-item a.name:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-topbar .cart-item .price </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
    _display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 10px 20px 0 5px
</span>}<span style="color: #800000;">

.site-topbar .cart-item .btn-del </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    _display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 21px</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.site-topbar .cart-item .btn-del:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242
</span>}<span style="color: #800000;">

.site-topbar .cart-item .btn-del i </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 16px
</span>}<span style="color: #800000;">

.site-topbar .cart-total </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 15px 20px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fafafa
</span>}<span style="color: #800000;">

.site-topbar .cart-total em </span>{<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> normal
</span>}<span style="color: #800000;">

.site-topbar .cart-total .total </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 135px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575
</span>}<span style="color: #800000;">

.site-topbar .cart-total .price </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> 400</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-topbar .cart-total .price em </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.site-topbar .cart-total .btn-cart </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 130px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #f5f5f5</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-topbar .user </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 110px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;"> nowrap
</span>}<span style="color: #800000;">

.site-topbar .user-name </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 5</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.site-topbar .user-name .name </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    *display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    _width</span>:<span style="color: #0000ff;"> 75px</span>;<span style="color: #ff0000;">
    max-width</span>:<span style="color: #0000ff;"> 75px</span>;<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;"> nowrap</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> text-bottom
</span>}<span style="color: #800000;">

.site-topbar .user-name i </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> 9px
</span>}<span style="color: #800000;">

.site-topbar .user-menu </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> -1px \9</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 7px 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0 \9</span>;<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 0 \9</span>;<span style="color: #ff0000;">
    list-style-type</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> 0 2px 10px rgba(0, 0, 0, 0.15)</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> 0 2px 10px rgba(0, 0, 0, 0.15)
</span>}<span style="color: #800000;">

.site-topbar .user-menu a </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 3px 30px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 2
</span>}<span style="color: #800000;">

.site-topbar .user-active a </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242
</span>}<span style="color: #800000;">

.site-topbar .user-active a:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-topbar .user-active .user-name </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.site-topbar .user-active .user-menu a </span>{<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> all .2s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> all .2s
</span>}<span style="color: #800000;">

.site-topbar .user-active .user-menu a:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f5f5f5
</span>}<span style="color: #800000;">

.site-topbar .message </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 10px
</span>}<span style="color: #800000;">

.site-topbar .message i </span>{<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> normal
</span>}<span style="color: #800000;">

.site-header </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 20</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px
</span>}<span style="color: #800000;">

.site-header .container </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative
</span>}<span style="color: #800000;">

.site-header .header-logo </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 62px</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 22px
</span>}<span style="color: #800000;">

.site-header .header-nav </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 850px
</span>}<span style="color: #800000;">

.site-header .header-search </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 296px</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 25px
</span>}<span style="color: #800000;">

.site-header .logo </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 55px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 55px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #ff6700</span>;<span style="color: #ff0000;">
    *background</span>:<span style="color: #0000ff;"> url(/i/logo.png) no-repeat 50% 50%
</span>}<span style="color: #800000;">

.site-header .logo:before,
.site-header .logo:after </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 55px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 55px</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;">
    -webkit-transform-origin</span>:<span style="color: #0000ff;"> 50% 50%</span>;<span style="color: #ff0000;">
    -ms-transform-origin</span>:<span style="color: #0000ff;"> 50% 50%</span>;<span style="color: #ff0000;">
    transform-origin</span>:<span style="color: #0000ff;"> 50% 50%</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> all .2s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> all .2s
</span>}<span style="color: #800000;">

.site-header .logo:before </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url(../i/mi-logo.png) no-repeat 50% 50%</span>;<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=100)\9</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)
</span>}<span style="color: #800000;">

.site-header .logo:after </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url(../i/mi-home.png) no-repeat 50% 50%</span>;<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=0)\9</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -55px</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)
</span>}<span style="color: #800000;">

.site-header .logo:focus </span>{<span style="color: #ff0000;">
    outline</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.site-header .logo:hover:before </span>{<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=0)\9</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(55px, 0, 0)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate3d(55px, 0, 0)
</span>}<span style="color: #800000;">

.site-header .logo:hover:after </span>{<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=100)\9</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(55px, 0, 0)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate3d(55px, 0, 0)
</span>}<span style="color: #800000;">

.site-header .logo:active:after </span>{<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(55px, 0, 0) scale(0.9)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate3d(55px, 0, 0) scale(0.9)
</span>}<span style="color: #800000;">

.site-header .nav-list </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 10</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 820px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 88px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 12px 0 0 30px</span>;<span style="color: #ff0000;">
    list-style-type</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 16px
</span>}<span style="color: #800000;">

.site-header .nav-item </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left
</span>}<span style="color: #800000;">

.site-header .nav-item .link </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 26px 10px 38px</span>;<span style="color: #ff0000;">
    *padding</span>:<span style="color: #0000ff;"> 26px 10px 38px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #333
</span>}<span style="color: #800000;">

.site-header .nav-item .link:focus </span>{<span style="color: #ff0000;">
    outline</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.site-header .nav-item .item-children </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.site-header .nav-category </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 127px</span>;<span style="color: #ff0000;">
    padding-right</span>:<span style="color: #0000ff;"> 15px
</span>}<span style="color: #800000;">

.site-header .nav-category .link-category </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 26px 0 38px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #333
</span>}<span style="color: #800000;">

.site-header .nav-item-active </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative
</span>}<span style="color: #800000;">

.site-header .nav-item-active .link </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-header .nav-item-active:after </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -300px</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> transparent
</span>}<span style="color: #800000;">

.site-header .header-nav-menu </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 24</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 229px</span>;<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.site-header .header-nav-menu .children-list </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    list-style-type</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px
</span>}<span style="color: #800000;">

.site-header .header-nav-menu .children-list li </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 180px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 35px 12px 0</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.site-header .header-nav-menu .children-list li:before </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 35px</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 1px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ""</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #e0e0e0
</span>}<span style="color: #800000;">

.site-header .header-nav-menu .children-list .first:before </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.site-header .header-nav-menu .figure-thumb </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 160px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 110px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 auto 16px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.site-header .header-nav-menu .figure-thumb img </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 160px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 110px
</span>}<span style="color: #800000;">

.site-header .header-nav-menu .figure-thumb a </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block
</span>}<span style="color: #800000;">

.site-header .header-nav-menu .title </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #333
</span>}<span style="color: #800000;">

.site-header .header-nav-menu .title,
.site-header .header-nav-menu .title a </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #333
</span>}<span style="color: #800000;">

.site-header .header-nav-menu .price </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-header .header-nav-menu .flags </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.site-header .header-nav-menu .flag </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    *display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 18px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 1px 20px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #e53935</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.site-header .header-nav-menu-active </span>{<span style="color: #ff0000;">
    border-bottom</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0 \9</span>;<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> 0 3px 4px rgba(0, 0, 0, 0.18)</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> 0 3px 4px rgba(0, 0, 0, 0.18)</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> -webkit-box-shadow .2s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> box-shadow .2s
</span>}<span style="color: #800000;">

.site-header .search-form </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 296px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 50px
</span>}<span style="color: #800000;">

.site-header .search-form .keyword-list </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;">
    _top</span>:<span style="color: #0000ff;"> 51px</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 20</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 243px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #ff6700</span>;<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.site-header .search-form .keyword-list ul </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    list-style-type</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.site-header .search-form .keyword-list li.active,
.site-header .search-form .keyword-list li:hover </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fafafa
</span>}<span style="color: #800000;">

.site-header .search-form .keyword-list li a </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 6px 15px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242
</span>}<span style="color: #800000;">

.site-header .search-form .keyword-list li .keyword </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-header .search-form .keyword-list li .result </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 15px</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 6px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0
</span>}<span style="color: #800000;">

.site-header .search-form:hover .search-text </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #b0b0b0
</span>}<span style="color: #800000;">

.site-header .search-form:hover .search-btn </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #b0b0b0
</span>}<span style="color: #800000;">

.site-header .search-form:hover .search-btn:hover </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-header .search-form-focus:hover .search-text </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-header .search-form-focus:hover .search-btn </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-header .search-form-focus .search-text </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-header .search-form-focus .search-btn </span>{<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-header .search-form-focus .search-btn:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #ff6700</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.site-header .search-text </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 51px</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 223px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 48px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 10px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 48px</span>;<span style="color: #ff0000;">
    outline</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> all .2s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> all .2s
</span>}<span style="color: #800000;">

.site-header .search-btn </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 52px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #616161</span>;<span style="color: #ff0000;">
    outline</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> all .2s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> all .2s
</span>}<span style="color: #800000;">

.site-header .search-btn:hover </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #ff6700</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.site-header .search-hot-words </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 62px</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> right
</span>}<span style="color: #800000;">

.site-header .search-hot-words a </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    *display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 5px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #eee</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> all .2s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> all .2s
</span>}<span style="color: #800000;">

.site-header .search-hot-words a:hover </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #ff6700</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.site-category </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 88px</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> -92px</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 21</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 234px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 460px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 14px
</span>}<span style="color: #800000;">

.site-category-list </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 418px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 20px 0</span>;<span style="color: #ff0000;">
    list-style-type</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #ff6700</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.site-category-list .category-item-active .title </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #ff6700</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.site-category-list .category-item-active .title i </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> rgba(255, 255, 255, 0.5)
</span>}<span style="color: #800000;">

.site-category-list .category-item-active .children </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block
</span>}<span style="color: #800000;">

.site-category-list .title </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    padding-left</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 42px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 42px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242
</span>}<span style="color: #800000;">

.site-category-list .title i </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #e0e0e0
</span>}<span style="color: #800000;">

.site-category-list .children-list </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 458px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 2px 0</span>;<span style="color: #ff0000;">
    list-style-type</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.site-category-list .children-list li </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 265px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 76px
</span>}<span style="color: #800000;">

.site-category-list .children-list li.star-goods .link </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 170px</span>;<span style="color: #ff0000;">
    padding-right</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.site-category-list .children-list .link </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 18px 20px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #333</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> color .2s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> color .2s
</span>}<span style="color: #800000;">

.site-category-list .children-list .link:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-category-list .children-list .thumb </span>{<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> middle
</span>}<span style="color: #800000;">

.site-category-list .children-list .text </span>{<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px
</span>}<span style="color: #800000;">

.site-category-list .children-list .btn-buy </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 26px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 58px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 22px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 22px
</span>}<span style="color: #800000;">

.site-category-list .children-list-col </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 265px
</span>}<span style="color: #800000;">

.site-category-list .children </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 234px</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 24</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 458px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0</span>;<span style="color: #ff0000;">
    border-left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> 0 8px 16px rgba(0, 0, 0, 0.18)</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> 0 8px 16px rgba(0, 0, 0, 0.18)
</span>}<span style="color: #800000;">

.site-category-list .children-col-1 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 265px
</span>}<span style="color: #800000;">

.site-category-list .children-col-2 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 530px
</span>}<span style="color: #800000;">

.site-category-list .children-col-3 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 795px
</span>}<span style="color: #800000;">

.site-category-list .children-col-4 </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 992px
</span>}<span style="color: #800000;">

.site-category-list .children-col-4 .children-list-col </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 248px
</span>}<span style="color: #800000;">

.site-footer .footer-service </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 27px 0</span>;<span style="color: #ff0000;">
    border-bottom</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0
</span>}<span style="color: #800000;">

.site-footer .list-service </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    list-style-type</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.site-footer .list-service li </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 19.8%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 25px</span>;<span style="color: #ff0000;">
    border-left</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 25px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.site-footer .list-service li:first-child </span>{<span style="color: #ff0000;">
    border-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.site-footer .list-service .iconfont </span>{<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> 6px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> -4px
</span>}<span style="color: #800000;">

.site-footer .list-service a </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #616161</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> color .2s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> color .2s
</span>}<span style="color: #800000;">

.site-footer .list-service a:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-footer .footer-links </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 40px 0
</span>}<span style="color: #800000;">

.site-footer .footer-links .col-links </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 160px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 112px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.site-footer .footer-links .col-links dt </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> -1px 0 26px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1.25</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242
</span>}<span style="color: #800000;">

.site-footer .footer-links .col-links dd </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 10px 0 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px
</span>}<span style="color: #800000;">

.site-footer .footer-links .col-links a </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575
</span>}<span style="color: #800000;">

.site-footer .footer-links .col-links a:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-footer .footer-links .col-contact </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 251px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 112px</span>;<span style="color: #ff0000;">
    border-left</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #616161
</span>}<span style="color: #800000;">

.site-footer .footer-links .col-contact p </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 0 16px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px
</span>}<span style="color: #800000;">

.site-footer .footer-links .col-contact .phone </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 0 5px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 22px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-info </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 30px 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fafafa
</span>}<span style="color: #800000;">

.site-info .logo </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 57px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 57px</span>;<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url(../i/logo-footer.png?v2) no-repeat 50% 50%
</span>}<span style="color: #800000;">

.site-info .info-text </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0
</span>}<span style="color: #800000;">

.site-info .info-text p </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 18px
</span>}<span style="color: #800000;">

.site-info .info-text a </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0
</span>}<span style="color: #800000;">

.site-info .info-text a:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-info .info-text .sites a </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575
</span>}<span style="color: #800000;">

.site-info .info-text .sites a:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-info .info-links </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
    _display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 28px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 4px 0 0
</span>}<span style="color: #800000;">

.site-info .info-links img </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 28px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 7px
</span>}<span style="color: #800000;">

.site-info .slogan </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 30px auto 0</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 267px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 19px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url(../i/slogan2016.png) no-repeat center 0
</span>}<span style="color: #800000;">

.site-mini-header </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    border-bottom</span>:<span style="color: #0000ff;"> 2px solid #ff6700</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0
</span>}<span style="color: #800000;">

.site-mini-header .header-logo </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 93px</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 26px
</span>}<span style="color: #800000;">

.site-mini-header .logo </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 48px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 48px
</span>}<span style="color: #800000;">

.site-mini-header .logo:before,
.site-mini-header .logo:after </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 48px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 48px
</span>}<span style="color: #800000;">

.site-mini-header .header-title </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 26px
</span>}<span style="color: #800000;">

.site-mini-header .header-title h2,
.site-mini-header .header-title p </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.site-mini-header .header-title h2 </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 28px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 48px</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242
</span>}<span style="color: #800000;">

.site-mini-header .header-title h2 span </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-mini-header .has-more h2 </span>{<span style="color: #ff0000;">
    margin-bottom</span>:<span style="color: #0000ff;"> 6px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.site-mini-header .has-more p </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.site-mini-header .topbar-nav </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.site-mini-header .topbar-cart,
.site-mini-header .topbar-info </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
    _display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px
</span>}<span style="color: #800000;">

.site-mini-header .topbar-cart </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 115px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 15px
</span>}<span style="color: #800000;">

.site-mini-header .topbar-cart-filled .cart-mini </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-mini-header .topbar-cart-active .cart-mini </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.site-mini-header .topbar-info </span>{<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px
</span>}<span style="color: #800000;">

.site-mini-header .topbar-info .link,
.site-mini-header .topbar-info .user,
.site-mini-header .topbar-info .message,
.site-mini-header .topbar-info .sep </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left
</span>}<span style="color: #800000;">

.site-mini-header .topbar-info .link </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 5px
</span>}<span style="color: #800000;">

.site-mini-header .topbar-info .sep </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.site-mini-header .user </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 110px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;"> nowrap
</span>}<span style="color: #800000;">

.site-mini-header .user-name </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 5</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.site-mini-header .user-name .name </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    *display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    _width</span>:<span style="color: #0000ff;"> 75px</span>;<span style="color: #ff0000;">
    max-width</span>:<span style="color: #0000ff;"> 75px</span>;<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;"> nowrap</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> text-bottom
</span>}<span style="color: #800000;">

.site-mini-header .user-name i </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> 9px
</span>}<span style="color: #800000;">

.site-mini-header .user-menu </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> -1px \9</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 7px 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0 \9</span>;<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 0 \9</span>;<span style="color: #ff0000;">
    list-style-type</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> 0 2px 10px rgba(0, 0, 0, 0.15)</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> 0 2px 10px rgba(0, 0, 0, 0.15)
</span>}<span style="color: #800000;">

.site-mini-header .user-menu a </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 3px 30px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 2
</span>}<span style="color: #800000;">

.site-mini-header .user-active a </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242
</span>}<span style="color: #800000;">

.site-mini-header .user-active a:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.site-mini-header .user-active .user-name </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.site-mini-header .user-active .user-menu a </span>{<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> all .2s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> all .2s
</span>}<span style="color: #800000;">

.site-mini-header .user-active .user-menu a:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f5f5f5
</span>}<span style="color: #800000;">

.site-mini-header .message </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 10px
</span>}<span style="color: #800000;">

.site-mini-header .message i </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #e53935
</span>}<span style="color: #800000;">

.site-mini-header .topbar-info </span>{<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 30px
</span>}<span style="color: #800000;">

.site-mini-header .topbar-info .sep </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #e0e0e0
</span>}<span style="color: #800000;">

.site-mini-header a </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575
</span>}<span style="color: #800000;">

.modal-weixin .modal-bd </span>{<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.modal-globalSites .modal-bd </span>{<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.modal-globalSites .modal-bd h3 </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 32px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.modal-globalSites .modal-bd .modal-globalSites-tips </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 18px
</span>}<span style="color: #800000;">

.modal-globalSites .modal-bd .modal-globalSites-links </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 480px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 30px auto 0
</span>}<span style="color: #800000;">

.modal-globalSites .modal-bd .modal-globalSites-links a </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    _display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 20px 20px 0</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 140px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #eee
</span>}<span style="color: #800000;">

.modal-globalSites .modal-bd .modal-globalSites-links a:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #ff6700</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.xm-recommend ul,
.xm-recommend li,
.xm-recommend dl,
.xm-recommend dt,
.xm-recommend dd </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    list-style</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.xm-recommend ul li </span>{<span style="color: #ff0000;">
    margin-bottom</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 300px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative
</span>}<span style="color: #800000;">

.xm-recommend ul li:hover </span>{<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2
</span>}<span style="color: #800000;">

.xm-recommend ul li:hover .dot </span>{<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> 0 15px 30px rgba(0, 0, 0, 0.1)</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> 0 15px 30px rgba(0, 0, 0, 0.1)
</span>}<span style="color: #800000;">

.xm-recommend ul li .dot </span>{<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> -webkit-box-shadow .2s linear</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> box-shadow .2s linear
</span>}<span style="color: #800000;">

.xm-recommend ul li.pager </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> transparent
</span>}<span style="color: #800000;">

.xm-recommend ul.xm-carousel-list li </span>{<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> 14px
</span>}<span style="color: #800000;">

.xm-recommend dl </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 20px</span>;<span style="color: #ff0000;">
    margin-bottom</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.xm-recommend dl dt </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 40px 0 15px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 145px
</span>}<span style="color: #800000;">

.xm-recommend dl dd </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.xm-recommend .xm-recommend-name </span>{<span style="color: #ff0000;">
    margin-bottom</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 18px</span>;<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;"> nowrap</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.xm-recommend .xm-recommend-name a </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #333
</span>}<span style="color: #800000;">

.xm-recommend .xm-recommend-price </span>{<span style="color: #ff0000;">
    margin-bottom</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.xm-recommend .xm-recommend-tips </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575
</span>}<span style="color: #800000;">

.xm-recommend .xm-recommend-tips .btn </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 37px</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.xm-recommend .xm-recommend-notice </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 5</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=0)\9</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(0, -10px, 0)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate3d(0, -10px, 0)</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> all .2s linear</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> all .2s linear
</span>}<span style="color: #800000;">

.xm-recommend .xm-recommend-notice .btn </span>{<span style="color: #ff0000;">
    border-width</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.xm-recommend .xm-recommend-notice-active </span>{<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=100)\9</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)
</span>}<span style="color: #800000;">

.xm-recommend-title </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> 400</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575</span>;<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0</span>;<span style="color: #ff0000;">
    -webkit-font-smoothing</span>:<span style="color: #0000ff;"> antialiased
</span>}<span style="color: #800000;">

.xm-recommend-title span </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> -20px</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 372px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 482px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f5f5f5
</span>}<span style="color: #800000;">

.modal-bigtap-queue </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 800px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -400px</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> -300px
</span>}<span style="color: #800000;">

.modal-bigtap-queue .close </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 8px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px
</span>}<span style="color: #800000;">

.modal-bigtap-queue .modal-body </span>{<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.modal-bigtap-queue .con </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 141px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.modal-bigtap-queue .title </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 30px 0 0</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 38px</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal
</span>}<span style="color: #800000;">

.modal-bigtap-queue .queue-tip-box </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 0 55px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.modal-bigtap-queue .queue-tip </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #666</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 16px
</span>}<span style="color: #800000;">

.modal-bigtap-queue .queue-posters </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 459px</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.modal-bigtap-queue .queue-posters .poster </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    background-repeat</span>:<span style="color: #0000ff;"> no-repeat</span>;<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=0)\9</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> opacity 1s ease, -webkit-transform 20s linear</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> opacity 1s ease, transform 20s linear
</span>}<span style="color: #800000;">

.modal-bigtap-queue .queue-posters .poster-1 </span>{<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> url("//c1.mifile.cn/f/i/16/base/bigtap-poster-1.jpg")
</span>}<span style="color: #800000;">

.modal-bigtap-queue .queue-posters .poster-2 </span>{<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> url("//c1.mifile.cn/f/i/16/base/bigtap-poster-2.jpg")
</span>}<span style="color: #800000;">

.modal-bigtap-queue .queue-posters .poster-3 </span>{<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> url("//c1.mifile.cn/f/i/16/base/bigtap-poster-3.jpg")
</span>}<span style="color: #800000;">

.modal-bigtap-queue .queue-posters .poster-4 </span>{<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> url("//c1.mifile.cn/f/i/16/base/bigtap-poster-4.jpg")
</span>}<span style="color: #800000;">

.modal-bigtap-queue .queue-posters .poster-5 </span>{<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> url("//c1.mifile.cn/f/i/16/base/bigtap-poster-5.jpg")
</span>}<span style="color: #800000;">

.modal-bigtap-queue .queue-posters .active </span>{<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=100)\9</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> scale(1.2)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> scale(1.2)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> scale(1.2)
</span>}<span style="color: #800000;">

.modal-bigtap-queue .queue-animate </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative
</span>}<span style="color: #800000;">

.modal-bigtap-queue .animate-mask </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.modal-bigtap-queue .animate-mask-left </span>{<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> -webkit-linear-gradient(left, #fff 20%, rgba(255, 255, 255, 0))</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> -webkit-gradient(linear, left top, right top, color-stop(20%, #fff), to(rgba(255, 255, 255, 0)))</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> linear-gradient(to right, #fff 20%, rgba(255, 255, 255, 0))
</span>}<span style="color: #800000;">

.modal-bigtap-queue .animate-mask-right </span>{<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> -webkit-linear-gradient(right, #fff 20%, rgba(255, 255, 255, 0))</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> -webkit-gradient(linear, right top, left top, color-stop(20%, #fff), to(rgba(255, 255, 255, 0)))</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> linear-gradient(to left, #fff 20%, rgba(255, 255, 255, 0))
</span>}<span style="color: #800000;">

.modal-bigtap-queue .mitu-walk </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 594px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 270px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url("//c1.mifile.cn/f/i/16/base/bigtap-mitu-queue-big.png") repeat-x 0
</span>}<span style="color: #800000;">

.modal-bigtap-error </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 900px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 500px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -450px</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> -250px
</span>}<span style="color: #800000;">

.modal-bigtap-error .modal-body </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 360px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 140px 50px 0 385px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url("//s1.mi.com/open/131101/images/mitu-2.png") no-repeat 5px 0
</span>}<span style="color: #800000;">

.modal-bigtap-error h3 </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #333</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 32px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 0 20px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.modal-bigtap-error .error-tip </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding-bottom</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 28px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #666
</span>}<span style="color: #800000;">

.modal-bigtap-mode </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 700px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 460px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -350px</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> -230px
</span>}<span style="color: #800000;">

.modal-bigtap-mode .close </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.modal-bigtap-mode .modal-body </span>{<span style="color: #ff0000;">
    padding-bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.modal-bigtap-mode .modal-body .title </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 0 20px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #333</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 32px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.modal-bigtap-mode .modal-body .desc </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #666
</span>}<span style="color: #800000;">

.modal-bigtap-mode .modal-body .reload </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #C70F0F</span>;<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> underline
</span>}<span style="color: #800000;">

.modal-bigtap-mode .modal-body .mode-loading </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 20px 0
</span>}<span style="color: #800000;">

.modal-bigtap-mode .modal-body .input-text </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 auto 20px
</span>}<span style="color: #800000;">

.modal-bigtap-mode .modal-body .mode-action </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 20px 0 20px
</span>}<span style="color: #800000;">

.modal-bigtap-mode .modal-body .mode-con </span>{<span style="color: #ff0000;">
    margin-bottom</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 16px
</span>}<span style="color: #800000;">

.modal-bigtap-mode .modal-body .mode-con .q </span>{<span style="color: #ff0000;">
    margin-bottom</span>:<span style="color: #0000ff;"> 10px
</span>}<span style="color: #800000;">

.modal-bigtap-mode .modal-body .mode-con .d </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px
</span>}<span style="color: #800000;">

.modal-bigtap-mode .modal-body .mode-con .refresh </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px
</span>}<span style="color: #800000;">

.modal-bigtap-mode .modal-body .mode-con .img-q span </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    *display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 5px</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> middle
</span>}<span style="color: #800000;">

.modal-bigtap-mode .modal-body .mode-con .img-d </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 10px auto
</span>}<span style="color: #800000;">

.modal-bigtap-mode .modal-body .tip </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #C70F0F
</span>}<span style="color: #800000;">

.modal-bigtap-soldout </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 800px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -400px</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> -300px
</span>}<span style="color: #800000;">

.modal-bigtap-soldout .modal-body </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0
</span>}<span style="color: #800000;">

.modal-bigtap-soldout .modal-body .content </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 60px 0
</span>}<span style="color: #800000;">

.modal-bigtap-soldout .modal-body .content .mitu </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 240px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 240px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url("http://c1.mifile.cn/f/i/16/base/bigtap-mitu-faild.png") no-repeat
</span>}<span style="color: #800000;">

.modal-bigtap-soldout .modal-body .content .title </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    _display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 500px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 45px 0 5px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 36px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 48px
</span>}<span style="color: #800000;">

.modal-bigtap-soldout .modal-body .content .desc </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 500px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575
</span>}<span style="color: #800000;">

.modal-bigtap-soldout .bigtap-recomment-goods .hd </span>{<span style="color: #ff0000;">
    margin-bottom</span>:<span style="color: #0000ff;"> 34px</span>;<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 1px solid #e0e0e0</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.modal-bigtap-soldout .bigtap-recomment-goods .hd span </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
    *display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 24px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 18px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> -12px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fff
</span>}<span style="color: #800000;">

.modal-bigtap-soldout .bigtap-recomment-goods ul </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    list-style</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.modal-bigtap-soldout .bigtap-recomment-goods li </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 50%
</span>}<span style="color: #800000;">

.modal-bigtap-soldout .bigtap-recomment-goods li .pic </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 130px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 130px</span>;<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 44px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #eee
</span>}<span style="color: #800000;">

.modal-bigtap-soldout .bigtap-recomment-goods li .pic img </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 130px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 130px
</span>}<span style="color: #800000;">

.modal-bigtap-soldout .bigtap-recomment-goods li .info </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #333
</span>}<span style="color: #800000;">

.modal-bigtap-soldout .bigtap-recomment-goods li .info .title </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 5px 0 8px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 18px</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal
</span>}<span style="color: #800000;">

.modal-bigtap-soldout .bigtap-recomment-goods li .info .desc </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 170px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 0 15px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.modal-bigtap-soldout .bigtap-recomment-goods li .info .link </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.modal-bigtap-soldout-norec </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 480px</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> -240px
</span>}<span style="color: #800000;">

.modal-bigtap-soldout-norec .modal-body .bigtap-recomment-goods </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.modal-bigtap-soldout-norec .modal-body .content </span>{<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 60px
</span>}<span style="color: #800000;">

.modal-user-risk .modal-bd </span>{<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.modal-user-risk .modal-bd .title </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 0 5px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal
</span>}<span style="color: #800000;">

.modal-user-risk .modal-bd .desc </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 0 8px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #757575
</span>}<span style="color: #800000;">

.modal-user-risk .modal-bd .link </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.modal-user-risk .modal-bd .form-section </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 310px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 20px auto
</span>}<span style="color: #800000;">

.modal-user-risk .modal-bd .form-section .input-text </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 276px
</span>}<span style="color: #800000;">

.modal-user-risk .modal-bd .form-section .btn </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 8px</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.modal-user-risk .modal-bd .form-section .btn-get </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #ff6700
</span>}<span style="color: #800000;">

.modal-user-risk .modal-bd .form-section .btn-coutdown </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #b0b0b0
</span>}<span style="color: #800000;">

.modal-user-risk .modal-bd .tip-msg </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #e53935
</span>}<span style="color: #800000;">

.drag-captcha-box </span>{<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    _zoom</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.drag-captcha-piece </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    background-repeat</span>:<span style="color: #0000ff;"> no-repeat
</span>}<span style="color: #800000;">

.drag-captcha-bg-box </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 1
</span>}<span style="color: #800000;">

.drag-captcha-refresh </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 16px
</span>}<span style="color: #800000;">

.drag-captcha-control </span>{<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    margin-bottom</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 15px</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> -webkit-gradient(linear, left top, right top, from(#bababa), to(#959595))</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> -webkit-linear-gradient(left, #bababa, #959595)</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> linear-gradient(to right, #bababa, #959595)
</span>}<span style="color: #800000;">

.drag-captcha-control .handle </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> -5px</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #eee url(http://c1.mifile.cn/f/i/16/base/drag-captcha-handle.png) no-repeat</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> 0 20px 20px rgba(0, 0, 0, 0.19)</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> 0 20px 20px rgba(0, 0, 0, 0.19)
</span>}<span style="color: #800000;">

.drag-captcha-control .handle-active </span>{<span style="color: #ff0000;">
    background-position</span>:<span style="color: #0000ff;"> 0 -40px
</span>}<span style="color: #800000;">

.drag-captcha-msg </span>{<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> .63</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=63)\9
</span>}<span style="color: #800000;">

.drag-captcha-loading </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 25px</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 4</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 80px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 80px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -40px</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> rgba(255, 255, 255, 0.8)</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> progid: DXImageTransform.Microsoft.gradient(startColorstr="#ccffffff", endColorstr="#ccffffff")\9</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.drag-captcha-loading .iconfont </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 15px auto 5px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #424242
</span>}<span style="color: #800000;">

.drag-captcha-loading-backdrop </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 130px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0.4)</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> progid: DXImageTransform.Microsoft.gradient(startColorstr="#66000000", endColorstr="#66000000")\9
</span>}<span style="color: #800000;">

.modal-addcart-captcha-drag </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 280px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 264px</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> -132px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -140px</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 5px
</span>}<span style="color: #800000;">

.modal-addcart-captcha-drag .modal-header </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 8px 15px
</span>}<span style="color: #800000;">

.modal-addcart-captcha-drag .close </span>{<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 8px
</span>}<span style="color: #800000;">

.modal-addcart-captcha-drag .modal-body </span>{<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 15px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center
</span>}<span style="color: #800000;">

.modal-addcart-captcha-drag .drag-captcha-wrapper </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 auto
</span>}<span style="color: #800000;">

.modal-message-pop </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 930px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 530px</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> -265px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -465px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> none
</span>}<span style="color: #800000;">

.modal-message-pop .close </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #e53935
</span>}<span style="color: #800000;">

.modal-message-pop .message-countdown </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> .5</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> alpha(opacity=50)\9</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 10
</span>}<span style="color: #800000;">

.modal-message-pop .message-countdown em </span>{<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> normal
</span>}<span style="color: #800000;">

.modal-message-pop .message-link </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 530px</span>;<span style="color: #ff0000;">
    background-repeat</span>:<span style="color: #0000ff;"> no-repeat</span>;<span style="color: #ff0000;">
    background-position</span>:<span style="color: #0000ff;"> center bottom
</span>}

View Code

五、示例下载

 github：https://github.com/zhangguo5/CSS3_2

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Full support for Angular2's web backend Bootstrap template Sing AppNext article：Full support for Angular2's web backend Bootstrap template Sing App

Related articles

See more

• Summary of Html knowledge
• How to learn HTML quickly
• The difference between html xhtml xml
• The difference between src and href attributes
• About HTML5 and CSS replacement use

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved

（CSS2）
table-row： 指定对象作为表格行。类同于html标签