html登录界面

恒刘软件

已于 2022-12-06 20:00:56 修改

阅读量327

点赞数

文章标签： java

于 2022-12-06 19:52:36 首次发布

本文链接：https://blog.csdn.net/weixin_67655617/article/details/128209144

版权

编写一个简单的登录界面。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>login</title>
    <style>
        body {
            background-image:url('img/1.PNG');
            background-size:cover;
            background-repeat:no-repeat;
            background-attachment:fixed;
        }
        .login {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -150px 0 0 -150px;
            width:300px;
            height:280px;
        }
        div.transbox
        {
            width:370px;
            height:370px;
            margin:160px auto;
            background-color:#ffffff;
            border:2px solid green;
            opacity:0.6;
            filter:alpha(opacity=60);
        }
        input[type=button], input[type=submit], input[type=reset] {
            background-color:mediumaquamarine;
            border: none;
            padding: 8px 8px;
            text-decoration: none;
            margin: 4px 2px;
            cursor: pointer;
			border: 20px green ;
            border-radius: 10px;
            color:black;
        }
        input[type=text],input[type=password] {
            width: 100%;
            padding: 8px 10px;
            margin: 8px 0;
			margin-right: 20px;
            box-sizing: border-box;
            border: 10px solid rosybrown;
            border-radius: 20px;
        }
        select {
            border-right: 10px;
            width: 50%;
            padding: 8px 8px;
            border: none;
            border: 6px solid rosybrown;
            border-radius: 15px;
            background-color: #f1f1f1;
        }
        .login h2 { color:blue; text-shadow: 1px 2px 5px wheat; letter-spacing:3px;text-align:center;margin-bottom:16px; }
	   .login  h3 {color:blueviolet;text-shadow: blueviolet; text-align: center;margin-bottom:10px;}
	</style>
</head>
<body>
<script type="text/javascript">
    function jump(){
        window.location.href="B_register.jsp";
    }
</script>
<center>
    <div class="transbox">
        <div class="login">
            <form action="B_loginservlet">
                <h2>登录</h2>
                <table>
                    <tr>
                        <td>账号:</td>
                        <td><input type="text" name="name"></td>
                    </tr>
                    <tr>
                        <td>密码:</td>
                        <td><input type="password" name="pass"></td>
                    </tr>
                    <tr>
                        <td>身份:</td>
                        <td><select name="sf">
                            <option value="user">用户</option>
                            <option value="administrator">管理员</option>
                        </select></td>
                    </tr>
                    <tr>
                    <td><input type="submit" value="登录">&nbsp;
                       <td><input type="button" value="注册" onclick= "javascrtpt:jump()"></td>
                 <h3>@wbb</h3> 
	             </tr>
				 
			   
                </table>
            </form>
        </div>
    </div>
</center>
</body>
</html>