html网页设计:一个简单的登录界面代码!

html-css08

html网页设计:一个简单的登录界面代码!,第1张

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<link href="main.css" type="text/css" rel="stylesheet">

<title>登陆界面</title>

</head>

<body>

<div class="login_ico">

<img src="images/login_ico.png">

</div>

<div class="login_putin">

<ul>

<li><input type="text" ></li>

<li><input type="password" ></li>

</ul>

</div>

<div class="login_btn">

<input type="submit" value="登陆">

</div>

</body>

</html>

样式 :

*{

margin:0

padding:0}

li{

list-style-type:none

margin:0

padding:0}

a{

text-decoration:none

color:#000}

/*---------------------按钮-----------------------------*/

.login_putin ul li input{

margin: 0

width:70%

padding: 1em 2em 1em 5.4em

-webkit-border-radius:.3em

-moz-border-radius: .3em

border: 1px solid #999

}

.login_btn{

width:300px

margin:40px auto 0 auto

}

.login_btn input{

width:100%

margin:0

padding:.5em 0

-webkit-border-radius:.3em

-moz-border-radius: .3em

border:#1263be solid 1px

background:#1b85fd

color:#FFF

font-size:17px

font-weight:bolder

letter-spacing:1em

}

.login_btn input:hover{

background:#1263be

}

下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件。

1) html的实现

<head>

<!-- 以下方式只是刷新不跳转到其他页面 -->

<meta http-equiv="refresh" content="10">

<!-- 以下方式定时转到其他页面 -->

<meta http-equiv="refresh" content="5url=hello.html">

</head>

优点:简单

缺点:Struts Tiles中无法使用

2) javascript的实现

<script language="javascript" type="text/javascript">

// 以下方式直接跳转

window.location.href='hello.html'

// 以下方式定时跳转

setTimeout("javascript:location.href='hello.html'", 5000)

</script>

优点:灵活,可以结合更多的其他功能

缺点:受到不同浏览器的影响

3) 结合了倒数的javascript实现(IE)

<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript">

var second = totalSecond.innerText

setInterval("redirect()", 1000)

function redirect(){

totalSecond.innerText=--second

if(second<0) location.href='hello.html'

}

</script>

优点:更人性化

缺点:firefox不支持(firefox不支持span、div等的innerText属性)

3') 结合了倒数的javascript实现(firefox)

<script language="javascript" type="text/javascript">

var second = document.getElementById('totalSecond').textContent

setInterval("redirect()", 1000)

function redirect()

{

document.getElementById('totalSecond').textContent = --second

if (second <0) location.href = 'hello.html'

}

</script>

4) 解决Firefox不支持innerText的问题

<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript">

if(navigator.appName.indexOf("Explorer") >-1){

document.getElementById('totalSecond').innerText = "my text innerText"

} else{

document.getElementById('totalSecond').textContent = "my text textContent"

}

</script>

5) 整合3)和3')

<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript">

var second = document.getElementById('totalSecond').textContent

if (navigator.appName.indexOf("Explorer") >-1) {

second = document.getElementById('totalSecond').innerText

} else {

second = document.getElementById('totalSecond').textContent

}

setInterval("redirect()", 1000)

function redirect() {

if (second <0) {

location.href = 'hello.html'

} else {

if (navigator.appName.indexOf("Explorer") >-1) {

document.getElementById('totalSecond').innerText = second--

} else {

document.getElementById('totalSecond').textContent = second--

}

}

}

</script>

参考http://www.cnblogs.com/aszx0413/articles/1886819.html

保存的只是前台静态页面,一般能够登陆的网页 都是有后台页面配合运行的

前台输入了帐号密码后登陆是要提交到后台的

所以问题是在于提交的后台页面的路径不正确

一般提交都是用相对路径,保存下来的网页其相对路径只能是你的本地硬盘,如果你知道提交的后台页面地址,可以尝试修改前台页面中提交的路径

一般就是修改<form action="后台路径" method="post" >中的后台路径

你给的网页无action路径,所以其后台就是该页

你可以尝试将下载下来的页面用记事本打开,找到“<form method="post">”

将其修改为“<FORM action='http://aspsvr.jmknit.com:87/jmPro.asp' method=post>”,有可能成功