如何制作ros的hotspot热点认证网页

时间：2024-10-28 16:15:39

1、看一下效果图。这是一套自适应的网页界面

2、了解一下网页架构：网页内容包括用户登录选项（尊贵用户登录，试用用户登录，关于制作着的说明），站标，广告区。

3、建立所用图片文件夹site，包含下面几个文件

4、打开dreamever编辑首页login.html:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>wifi technology</title><meta name="DC.creator" content="Ethan Marcotte - http://unstoppablerobotninja.com/" /><meta name="DC.language" content="en" /><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" charset="utf-8" src="js/jquery.leanModal.min.js"></script><link rel="stylesheet" type="text/css" media="all" href="style.css"><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style type="text/css" media="screen, projection">.section:after,ul.nav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}/* http://meyerweb.com/eric/tools/css/reset/ *//* v1.0 | 20080212 */html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; }body { line-height:1; }ol,ul { list-style:none; }blockquote,q { quotes:none; }blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }ins { text-decoration:none; }del { text-decoration:line-through; }table { border-collapse:collapse;border-spacing:0; }body { background: #E4E4E4 url("site/bg.png"); color: #292929; color: rgba(0, 0, 0, 0.82); font: normal 100% Cambria, Georgia, serif; -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-text-size-adjust: none;}a { color: #890101; text-decoration: none; -moz-transition: 0.2s color linear; -webkit-transition: 0.2s color linear; transition: 0.2s color linear;}a:hover { color: #DF3030;}#page { background: url("site/rag.png") repeat-x; padding: 2em 0;}.inner { margin: 0 auto; width: 93.75%; /* 960px / 1024px */}img { max-width: 100%;}.amp { font-family: Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif; font-style: italic; font-weight: normal;}.mast { float: left; width: 31.875%; /* 306px / 960px */}h1 { background: url("site/logo-bg.png") no-repeat 50% 0;}h1 a { padding-top: 280px; height: 100px; display: block; text-align: center;}.intro,.main,.footer { float: right; width: 65.9375%; /* 633px / 960px */}.intro { margin-top: 117px;}.intro div { line-height: 1.4;}ul.nav { border-top: 1px solid #888583; margin: 2em auto 0; width: 64.379%;}ul.nav a { background: url("site/ornament.png") no-repeat 0 100%; font: bold 14px/1.2 "Book Antiqua", "Palatino Linotype", Georgia, serif; display: block; text-align: center; letter-spacing: 0.1em; padding: 1em 0.5em 3em; margin-bottom: -1em; text-transform: uppercase;}ul.nav a:hover { background-position: 50% 100%;}li.first a { border-top: 1px solid #FFF9EF; padding-top: 1.25em;}ul.nav i { font: normal 10px Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif; display: block; letter-spacing: 0.05em;}.intro h2 { font: normal 2em "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif; text-align: center; margin-bottom: 0.25em;}.main h2 { background: url("site/ornament.png") no-repeat 0 50%; font-size: 1.4em; text-transform: lowercase; text-align: center; margin: 0.75em 0 1em;}.main h2 b { background: url("site/bg.png"); font-weight: normal; padding: 0 1em;}.figure { float: left; font-size: 10px; line-height: 1.1; margin: 0 3.317535545023696682% 1.5em 0; /* 21px / 633px */ text-align: center; width: 31.121642969984202211%; /* 197px / 633px */ text-transform: uppercase; letter-spacing: 0.05em;}.figure b { display: block; font-size: 14px; font-family: "Book Antiqua", "Palatino Linotype", Georgia, serif; letter-spacing: 0.1em;}.figure img { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);; display: block; margin: 0 auto 1em;}li#f-mycroft,li#f-winter { margin-right: 0;}.footer { background: url("site/ornament.png") 50% 0 repeat-x; font-size: 12px; text-align: center; padding: 40px 0 20px;}.footer p { margin-bottom: 0.5em;}@media (max-width: 600px) { /* 633px grid (88x6 col, 21x5 gut; 88+21+88+21+88+21+88+21+88+21+88) */ .inner { position: relative; } .mast, .intro, .main, .footer { float: none; width: auto; } h1 { background: none; } h1 a { padding-top: 70px; height: 87px; } ul.nav { background: url("site/ornament.png") no-repeat 0 -20px; border-top: none; margin: 0 auto; position: absolute; top: 0; width: 100%; } ul.nav li { float: left; margin-right: 3.317535545023696682%; /* 21px / 633px */ width: 31.121642969984202211%; /* 197px / 633px */ } ul.nav a, ul.nav i { font: 10px Helvetica, Arial, sans-serif; letter-spacing: 0; } ul.nav a:hover, ul.nav a:focus { background-position: 0 100%; } li.first a { border-top: none; padding-top: 1em; } ul.nav li.last { margin-right: 0; } .intro { margin-top: 18px; } .intro h2 { font-size: 1.4em; }}@media (max-width: 400px) { .figure, li#f-mycroft { margin-right: 3.317535545023696682%; /* 21px / 633px */ width: 48.341232227488151658%; /* 306px / 633px */ } li#f-watson, li#f-moriarty { margin-right: 0; }}@media (min-width: 1300px) { .mast { float: none; width: auto; } h1 { float: left; width: 31.875%; /* 306px / 960px */ } ul.nav { float: right; margin: 40px 0 1em; text-align: center; width: 65.9375%; /* 633px / 960px */ } ul.nav { border-top: none; } ul.nav li.first a { border-top: none; padding-top: 1em; } ul.nav li { float: left; margin-right: 3.317535545023696682%; /* 21px / 633px */ width: 31.121642969984202211%; /* 197px / 633px */ } ul.nav li.last { margin-right: 0; } .intro { margin-top: 1em; } .figure, li#f-mycroft { margin-right: 3.317535545023696682%; /* 21px / 633px */ width: 13.902053712480252764%; /* 88px / 633px */ } .footer { clear: both; float: none; margin-left: 56.770833333333333333%; /* 327px / 960px */ width: 20.520833333333333333%; /* 197px / 960px */ }}</style></head><body><div id="loginmodal" style="display:none;"> <h2>用户登陆通道</h2> $(if chap-id) <form name="sendin" action="$(link-login-only)" method="post"> <input type="hidden" name="username" /> <input type="hidden" name="password" /> <input type="hidden" name="dst" value="$(link-orig)" /> <input type="hidden" name="popup" value="true" /> </form> <script type="text/javascript" src="/md5.js"></script> <script type="text/javascript">  </script>$(endif) <form id="loginform" name="login" method="post" action="$(link-login-only)" $(if chap-id) onSubmit="return doLogin()" $(endif)> <input type="hidden" name="dst" value="$(link-orig)" /> <input type="hidden" name="popup" value="true" /> <label for="username">账号:</label> <input type="text" name="username" id="username" class="txtfield" tabindex="1" value="$(username)"> <label for="password">密码:</label> <input type="password" name="password" id="password" class="txtfield" tabindex="2"> <div style = "text-align:right;"> <input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="登陆" tabindex="3"></div> <script type="text/javascript">$(function(){ $('#loginform').submit(function(){ return ture; }); $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });});</script></form> </div><div id="page"> <div class="inner"> <div class="mast"> <h1 id="logo"><a ><img src="site/logo.png" alt="The Baker Street Inquirer" /></a></h1> <ul class="nav"> <li class="first"><a href="#loginmodal" id="modaltrigger"><i>VIP Channel</i> 尊贵用户登录</a></li> <li>$(if trial == 'yes') <a href="$(link-login-only)?dst=$(link-orig-esc)&username=T-$(mac-esc)"><i>trial channel</i> 试用用户登录</a>.$(endif)</a></li> <li class="last"><a href="tzb217.html"><i>About tzb217 </i> 特种兵217</a></li> </ul> </div> <div class="section intro"> <div> <h2>“wifi广告营销服务”</h2> <p style="font-family:'楷体'">     洞察敏锐商机的您是否发现，在大街上,交通工具,餐厅,户外场所,旅游和行程中，越来越多人使用智能手机上网，您是否也意识到，这种趋势和背景下，移动互联网拥有广阔的市场和优越的商机。在人们享受传统互联网带来的极大的生活方便的同时，习惯和趋势也在发生极大变化。智能手机已经成为市民最为主要的随身携带品之一，而打开手机的WIFI功能，进行无线网络搜索，也已成为手机控的日常习惯性动作之一。为顾客提供免费上网服务在国外已蔚然成风，免费wifi热点成为店面的形象招牌和拉近消费者并促销购买的重要助力。当您的顾客光临并使用店铺内提供的 Wi-Fi 服务，您可曾考虑过可以通过 Wi-Fi 网络，宣传一下您店铺的信息，最起码让顾客了解到正在使用的 Wi-Fi 网络是谁提供的吧。 WiFi广告营销就是在顾客使用免费wifi的时候推送店内的促销信息，一般的展现方式是用户使用商家提供的免费上网的同时，会在入口页面看到商家的广告促销信息。因为消费者希望免费使用WiFi，所以他们乐意接受一定的广告。.</p> </div> </div> <div class="section main"> <h2><img src="site/wifi_c.png" alt="wifi" width="100%"/></h2> <ol> <li id="f-holmes" class="figure"> <a href="#"> <img src="site/f-holmes.jpg" alt="" /> <span class="figcaption">提示牌 <b>快餐店</b></span> </a> </li> <li id="f-watson" class="figure"> <a href="#"> <img src="site/f-watson.jpg" alt="" /> <span class="figcaption">适用于<b>家庭无线覆盖</b></span> </a> </li> <li id="f-mycroft" class="figure"> <a href="#"> <img src="site/f-mycroft.jpg" alt="" /> <span class="figcaption">提示牌 <b>内有无线覆盖</b></span> </a> </li> <li id="f-moriarty" class="figure"> <a href="#"> <img src="site/1.png" alt="" /> <span class="figcaption">无线覆盖适用于 <b>宾馆</b></span> </a> </li> <li id="f-adler" class="figure"> <a href="#"> <img src="site/2.png" alt="" /> <span class="figcaption">无线覆盖适用于 <b>办公环境</b></span> </a> </li> <li id="f-winter" class="figure"> <a href="#"> <img src="site/3.png" alt="" /> <span class="figcaption">无线覆盖适用于 <b>学校环境</b></span> </a> </li> </ol> </div> <div class="footer"> <p>Copyright © 2013 BORUI Technology Limited All Rights Reserved.</p> <br> <p> 博锐科技版权所有</p> </div> </div></div></body></html>这其中链接了jquery中的两个文件，jquery.leanModal.min.js和jquery-1.9.1.min.js把这两个文件放在文件夹js中，这两个文件可以去juery官网下载。另外还包含common.min.js，cookie.min.js，style.css文件，下面就把这三个文件代码展示如下

