step by step css样式,DIV+CSS的StepByStep步骤导航栏.

第一个

代码如下,具体设置也很简单不多说.

Step by step menu

/* = STEPS CONTAINER

----------------------------*/

.wizard-steps {

margin:20px 10px 0px 10px;

padding:0px;

position: relative;

clear:both;

font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;

font-weight: bold;

}

.wizard-steps div {

position:relative;

}

/* = STEP NUMBERS

----------------------------*/

.wizard-steps span {

display: block;

float: left;

font-size: 10px;

text-align:center;

width:15px;

margin: 2px 5px 0px 0px;

line-height:15px;

color: #ccc;

background: #FFF;

border: 2px solid #CCC;

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

}

/* = DEFAULT STEPS

----------------------------*/

.wizard-steps a {

position:relative;

display:block;

width:auto;

height:24px;

margin-right: 18px;

padding:0px 10px 0px 3px;

float: left;

font-size:11px;

line-height:24px;

color:#666;

background: #F0EEE3;

text-decoration:none;

text-shadow:1px 1px 1px rgba(255,255,255, 0.8);

}

.wizard-steps a:before {

width:0px;

height:0px;

border-top: 12px solid #F0EEE3;

border-bottom: 12px solid #F0EEE3;

border-left:12px solid transparent;

position: absolute;

content: "";

top: 0px;

left: -12px;

}

.wizard-steps a:after {

width: 0;

height: 0;

border-top: 12px solid transparent;

border-bottom: 12px solid transparent;

border-left:12px solid #F0EEE3;

position: absolute;

content: "";

top: 0px;

right: -12px;

}

/* = COMPLETED STEPS

----------------------------*/

.wizard-steps .completed-step a {

color:#163038;

background: #A3C1C9;

}

.wizard-steps .completed-step a:before {

border-top: 12px solid #A3C1C9;

border-bottom: 12px solid #A3C1C9;

}

.wizard-steps .completed-step a:after {

border-left: 12px solid #A3C1C9;

}

.wizard-steps .completed-step span {

border: 2px solid #163038;

color: #163038;

text-shadow:none;

}

/* = ACTIVE STEPS

----------------------------*/

.wizard-steps .active-step a {

color:#A3C1C9;

background: #163038;

text-shadow:1px 1px 1px rgba(0,0,0, 0.8);

}

.wizard-steps .active-step a:before {

border-top: 12px solid #163038;

border-bottom: 12px solid #163038;

}

.wizard-steps .active-step a:after {

border-left: 12px solid #163038;

}

.wizard-steps .active-step span {

color: #163038;

-webkit-box-shadow:0px 0px 2px rgba(0,0,0, 0.8);

-moz-box-shadow:0px 0px 2px rgba(0,0,0, 0.8);

box-shadow:0px 0px 2px rgba(0,0,0, 0.8);

text-shadow:none;

border: 2px solid #A3C1C9;

}

/* = HOVER STATES

----------------------------*/

.wizard-steps .completed-step:hover a, .wizard-steps .active-step:hover a {

color:#fff;

background: #8F061E;

text-shadow:1px 1px 1px rgba(0,0,0, 0.8);

}

.wizard-steps .completed-step:hover span, .wizard-steps .active-step:hover span {

color:#8F061E;

}

.wizard-steps .completed-step:hover a:before, .wizard-steps .active-step:hover a:before {

border-top: 12px solid #8F061E;

border-bottom: 12px solid #8F061E;

}

.wizard-steps .completed-step:hover a:after, .wizard-steps .active-step:hover a:after {

border-left: 12px solid #8F061E;

}

1Reservation List

2Choose Template

3 Confirm SendInfo

4 Send Result

第二个

相对不是很好,但也可以吧,在这里备份下.

div+css step by step

ol.progtrckr {

margin: 0;

padding: 0;

list-style-type none;

}

ol.progtrckr li {

display: inline-block;

text-align: center;

line-height: 3em;

}

ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }

ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }

ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }

ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }

ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }

ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }

ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }

ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }

ol.progtrckr li.progtrckr-done {

color: black;

border-bottom: 4px solid yellowgreen;

}

ol.progtrckr li.progtrckr-todo {

color: silver;

border-bottom: 4px solid silver;

}

ol.progtrckr li:after {

content: "\00a0\00a0";

}

ol.progtrckr li:before {

position: relative;

bottom: -2.5em;

float: left;

left: 50%;

line-height: 1em;

}

ol.progtrckr li.progtrckr-done:before {

content: "\2713";

color: white;

background-color: yellowgreen;

height: 1.2em;

width: 1.2em;

line-height: 1.2em;

border: none;

border-radius: 1.2em;

}

ol.progtrckr li.progtrckr-todo:before {

content: "\039F";

color: silver;

background-color: white;

font-size: 1.5em;

bottom: -1.6em;

}

1. Order Processing
2. Pre-Production
3. In Production
4. Shipped
5. Delivered