向导条是按照先后顺序将一个复杂的表单内容划分成多个步骤,用户可按照步骤轻松完成表单的填写。
样例
如图
css配置
.guide{border-bottom:2px solid #e6e6e6;height:46px;margin:15px 0px 30px 0px;}
.guide li{line-height:44px;text-align:center;color:#7f807e;font-size:13px;}
.guide .active{border-bottom:2px solid #35a0e7;color:#35a0e7;font-weight:bold;}
.guide .number{background-color:#ccc;color:#fff;padding:5px 10px;border-radius:50px;font-size:16px;font-weight:bold;margin-right:3px;}
.guide .active .number{background-color:#35a0e7;}
说明
底部描边2像素、实线、颜色#e6e6e6;高46像素;外边距上15像素、下30像素;
每个步骤高度44像素;文字居中显示;颜色#7f807e;字体大小13像素;
当前步骤底部描边2像素、实线、颜色#35a0e7;颜色#35a0e7;字体粗体;
步骤数字背景颜色#ccc;颜色#fff;内边距上下5像素、左右10像素;圆角50像素;字体大小16像素;字体粗体;右外边距3像素;
当前步骤数字背景颜色#35a0e7;