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;
}
}
總結
以上是生活随笔為你收集整理的html中水平时间轴,CSS3 水平时间轴/步骤引导环节的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据来源渠道及采集工具_工业数据采集工具
- 下一篇： CSS 基本样式