5、common.min.js文件代码：function $(objStr){return document.getElementByIdx_x_x(objStr);}window.onload = function(){ //分析cookie值，显示上次的登陆信息 var userNameValue = getCookieValue("userName"); $("userName").value = userNameValue; var passwordValue = getCookieValue("password"); $("password").value = passwordValue; //写入点击事件 $("submit").onclick = function() { var userNameValue = $("userName").value; var passwordValue = $("password").value; //服务器验证（模拟） var isAdmin = userNameValue == "admin" && passwordValue =="123456"; var isUserA = userNameValue == "userA" && passwordValue =="userA"; var isMatched = isAdmin || isUserA; if(isMatched){ if( $("saveCookie").checked){ setCookie("userName",$("userName").value,24,"/"); setCookie("password",$("password").value,24,"/"); } alert("登陆成功,欢迎你," + userNameValue + "!"); self.location.replace("welcome.html"); } else alert("用户名或密码错误，请重新输入！"); }}

6、cookie.min.js代码如下：//新建cookie。//hours为空字符串时,cookie的生存期至浏览器会话结束。hours为数字0时,建立的是一个失效的cookie,这个cookie会覆盖已经建立过的同名、同path的cookie（如果这个cookie存在）。function setCookie(name,value,hours,path){ var name = escape(name); var value = escape(value); var expires = new Date(); expires.setTime(expires.getTime() + hours*3600000); path = path == "" ? "" : ";path=" + path; _expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString(); document.cookie = name + "=" + value + _expires + path;}//获取cookie值function getCookieValue(name){ var name = escape(name); //读cookie属性，这将返回文档的所有cookie var allcookies = document.cookie; //查找名为name的cookie的开始位置 name += "="; var pos = allcookies.indexOf(name); //如果找到了具有该名字的cookie，那么提取并使用它的值 if (pos != -1){ //如果pos值为-1则说明搜索"version="失败 var start = pos + name.length; //cookie值开始的位置 var end = allcookies.indexOf(";",start); //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置 if (end == -1) end = allcookies.length; //如果end值为-1说明cookie列表里只有一个cookie var value = allcookies.substring(start,end); //提取cookie的值 return (value); //对它解码 } else return ""; //搜索失败，返回空字符串}//删除cookiefunction deleteCookie(name,path){ var name = escape(name); var expires = new Date(0); path = path == "" ? "" : ";path=" + path; document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;}

7、style.css代码如下;/** page structure **/#w { display: block; width: 750px; margin: 0 auto; padding-top: 30px;}#content { display: block; width: 100%; background: #fff; padding: 25px 20px; padding-bottom: 35px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;}.flatbtn { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; outline: 0; border: 0; color: #f3faef; text-decoration: none; background-color: #6bb642; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); font-size: 1.2em; font-weight: bold; padding: 12px 22px 12px 22px; line-height: normal; text-align: center; vertical-align: middle; cursor: pointer; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,0.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3); -moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3); box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);}.flatbtn:hover { color: #fff; background-color: #73c437;}.flatbtn:active { -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1); box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);}/** custom login button **/.flatbtn-blu { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; outline: 0; border: 0; color: #edf4f9; text-decoration: none; background-color: #4f94cf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); font-size: 1.3em; font-weight: bold; padding: 12px 26px 12px 26px; line-height: normal; text-align: center; vertical-align: middle; cursor: pointer; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,0.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);}.flatbtn-blu:hover { color: #fff; background-color: #519dde;}.flatbtn-blu:active { -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1); box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);}/** modal window styles **/#lean_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; background: #000; display: none;}#loginmodal { width: 300px; padding: 15px 20px; background: #f3f6fa; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);}#loginform { /* no default styles */ }#loginform label { display: block; font-size: 1.1em; font-weight: bold; color: #7c8291; margin-bottom: 3px; }.txtfield { display: block; width: 100%; padding: 6px 5px; margin-bottom: 15px; font-family: 'Helvetica Neue', Helvetica, Verdana, sans-serif; color: #7988a3; font-size: 1.4em; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8); background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#edf3f9), to(#fff)); background-image: -webkit-linear-gradient(top, #edf3f9, #fff); background-image: -moz-linear-gradient(top, #edf3f9, #fff); background-image: -ms-linear-gradient(top, #edf3f9, #fff); background-image: -o-linear-gradient(top, #edf3f9, #fff); background-image: linear-gradient(top, #edf3f9, #fff); border: 1px solid; border-color: #abbce8 #c3cae0 #b9c8ef; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4); -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; transition: all 0.25s linear;}.txtfield:focus { outline: none; color: #525864; border-color: #84c0ee; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec; -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;}

8、好了最后来看一下文档结构：

Win7连接Win2008远程桌面

Thinkpad-X240安装win7前调试bios

Win10关闭自动更新方法

电脑win10一键备份系统怎么操作?

centos更改防火墙配置文件iptables