html中水平时间轴,CSS3 水平时间轴/步骤引导环节

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);

html {

box-sizing: border-box;

}

*,

*:before,

*:after {

box-sizing: inherit;

}

body {

font-family: lato;

}

@media screen and (min-width: 500px) {

.steps-section {

max-width: 700px;

margin: 50px 50px 100px;

border: 1px dashed;

}

}

@media screen and (max-width: 500px) {

.steps-section {

margin-bottom: 40px;

}

}

.section-header,

.steps-name {

color: #333;

font-weight: 600;

font-size: 14px;

}

@media screen and (max-width: 500px) {

.steps-timeline {

border-left: 4px solid #e74682;

margin-left: 25px;

}

}

@media screen and (min-width: 500px) {

.steps-timeline {

border-top: 4px solid #e74682;

padding-top: 20px;

margin-top: 40px;

margin-left: 20px;

margin-right: 20px;

}

}

.steps-timeline:after {

content: "";

display: table;

clear: both;

}

#retail .steps-timeline {

border-color: #ccc;

}

#justfab .steps-one,

#justfab .steps-two,

#justfab .steps-three {

outline: 1px dashed rgba(0, 128, 0, 0);

}

@media screen and (max-width: 500px) {

#justfab .steps-one,

#justfab .steps-two,

#justfab .steps-three {

margin-left: -25px;

}

}

@media screen and (min-width: 500px) {

#justfab .steps-one,

#justfab .steps-two,

#justfab .steps-three {

float: left;

width: 33%;

margin-top: -50px;

}

}

#retail .steps-one,

#retail .steps-two,

#retail .steps-two-one,

#retail .steps-two-two,

#retail .steps-three {

outline: 1px dashed rgba(0, 128, 0, 0);

}

@media screen and (max-width: 500px) {

#retail .steps-one,

#retail .steps-two,

#retail .steps-two-one,

#retail .steps-two-two,

#retail .steps-three {

margin-left: -25px;

}

}

@media screen and (min-width: 500px) {

#retail .steps-one,

#retail .steps-two,

#retail .steps-two-one,

#retail .steps-two-two,

#retail .steps-three {

float: left;

width: 20%;

margin-top: -50px;

}

}

@media screen and (max-width: 500px) {

#justfab .steps-one,

#justfab .steps-two {

padding-bottom: 40px;

}

}

@media screen and (min-width: 500px) {

#justfab .steps-one {

margin-left: -16.65%;

margin-right: 16.65%;

}

}

@media screen and (min-width: 500px) {

#justfab .steps-two {

margin-left: -24.45%;

margin-right: 24.45%;

}

}

@media screen and (max-width: 500px) {

#justfab .steps-three {

margin-bottom: -100%;

}

}

@media screen and (min-width: 500px) {

#justfab .steps-three {

margin-left: 16.65%;

margin-right: -16.65%;

}

}

@media screen and (max-width: 500px) {

#retail .steps-one,

#retail .steps-two,

#retail .steps-two-one,

#retail .steps-two-two {

padding-bottom: 50px;

}

}

@media screen and (min-width: 500px) {

#retail .steps-one {

margin-left: -9.65%;

}

}

@media screen and (min-width: 500px) {

#retail .steps-two {

margin-left: 4.65%;

margin-right: 4.65%;

}

}

@media screen and (min-width: 500px) {

#retail .steps-two-one {

margin-right: 4.65%;

}

}

@media screen and (max-width: 500px) {

#retail .steps-three {

margin-bottom: -100%;

}

}

@media screen and (min-width: 500px) {

#retail .steps-three {

margin-left: 4.65%;

margin-right: -18.65%;

}

}

.circle {

display: block;

margin: 15px auto 10px;

width: 25px;

height: 25px;

border: 4px solid #e74582;

border-radius: 50%;

background: #fff;

}

@media screen and (max-width: 500px) {

.circle {

float: left;

margin-right: 20px;

margin-left: 10px;

}

}

#retail .circle {

border-color: #ccc;

}

.steps-name,

.steps-description {

margin: 0;

}

@media screen and (min-width: 500px) {

.steps-name {

text-align: center;

}

}

.steps-description {

overflow: hidden;

color: #999;

font-size: 13px;

}

@media screen and (min-width: 500px) {

.steps-description {

text-align: center;

}

}