/*** iForms v2.0 —— Step by WingMeng(.com) 2014-? UI menu: 1. The default style (默认风格) 2. Yellow (黄色风格) 3. Blue (蓝色风格) 4. Red (红色风格) ***/ .ui-step { color: #b7b7b7; padding: 0 60px; margin-bottom: 35px; position: relative; } .ui-step:after { display: block; content: ""; height: 0; font-size: 0; clear: both; overflow: hidden; visibility: hidden; } .ui-step li { float: left; position: relative; } .ui-step .step-end { width: 120px; position: absolute; top: 0; right: -60px; } .ui-step-line { height: 5px; background-color: #e0e0e0; box-shadow: inset 0 1px 1px rgba(0,0,0,.2); margin-top: 15px; } .step-end .ui-step-line { display: none; } .ui-step-cont { width: 120px; position: absolute; top: 0; left: -15px; text-align: center; } .ui-step-cont-number { display: inline-block; *zoom:1; position: absolute; left: 0; top: 0; width: 30px; height: 30px; line-height: 30px; color: #fff; background: url(../images/ui-step_cover_30x30.png) center no-repeat\9; border-radius: 50%; border-left: 2px solid #fff; border-right: 2px solid #fff; border: 2px solid rgba(224,224,224,1); font-family: tahoma; font-weight: bold; font-size: 16px; background-color: #b9b9b9; box-shadow: inset 1px 1px 2px rgba(0,0,0,.2); } .ui-step-cont-text { position: relative; top: 34px; left: -42px; font-size: 12px; } /** 步骤数定义 **/ .ui-step-3 li { width: 50%; } .ui-step-4 li { width: 33.3%; } .ui-step-5 li { width: 25%; } .ui-step-6 li { width: 20%; } /** The default style (默认风格) **/ /* Done */ .step-done .ui-step-cont-number { background-color: #85e085; } .step-done .ui-step-cont-text { color: #85e085; } .step-done .ui-step-line { background-color: #6c6; } /* Active */ .step-active .ui-step-cont-number { background-color: #3c3; } .step-active .ui-step-cont-text { color: #3c3; font-weight: bold; } .step-active .ui-step-line { background-color: #e0e0e0; } /** Yellow **/ /* Done */ .ui-step-yellow .step-done .ui-step-cont-number { background-color: #ffc966; } .ui-step-yellow .step-done .ui-step-cont-text { color: #ffc966; } .ui-step-yellow .step-done .ui-step-line { background-color: #ffcc33; } /* Active */ .ui-step-yellow .step-active .ui-step-cont-number { background-color: orange; } .ui-step-yellow .step-active .ui-step-cont-text { color: orange; } .ui-step-yellow .step-active .ui-step-line { background-color: #e0e0e0; } /** Blue **/ /* Done */ .ui-step-blue .step-done .ui-step-cont-number { background-color: #69f; } .ui-step-blue .step-done .ui-step-cont-text { color: #69f; } .ui-step-blue .step-done .ui-step-line { background-color: #4c99e6; } /* Active */ .ui-step-blue .step-active .ui-step-cont-number { background-color: #06c; } .ui-step-blue .step-active .ui-step-cont-text { color: #06c; } .ui-step-blue .step-active .ui-step-line { background-color: #e0e0e0; } /** Red **/ /* Done */ .ui-step-red .step-done .ui-step-cont-number { background-color: #f99; } .ui-step-red .step-done .ui-step-cont-text { color: #f99; } .ui-step-red .step-done .ui-step-line { background-color: #fc9c9c; } /* Active */ .ui-step-red .step-active .ui-step-cont-number { background-color: #f66; } .ui-step-red .step-active .ui-step-cont-text { color: #f66; } .ui-step-red .step-active .ui-step-line { background-color: #e0e0e0; }