CSS3 및 페이지 레이아웃 학습 요약(2) Box Model, 여백 접기, 인라인 및 블록 태그, CSSReset

1. 박스 모델

상자 모델은 상자 모델이라고도 합니다. HTML의 대부분 요소는 브라우저에서 직사각형 영역을 생성합니다. 각 영역은 외부에서 내부까지 여백(Margin), 테두리(Border), 패딩(Padding)의 네 가지 구성 요소를 포함합니다. ) 및 콘텐츠(Content) 실제로 ie 상자 모델과 표준 w3c 상자 모델이라는 두 가지 상자 모델이 있습니다. doctype 문을 추가하면 모든 브라우저가 표준 w3c 상자 모델을 사용하게 됩니다. 요소의 스타일을 다음과 같이 설정하는 경우:

<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>

실행 결과:

1.1 폭 테스트

최대 너비를 계산합니다. 예는 다음과 같습니다.

<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>

다음 효과를 얻으려면 요청 시 설정할 수 있는 최대 픽셀 수는 얼마입니까?

정답:

340px

코드 보기

1.2. 오버플로 테스트

코드는 다음과 같습니다.

<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>

innerBox가 실행될 때 상자를 얼마나 초과합니까?

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

코드 보기

innerBox를 초과하지 않으려면 너비 100% 설정을 삭제하고 width:100%를 제거해야 합니다. 일반적으로 설정할 필요는 없습니다.

1.3, 상자 크기 속성

객체의 상자 모델 구성 모드 설정 또는 검색

content-box: 정의된 너비와 높이에 패딩과 테두리가 포함되지 않습니다. 객체의 실제 너비는 설정된 너비 값, 테두리, 패딩의 합과 같습니다. 즉, (요소 너비 = 너비 + 테두리 + 패딩이지만 페이지 위치를 차지하려면 여백을 추가해야 함) 이 속성은 다음과 같이 동작합니다. 표준 모드의 박스 모델.

예:

<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>

실행 결과:

기본값은 content-box이므로 여기서 직접 설정은 없고 점유 너비는 160px입니다.

border-box: 패딩과 테두리가 정의된 너비와 높이 내에 포함됩니다. 객체의 실제 너비는 설정된 너비 값과 같습니다. 테두리 및 패딩이 정의되어도 객체의 실제 너비는 변경되지 않습니다. 즉, 이 속성은 의 상자 모델처럼 동작합니다. 이상한 모드.

샘플 코드:

<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>

실행 결과:

box-sizing: border-box의 경우 너비 설정에는 테두리와 패딩이 포함되지만 여백은 포함되지 않지만 여백도 위치를 차지합니다.

1.4 CSS를 사용하여 그림 그리기

샘플 코드:

<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>

실행 결과:

하트 모양:

<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

관련 라벨：

CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

원천：php.cn

이전 기사：Angular2의 웹 백엔드 Bootstrap 템플릿 Sing App에 대한 전체 지원 다음 기사：CSS3 선택기 속성 선택기

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• NullPointerException은 무엇이며 어떻게 해결합니까?
  2024-10-22 09:46:29
• 초보자에서 코더까지: C 기초로 시작되는 여정
  2024-10-13 13:53:41
• PHP로 웹 개발 잠금 해제: 초보자 가이드
  2024-10-12 12:15:51
• C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길
  2024-10-11 22:47:31
• 코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍
  2024-10-11 19:36:51
• 내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C
  2024-10-11 15:50:41
• C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구
  2024-10-11 15:07:41
• PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계
  2024-10-11 14:21:21
• Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드
  2024-10-11 12:59:11
• 코딩의 핵심: 초보자를 위한 Python의 힘 활용
  2024-10-11 12:17:31

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

에서 2024-04-29 11:01:01

0

3

2070

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

0

11

2235

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

0

1

1880

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

0

1

1763

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

0

0

1793

관련 주제

더>

• 리눅스 삭제 명령 소개
• 0xc000035를 해결하는 방법
• ubound 함수 사용법
• PHP에서 잘못된 문자를 해결하는 방법
• math.random 함수 사용법
• mysql은 데이터 테이블 이름을 수정합니다.
• 공식 디지털 통화 거래 플랫폼
• OGG 일반 명령

인기 추천

• url은 무슨 뜻인가요?
• DOM은 무엇을 의미하나요?
• 이미지 크기를 변경하는 방법
• HTML에서 글꼴을 굵게 만드는 방법
• HTML 이미지의 크기를 설정하는 방법

인기 튜토리얼

더>

관련 튜토리얼

인기 추천

최신 강좌

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1421724
• 
  PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기

  4266094
• 
  JAVA 초보자용 비디오 튜토리얼

  2519557
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  506569
• 
  PHP 제로 기반 입문 튜토리얼

  861637

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1421724 학습 시간
• 
  JAVA 초보자용 비디오 튜토리얼

  2519557 학습 시간
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  506569 학습 시간
• 
  웹 프론트 엔드 개발에 대한 빠른 소개

  215668 학습 시간
• 
  PS 비디오 튜토리얼을 처음부터 마스터하세요

  887055 학습 시간

• 
  [웹 프런트엔드] Node.js 빠른 시작

  7275 학습 시간
• 
  해외 웹 개발 풀스택 강좌 총집합

  5659 학습 시간
• 
  Go 언어 실습 GraphQL

  4769 학습 시간
• 
  550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다

  679 학습 시간
• 
  기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬

  24050 학습 시간

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿

• [양식 버튼] jQuery 기업 메시지 양식 연락처 코드
• [플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과
• [메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과
• [양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드
• [플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드
• [HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임
• [그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤
• [사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

• [PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)
• [PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)
• [배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)
• [PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)
• [PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)
• [PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)
• [배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)
• [PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개 부인 성명 Sitemap

© php.cn All rights reserved

（CSS2）
table-row： 指定对象作为表格行。类同于html标签