使用网上的scrollable.js这个插件bug比较多,不推荐使用
下面是我根据需求完成自己写的一份路由器向导页面
CSS样式表
@charset "utf-8"; /*CSS DOCUMENT*/ html, body, p, span, h1, h2, h3, h4, h5, h6, p, pre, a, code, em, img, small, strong, sub, sup, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label { margin:0; padding:0; border:0; outline:0; font-size:16px;vertical-align:baseline;} a { color:#007bc4; text-decoration:none; } a:hover{ text-decoration:underline; } ol,ul{ list-style:none; } table{ border-collapse:collapse;border-spacing:0 } body{ height:100%;font:16px "Microsoft Yahei",Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", sans-serif; color:#51555C; } img{ border:none; } #head { width:56rem; height:5.75rem; margin:0 auto; } #wizard { border:5px solid #eee; height:26rem; margin:20px auto; width:35.63rem;overflow:hidden; position:relative; -moz-border-radius:5px; -webkit-border-radius:5px; padding:0; } #wizard .right{float:right;} #wizard #status{height:35px;background:#eee;padding-left:1.56rem!important; width:35.63rem;} #status li{float:left;color:rgb(154,37,143);padding:10px 30px;} #status li.active{ background-color:rgb(133,129,216); font-weight:normal; -moz-border-radius:5px; -webkit-border-radius:5px; } .page{padding:1.25rem 1.875rem;width:31.25rem;float:left;height:25rem;} .page em{ border-bottom:1px dotted #ccc; margin-bottom:20px; padding-bottom:5px; font-style:normal; font-size:0.8rem; } .btn_nav{ height:36px; line-height:36px; margin:20px auto; } .prev,.next{ width:100px; height:32px; line-height:32px; background:url(images/btn_bg.gif) repeat-x bottom; border:1px solid #d3d3d3; cursor:pointer } .page p{ line-height:16px; margin-top:0.5rem; font-size:0.8rem; } .page p label{ display:block; font-size:0.8rem; } .input{ width:240px; height:18px; margin:10px auto; line-height:20px; border:1px solid #d3d3d3; padding:2px } .hide { display:none; }
The above is the detailed content of Router web wizard page implementation. For more information, please follow other related articles on the PHP Chinese website!