<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆界面</title>
<style type="text/css">
body{
background-image: url(../图片/背景.jpg);
}
#main{
width: 280px;
height: 360px;
background-image: url(../图片/登陆背景.jpg);
position: absolute;
top: 50%;
left: 50%;
margin-left:-140px;
margin-top:-180px;
border:2px solid green;
box-shadow:7px 7px 5px #66CC33;
border-radius: 15px;
opacity:0.70;
}
#top{
text-align: center;
padding: 3px 3px;
}
#middle_top{
width: 250px;
height:80px;
text-align: center;
font:normal bold 20px "SimHei";
padding: 3px 3px;
margin: 3px auto;
}
#middle_bottom{
width: 250px;
height:80px;
text-align: center;
font:normal bold 20px "SimHei";
padding: 3px 3px;
margin: 3px auto;
}
#footer{
width: 250px;
height: 60px;
padding: 3px 3px;
margin: 3px auto;
text-align: center;
}
#butn{
width:85px;
height:30px;
background-image: url(../图片/按钮.jpg);
font:normal bold 15px "SimHei";
}
</style>
</head>
<body>
<div id="main">
<div id="top">
<h1>Login</h1>
</div>
<div id="middle_top">
<span>Username:</span><br/>
<input type="text" name="user" ><br/>
</div>
<div id="middle_bottom">
<span>Password:</span><br/>
<input type="password" name="txtpwd"><br>
</div>
<div id="footer">
<input type="button" value="登录" id="butn"><br>
</div>
</div>
</body>
</html>
简易的登录界面
最新推荐文章于 2020-03-24 18:16:40 发布