1NetMedia_Blog
Home
Html
ASP/.NET
PHP
APP
JS
Ajax
Flash
SEO
Document
Design
Data
Private
<< css 文本超出多行就隐藏并且显示...
类别:
Html
js获取当前对象的所有属性 >>
纯CSS步骤条(Step组件)
[ 日期: 2018-07-30 2:11:50 PM | 作者:
admin
| 来源:
WingMeng
| 人气:528 |
|
] 字号: 【
大
中
小
】
急速栏目链接:
标签:
步骤
|
step
|
用HTML+CSS实现的步骤条效果,Step组件的功能是让"流程可视化",即让用户在操作时不要迷失方向,帮助用户定位,避免不明确操作的高成本。Step组件采用步骤轴的图形化方式,用"高亮"图标表明用户所在的位置,用"次亮"图标标明用户完成了哪些步骤,用"不亮"图标标明未完成的步骤,让用户对于整个流程一目了然。
<!DOCTYPE html> <html lang="zh_cn"> <head> <meta charset="utf-8"> <style type="text/css"> /*** iForms v2.0 —— Step by WingMeng(.com) 2014-? UI menu: 1. The default style (默认风格) 2. Yellow (黄色风格) 3. Blue (蓝色风格) 4. Red (红色风格) ***/ /* Reset */ html { background-color: white; } body { margin: 0; padding: 0; color: #333; font: 14px/1.8 Tahoma, Geneva, '\5B8B\4F53'; } ol { list-style: none outside none; margin: 0; padding: 0; } .ui-step { color: #b7b7b7; padding: 0 60px; margin-bottom: 35px; position: relative; } .ui-step:after { display: block; content: ""; height: 0; font-size: 0; clear: both; overflow: hidden; visibility: hidden; } .ui-step li { float: left; position: relative; } .ui-step .step-end { width: 120px; position: absolute; top: 0; right: -60px; } .ui-step-line { height: 5px; background-color: #e0e0e0; box-shadow: inset 0 1px 1px rgba(0,0,0,.2); margin-top: 15px; } .step-end .ui-step-line { display: none; } .ui-step-cont { width: 120px; position: absolute; top: 0; left: -15px; text-align: center; } .ui-step-cont-number { display: inline-block; *zoom:1; position: absolute; left: 0; top: 0; width: 30px; height: 30px; line-height: 30px; color: #fff; /*background: url(ui-step_cover_30x30.png) center no-repeat\9;*/ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWJJREFUeNpi/A8EDITBXyDeDcRbgfg4EH8E4jtQOXUg5gFieyD2AGJXBmLAf/zgMxBXAzE/yH1EYiEgbgHib/gMxmfxfKghDGRiCSBeQYrFP4E4hwIL0XEFEP8hZDHIUlcqWgrDgeiWo1ucRgNLkX2O1eI5NLQUhtfBLGOEZidQ9lAC4ncMtAXSQHwbiDmZoAIddLAUBJ4C8UQQA+Tjz0BaDIi/M9AHCAHxc5CPN9HRUgZoyO5mghaD9AZbQRZfGACLL4DimA3I+EVni0UZiaucqA7YmBgGCIAsZhsAe/lBFqsMgMUqIIsNBsBiA5DF3gNgsfeAFpmghlo+HX1bCkrQsGoRVH6q0qlavAHyLBOS97vo4NsJ0BBmoGfTp3RQNvZglmfSu3n7H63xR9cGPTL4AO3C8JBgIT+0C/MZn8GMRHbafkE7baBm0llotrsPK3dBhT4QW0JLQVCnjZmQgQABBgBLepKEhKPtYgAAAABJRU5ErkJggg==) center no-repeat\9; border-radius: 50%; border-left: 2px solid #fff; border-right: 2px solid #fff; border: 2px solid rgba(224,224,224,1); font-family: tahoma; font-weight: bold; font-size: 16px; background-color: #b9b9b9; box-shadow: inset 1px 1px 2px rgba(0,0,0,.2); } .ui-step-cont-text { position: relative; top: 34px; left: -42px; font-size: 12px; } /** 步骤数定义 **/ .ui-step-3 li { width: 50%; } .ui-step-4 li { width: 33.3%; } .ui-step-5 li { width: 25%; } .ui-step-6 li { width: 20%; } /** The default style (默认风格) **/ /* Done */ .step-done .ui-step-cont-number { background-color: #85e085; } .step-done .ui-step-cont-text { color: #85e085; } .step-done .ui-step-line { background-color: #6c6; } /* Active */ .step-active .ui-step-cont-number { background-color: #3c3; } .step-active .ui-step-cont-text { color: #3c3; font-weight: bold; } .step-active .ui-step-line { background-color: #e0e0e0; } /** Yellow **/ /* Done */ .ui-step-yellow .step-done .ui-step-cont-number { background-color: #ffc966; } .ui-step-yellow .step-done .ui-step-cont-text { color: #ffc966; } .ui-step-yellow .step-done .ui-step-line { background-color: #ffcc33; } /* Active */ .ui-step-yellow .step-active .ui-step-cont-number { background-color: orange; } .ui-step-yellow .step-active .ui-step-cont-text { color: orange; } .ui-step-yellow .step-active .ui-step-line { background-color: #e0e0e0; } /** Blue **/ /* Done */ .ui-step-blue .step-done .ui-step-cont-number { background-color: #69f; } .ui-step-blue .step-done .ui-step-cont-text { color: #69f; } .ui-step-blue .step-done .ui-step-line { background-color: #4c99e6; } /* Active */ .ui-step-blue .step-active .ui-step-cont-number { background-color: #06c; } .ui-step-blue .step-active .ui-step-cont-text { color: #06c; } .ui-step-blue .step-active .ui-step-line { background-color: #e0e0e0; } /** Red **/ /* Done */ .ui-step-red .step-done .ui-step-cont-number { background-color: #f99; } .ui-step-red .step-done .ui-step-cont-text { color: #f99; } .ui-step-red .step-done .ui-step-line { background-color: #fc9c9c; } /* Active */ .ui-step-red .step-active .ui-step-cont-number { background-color: #f66; } .ui-step-red .step-active .ui-step-cont-text { color: #f66; } .ui-step-red .step-active .ui-step-line { background-color: #e0e0e0; } </style> <title>Step - iForms UI</title> </head> <body> <div style="width:70%; margin:50px auto"> <h5>默认风格:</h5> <ol class="ui-step ui-step-3"> <li class="step-start step-done"> <div class="ui-step-line"></div> <div class="ui-step-cont"> <span class="ui-step-cont-number">1</span> <span class="ui-step-cont-text">填写资料</span> </div> </li> <li class="step-active"> <div class="ui-step-line"></div> <div class="ui-step-cont"> <span class="ui-step-cont-number">2</span> <span class="ui-step-cont-text">审核填写信息</span> </div> </li> <li class="step-end"> <div class="ui-step-line"></div> <div class="ui-step-cont"> <span class="ui-step-cont-number">3</span> <span class="ui-step-cont-text">完成注册</span> </div> </li> </ol> <p> </p> <h5>黄色风格:</h5> <ol class="ui-step ui-step-yellow ui-step-3"> <li class="step-start step-done"> <div class="ui-step-line"></div> <div class="ui-step-cont"> <span class="ui-step-cont-number">1</span> <span class="ui-step-cont-text">填写资料</span> </div> </li> <li class="step-active"> <div class="ui-step-line"></div> <div class="ui-step-cont"> <span class="ui-step-cont-number">2</span> <span class="ui-step-cont-text">审核填写信息</span> </div> </li> <li class="step-end"> <div class="ui-step-line"></div> <div class="ui-step-cont"> <span class="ui-step-cont-number">3</span> <span class="ui-step-cont-text">完成注册</span> </div> </li> </ol> <p> </p> <h5>红色风格:</h5> <ol class="ui-step ui-step-red ui-step-3"> <li class="step-start step-done"> <div class="ui-step-line"></div> <div class="ui-step-cont"> <span class="ui-step-cont-number">1</span> <span class="ui-step-cont-text">填写资料</span> </div> </li> <li class="step-active"> <div class="ui-step-line"></div> <div class="ui-step-cont"> <span class="ui-step-cont-number">2</span> <span class="ui-step-cont-text">审核填写信息</span> </div> </li> <li class="step-end"> <div class="ui-step-line"></div> <div class="ui-step-cont"> <span class="ui-step-cont-number">3</span> <span class="ui-step-cont-text">完成注册</span> </div> </li> </ol> <p> </p> <h5>蓝色风格:</h5> <ol class="ui-step ui-step-blue ui-step-3"> <li class="step-start step-done"> <div class="ui-step-line"></div> <div class="ui-step-cont"> <span class="ui-step-cont-number">1</span> <span class="ui-step-cont-text">填写资料</span> </div> </li> <li class="step-active"> <div class="ui-step-line"></div> <div class="ui-step-cont"> <span class="ui-step-cont-number">2</span> <span class="ui-step-cont-text">审核填写信息</span> </div> </li> <li class="step-end"> <div class="ui-step-line"></div> <div class="ui-step-cont"> <span class="ui-step-cont-number">3</span> <span class="ui-step-cont-text">完成注册</span> </div> </li> </ol> </div> </body> </html>
复制代码
另存代码
提示:您可以先修改部分代码再运行
收藏本文
复制地址
打印本文
关闭页面
没有相关评论
发表评论
请先注册,才能发表评论!
- 注册 -
用户登陆
用户:
密码:
验证:
日志搜索
标签
主题
评论
本站
网络
相关信息
网络收藏夹
(19)
资源共享
(17)
留言本
(17)
站点日历
<<
<
2021
-
01
>
>>
日
一
二
三
四
五
六
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
最近日志
- CSS垂直布局自适应高度解...
- css三栏布局大全(7种布局...
- asp获取远程网站源码并显...
- ES6中三个点扩展运算符(s...
- 获取鼠标点击元素
- Js中Array对象的reduce方...
- Chrome Ajax 跨域设置
- 一些有用的JS正则表达式
- h5在光标位置插入内容,点...
- js常见的内存泄漏及解决方...
最近评论
- 我的是在判断之后取回的数...
- 谢谢啦。。。。帮你顶顶
- 回去就去试试 不错
- http://home.donews.com/...
- 我帮你补充一些
- 兄弟,最后一个TABLE...
- 请博主注明: 全部来自:...
- 吊啊~~
- 很好
- 表面看只是个 玩具头而已...
站点统计
日志: 1491 篇
评论: 54 篇
引用: 0 个
会员: 148 人
访问:33335596 次
建立: 2005-03-30
友情链接
本站logo,欢迎交换链接!
设为首页
-
加入收藏
-
广告服务
-
友情链接
-
站长信箱
-
在线交流
-
繁體中文
版权所有 © 2006-2007
1netmedia.cn
, All Rights Reserved. 推荐使用1024*768分辨率浏览本站
本站博客技术支持 2S-blog: http://www.2s-space.com/
湘ICP备08104616号 页面载入时间:0.140625 秒