Router web wizard page implementation

一个新手
Release: 2017-10-02 09:45:11
Original
2446 people have browsed it

这一篇是网上比较好的实现方式,请在百度输入关键之搜索“基于Bootstrap实现的上一步下一步表单向导插件Wizard.js”

使用网上的scrollable.js这个插件bug比较多,不推荐使用

下面是我根据需求完成自己写的一份路由器向导页面

      

  • 上网方式
  • PPOE
  • 静态IP
  • 动态IP
  • 无线设置
  • Portal设置
  • 完成

本向导提供三种上网方式的选择
如果是其他上网方式,请点击菜单栏“网络->接口->wan”配置。

路由器自动选择上网方式(默认)

PPOE(ADSL虚拟拨号)

动态IP(自动从网络服务商获取IP地址)

静态IP(网络服务商提供的IP地址)

请在下面的设置框中填入运营商提供的正确的宽带账号和密码。

请在下面的设置框中填入正确的IP地址、掩码、网关、DNS等信息。

下面是路由自动获取的IP地址。

本向导页面设置路由器无线网络基本参数以及无线安全。

关闭无线安全

WPA-PSL/WPA2-PSK

受限制的网络连接,HTTP请求都重定向到指定的站点
本向向导页面设置无线强制认证。

恭喜您已经完成了配置。

请点击“确定”按钮完成配置。

Copy after login

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; }
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!