|
|
/* 设置一个名为.lay-step 的类选择器 */
|
|
|
.lay-step {
|
|
|
/* 将字体大小设置为 0，去除元素内的默认字体大小影响 */
|
|
|
font-size: 0;
|
|
|
/* 设置宽度为 400px，或者在容器允许的情况下最大宽度为 100% */
|
|
|
width: 400px;
|
|
|
margin: 0 auto;
|
|
|
max-width: 100%;
|
|
|
/* 设置左内边距为 200px */
|
|
|
padding-left: 200px;
|
|
|
}
|
|
|
|
|
|
/* 设置一个名为.step-item 的类选择器 */
|
|
|
.step-item {
|
|
|
/* 将元素设置为内联块级元素，可在同一行显示并允许设置宽度、高度等属性 */
|
|
|
display: inline-block;
|
|
|
/* 设置行高为 26px */
|
|
|
line-height: 26px;
|
|
|
/* 设置元素为相对定位，为子元素的绝对定位提供参考 */
|
|
|
position: relative;
|
|
|
/* 设置字体大小为 14px */
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
/* 设置一个名为.step-item-tail 的类选择器 */
|
|
|
.step-item-tail {
|
|
|
/* 设置宽度为 100%，即占满父元素宽度 */
|
|
|
width: 100%;
|
|
|
/* 设置左右内边距为 10px */
|
|
|
padding: 0 10px;
|
|
|
/* 设置元素为绝对定位，相对于父元素定位 */
|
|
|
position: absolute;
|
|
|
/* 设置左偏移为 0，即与父元素左边对齐 */
|
|
|
left: 0;
|
|
|
/* 设置上偏移为 13px */
|
|
|
top: 13px;
|
|
|
}
|
|
|
|
|
|
/* 设置一个名为.step-item-tail i 的类选择器 */
|
|
|
.step-item-tail i {
|
|
|
/* 将元素设置为内联块级元素，可在同一行显示并允许设置宽度、高度等属性 */
|
|
|
display: inline-block;
|
|
|
/* 设置宽度为 100%，即占满父元素宽度 */
|
|
|
width: 100%;
|
|
|
/* 设置高度为 1px */
|
|
|
height: 1px;
|
|
|
/* 垂直对齐方式为顶部对齐 */
|
|
|
vertical-align: top;
|
|
|
/* 设置背景颜色为 #c2c2c2 */
|
|
|
background: #c2c2c2;
|
|
|
/* 设置元素为相对定位，为可能的子元素绝对定位提供参考 */
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 设置一个名为.step-item-tail.step-item-tail-done 的类选择器 */
|
|
|
.step-item-tail.step-item-tail-done {
|
|
|
/* 设置背景颜色为 #009688 */
|
|
|
background: #009688;
|
|
|
}
|
|
|
|
|
|
/* 设置一个名为.step-item-head 的类选择器 */
|
|
|
.step-item-head {
|
|
|
/* 设置元素为相对定位，为子元素的绝对定位提供参考 */
|
|
|
position: relative;
|
|
|
/* 将元素设置为内联块级元素，可在同一行显示并允许设置宽度、高度等属性 */
|
|
|
display: inline-block;
|
|
|
/* 设置高度为 26px */
|
|
|
height: 26px;
|
|
|
/* 设置宽度为 26px */
|
|
|
width: 26px;
|
|
|
/* 设置文本居中对齐 */
|
|
|
text-align: center;
|
|
|
/* 垂直对齐方式为顶部对齐 */
|
|
|
vertical-align: top;
|
|
|
/* 设置文本颜色为 #009688 */
|
|
|
color: #009688;
|
|
|
/* 设置边框为 1px 宽的实线，颜色为 #009688 */
|
|
|
border: 1px solid #009688;
|
|
|
/* 设置边框圆角为 50%，使元素呈现圆形 */
|
|
|
border-radius: 50%;
|
|
|
/* 设置背景颜色为白色 */
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
/* 设置一个名为.step-item-head.step-item-head-active 的类选择器 */
|
|
|
.step-item-head.step-item-head-active {
|
|
|
/* 设置背景颜色为 #009688 */
|
|
|
background: #009688;
|
|
|
/* 设置文本颜色为白色 */
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
|
/* 设置一个名为.step-item-main 的类选择器 */
|
|
|
.step-item-main {
|
|
|
/* 将元素设置为块级元素，独占一行 */
|
|
|
display: block;
|
|
|
/* 设置元素为相对定位，为子元素的绝对定位提供参考 */
|
|
|
position: relative;
|
|
|
/* 设置左外边距为 -50%，用于调整元素位置 */
|
|
|
margin-left: -50%;
|
|
|
/* 设置右外边距为 50%，用于调整元素位置 */
|
|
|
margin-right: 50%;
|
|
|
/* 设置左内边距为 26px */
|
|
|
padding-left: 26px;
|
|
|
/* 设置文本居中对齐 */
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
/* 设置一个名为.step-item-main-title 的类选择器 */
|
|
|
.step-item-main-title {
|
|
|
/* 设置字体加粗 */
|
|
|
font-weight: bolder;
|
|
|
/* 设置文本颜色为 #555555 */
|
|
|
color: #555555;
|
|
|
}
|
|
|
|
|
|
/* 设置一个名为.step-item-main-desc 的类选择器 */
|
|
|
.step-item-main-desc {
|
|
|
/* 设置文本颜色为 #aaaaaa */
|
|
|
color: #aaaaaa;
|
|
|
}
|
|
|
|
|
|
/* 设置一个选择器组合，当.lay-step 后面紧跟着 [carousel-item] 元素时 */
|
|
|
.lay-step + [carousel-item]:before {
|
|
|
/* 不显示任何内容 */
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
/* 设置一个选择器组合，当.lay-step 后面紧跟着 [carousel-item] 元素时，选择 [carousel-item] 的子元素 */
|
|
|
.lay-step + [carousel-item] > * {
|
|
|
/* 设置背景颜色为透明 */
|
|
|
background-color: transparent;
|
|
|
} |
