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

본 웹사이트의 성명

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

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. 최고의 그래픽 설정

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

2 몇 주 전 By DDD

R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법

4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7473

15

Cakephp 튜토리얼

1377

52

Steam의 계정 이름 형식은 무엇입니까?

77

11

Win11 활성화 키 영구

48

19

NYT 연결 힌트와 답변

19

30

더보기

Related knowledge

& lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

& lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

& lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? Mar 20, 2025 pm 05:56 PM

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

See all articles

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

회사 소개 부인 성명 Sitemap

© php.cn All rights reserved

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