jquery+css实现审批步骤进度条代码
代码语言:html
所属分类:进度条
代码描述:jquery+css实现审批步骤进度条代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script> <style> @charset "utf-8"; .starBox{margin:100px auto;width:630px;} .control_processSteps { display: flex; white-space: nowrap; } .processStep { display: inline-block; position: relative; flex-shrink: 1; flex-basis: 50%; margin-right: 0px; } .step_main { position: relative; white-space: normal; text-align: left; } /* ���� */ .step_line { position: absolute; height: 4px; top: 10px; left: 0; right: 0; border-color: inherit; background-color: #c0c4cc; } .processStep:last-of-type .step_line { display: none; } .step_icon_inner { position: relative; z-index: 1; display: inline-flex; justify-content: center; width: 24px; height: 24px; box-sizing: border-box; border: 2px solid; border-radius: 50%; text-align: center; font-weight: 700; align-items: center; font-size: 14px; background: #fff; } .step_title { font-size: 16px; line-height: 38px; cursor: pointer; } .step_description { display: none; position: absolute; margin-top: -5px; font-size: 12px; line-height: 20px; font-weight: 400; background: #fff; box-shadow: 0px 4px 4px #ccc; border-radius: 5px; padding: 10px; z-index: 99; } .step_line_active { background-color: #409eff; } .is_finish { color: #409eff; border-color: #409eff; } .is_process { color: #303133; border-color: #303133; } .is_wait { color: #c0c4cc; border-color: #.........完整代码请登录后点击上方下载按钮下载查看
网友评论0