简易的登录界面

<!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>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值