<!--<input type="button" value="往左" class="y">-->
<h1>登 陆</h1>
<form method="post" action="ok.html">
<p class="form_zh"><input type="text" placeholder="请输入账号" class="form_zh_y" autofocus = "autofocus" required = "required"></p>
<p class="form_mm"><input type="password" placeholder="请输入密码" class="form_zh_e" required = "required"></p>
<input type="submit" value="登 录" class="form_dl">
</form>
<p class="qtfsdl"><span><img src="images/weixin.jpg" />微信登陆</span><span><img src="images/QQ.jpg" />QQ登陆</span></p>
<p class="qtfsdr"><img src="images/frm_xia.jpg"/></p>
<p class="y">注 册</p>
<!--<div class="y1" style="position: absolutetop:250pxleft: -159pxwidth: 260pxheight: 47pxbackground: redopacity: 0.5"></div>-->
</div>
#zuo{
width: 500px
height: 540px
background: white
position: absolute
top: calc(50% - 250px)
left:calc(50% - 250px)
color: #292929
}
#zuo h1,#you h1{margin-top:30pxfont-weight: boldtext-align: centermargin-bottom: 30px}
用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那，接受的文件也是需要定义的。
<!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
}
