css怎么制作一个登录页面

html-css014

css怎么制作一个登录页面,第1张

CSS+HTML可以制作一个登录静态页面，做不了动态页面。

表单代码：

<form name="form" method="POST" action="">

<input type="text" value="用户名" />

<input type="password" value="密码" />

<input type="submit" name="button" value="登录" class="xiaoka_tj"/>

</form>

用div+css制作一个登录页面，首先需要做的就是将这个登录界面的布局给构想好，然后在使用div去布局出来，一般都要结合表单，因为是需要和数据库结合的，至于的具体的界面，看下代码：

<html>

<head>

<meta charset="UTF-8">

<title>淘宝登录</title>

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

<script type="text/javascript">

<{if $message !=''}>

alert("<{$message}>")

<{/if}>

</script>

</head>

<body>

<div id="logo">

<div class="logotop">

<div class="yanz">

<h2>登录</h2>

<form action="logo.php" method="post">

<span style="display:blockheight:27pxwidth:27pxbackground-image:url(../static/images/logozh.jpg)float:left"></span>

<input type="text" name="uname" style="height:26px"/><br/>

<span style="display:blockheight:27pxwidth:27pxbackground-image:url(../static/images/logomm.jpg)float:left"></span>

<input type="password" name="pwd" style="height:26px"/>

<p><a href="">忘记登录密码？</a></p>

<input type="submit" value="" style="width:254pxheight:37pxbackground-image:url(../static/images/logodl.jpg)cursor: pointer"/>

</form>

</div>

</div>

</div>

</body>

</html>

这个代码有些图片的地址，需要根据要求去改，这些是我自己写的，然后就是传输的文件，action那，接受的文件也是需要定义的。

<style type="text/css">

body{ background:#fffpadding:0margin:0font-size:12px}

img{ border:0padding:0margin:0}

ul{list-style:none}

.login_bg{ background:url(<%=path%>financemanage/images/login_new/login_bg.gif) repeat-xheight:591px}

.dl_bg{ background:url(<%=path%>financemanage/images/login_new/dlbg.jpg) no-repeat center top}

.diwen{ background:url(<%=path%>financemanage/images/login_new/diwen.gif) repeat-x}

.usename{ font-size:14pxcolor:#0e3c00}

.dl_text{ width:145pxheight:17pxbackground:url(<%=path%>financemanage/images/login_new/text.gif) repeat-x centerborder:1px solid #1c5302}

.dl_but{ width:75pxheight:50pxbackground:url(<%=path%>financemanage/images/login_new/dlbut.gif) no-repeatborder:0 nonecursor:pointer}

</style>

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

var count = 0

function submit_onclick(obj){

if (count == 0) {

//alert("MAC:" + document.forms[0].MACAddr.value)

obj.submit()

count ++

}

}

function submit2() {

if (count != 0) {

return false

}

if (event.keyCode==13) {

document.forms[0].submit()

}

}

</script>

<!-- script FOR="foo" EVENT="OnObjectReady(objObject,objAsyncContext)" LANGUAGE="JScript">

if(objObject.IPEnabled != null &&objObject.IPEnabled != "undefined" &&objObject.IPEnabled == true)

{

if(objObject.MACAddress != null &&objObject.MACAddress != "undefined")

MACAddr = objObject.MACAddress

if(objObject.IPEnabled &&objObject.IPAddress(0) != null &&objObject.IPAddress(0) != "undefined")

IPAddr = objObject.IPAddress(0)

}

</script>

<object classid="CLSID:76A64158-CB41-11D1-8B02-00600806D9B6" id="locator" VIEWASTEXT></object>

<object classid="CLSID:75718C9A-F029-11d1-A1AC-00C04FB6C223" id="foo"></object>

<script LANGUAGE="JScript">

var service = locator.ConnectServer()

var MACAddr

var IPAddr

service.Security_.ImpersonationLevel=3

service.InstancesOfAsync(foo, 'Win32_NetworkAdapterConfiguration')

</script>

-->

</head>

<body onKeyPress="submit2()">

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="login_bg">

<tr>

<td height="135" align="center" valign="top"><img src="<%=request.getContextPath()%>/financemanage/images/login_new/logo.jpg" width="939" height="135" /></td>

</tr>

<tr>

<td height="391" align="center" valign="top" class="dl_bg">

<html:form action="/financemanage/login.do" method="post">

<table width="320" height="70" border="0" cellspacing="0" cellpadding="0" style="margin-top:120pxmargin-left:40px">

<tr>

<td width="100" align="center" class="usename">操作员号：</td>

<td width="184" align="left"><input name="tlrno" type="text" class="dl_text" maxlength="8" tabindex="1"/></td>

<td width="75" rowspan="2"><input name="Submit" type="button" onclick="submit_onclick(this.form)" value="" class="dl_but" tabindex="3"/></td>

</tr>

<tr>

<td align="center" class="usename">密 　码：</td>

<td align="left"><input name="pwd" type="password" class="dl_text" maxlength="10" tabindex="2"/>

<%-- input type="hidden" name="MACAddr"/>--%>

</td>

</tr>

<tr>

<td></td>

<td colspan="2"><font size="2"><html:errors/></font></td>

</tr>

</table>

</html:form>

</td>

</tr>

<tr>

<td height="65" class="diwen"> </td>

</tr>

</table>

你可以自己换一下背景颜色或者背景图片 其他的都挺好 这是一个给银行操作员登录的界面 你看看吧