css布局实现服务流程步骤图效果代码
代码语言:html
所属分类:进度条
代码描述:css布局实现服务流程步骤图效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 公共样式表css */
html,body {
color: #333;
margin: 0;
height: 100%;
font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
img {
border: 0;
}
body {
background: #fff;
color: #666;
}
html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #08acee;
}
button {
outline: 0;
}
img {
border: 0;
}
button,input,optgroup,select,textarea {
margin: 0;
font: inherit;
color: inherit;
outline: none;
}
li {
list-style: none;
}
a {
color: #666;
}
a:hover {
color: #eee;
}
.clearfix::after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
}
/* 必要布局样式css */
.i-process .list {
background: #fff url("//repo.bfw.wiki/bfwrepo/images/intro/line.png") no-repeat center ;
margin: 0 auto;
width: 1200px;
height: 333px;
}
.fl {
float: left;
display: inline;
}
.fr {
float: right;
display: inline;
}
.por {
position: relative;
}
.poa {
position: absolute;
}
.flow, .cooperation {
background-color: #fff;
}
.flow {
height: 685px;
text-align: center;
}
.fp-tableCell {
}
.title {
padding: 60px 0 80px 0;
}
.title-text {
position: relative;
padding-bottom: 20px;
font-size: 34px;
color: #666666;
font-weight: normal;
}
.title-text:after {
content: '';
display: block;
position: absolute;
left: 50%;
bottom: 0;
width: 110px;
height: 6px;
margin-left: -52px;
background-color: #43cdab;
}
.title-description {
margin-top: 40px;
color: #b0b0b0;
}
.title-description {
margin-top: 30px;
}
.inner-item {
margin: 0 auto;
position: relative;
}
.i-process {
position: relative;
width: 1200px;
margin: 0 auto;
}
.i-process .hold {
width: 1106px;
height: 352px;
margin: 0 auto;
}
.i-process .btn {
width: 68px;
height: 150px;
line-height: 2;
color: #8f8f95;
text-align: center;
transform: translateX(50px);
opacity: 0;
}
.i-process .btn.cur {
color: #43cdab;
}
.i-process .btn:nth-child(1) {
left: 33px;
top: 165px;
}
.i-process .btn:nth-child(2) {
left: 151px;
top: 61px;
}
.i-process .btn:nth-child(3) {
left: 294px;
top: 117px;
}
.i-process .btn:nth-child(4) {
left: 439px;
top: 46px;
}
.i-process .btn:nth-child(5) {
left: 618px;
top: 54px;
}
.i-process .btn:nth-child(6) {
left: 776px;
top: 46px;
}
.i-process .btn:nth-child(7) {
left: 957px;
top: 148px;
}
.i-process .btn:nth-child(8) {
left: 1087px;
top: 58px;
}
.i-process .btn .light {
float: left;
width: 10px;
height: 10px;
border-radius: 5px;
background: #fff;
margin: 12px 29px;
}
.i-process .btn .light:after {
content: "";
position: absolute;
left: -5px;
top: -5px;
z-index: -1;
width: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0