 GPT答： |
7i24.cn
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录系统</title>
<style type="text/css">
body {
background-color: #ccc;
}
.login-box {
width: 400px;
height: 300px;
background-image: linear-gradient(#FEB9B9, #FF7C8A);
box-shadow: 5px 10px;
margin: 150px auto;
padding: 10px;
border-radius: 8px;
}
h1 {
text-align: center;
font-size: 26px;
font-weight: bold;
}
p {
font-size: 16px;
}
.usrname {
width: 300px;
height: 30px;
margin-left: 10px;
margin-bottom: 20px;
}
.pwd {
width: 300px;
height: 30px;
margin-left: 10px;
margin-bottom: 20px;
}
.login_btn {
width: 350px;
height: 35px;
backgroud-color: #FEB9B9;
margin-top: 20px;
padding-left: 30px;
cursor: pointer;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
box-shadow: 0px 8px 15px rgba(0,0,0,0.6);
}
.login_btn:hover {
box-shadow: 0px 15px 20px rgba(0,0,0,0.4);
}
</style>
<script type="text/javascript">
//点击登录按钮，弹出“登录成功”的提示
function loginCheck() {
alert("登录成功！");
}
</script>
</head>
<body>
<div class="login-box">
<h1>登录系统</h1>
<p>用户名：<input class="usrname" type="text" name="username" placeholder="请输入用户名"></p>
<p>密 码：<input class="pwd" type="password" name="password" placeholder="请输入密码"></p>
<input class="login_btn" type="button" name="login_btn" value="登录" onclick="loginCheck()">
</div>
</body>
</html>
|
