<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录框</title>
<style>
html,body {
height: 100%;
overflow: hidden;
margin: 0 auto;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-image: url('./one.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
div {
width: 60%;
height: 300px;
border: 1px solid #ccc;
border-radius: 3em;
overflow: hidden;
}
input {
display: block;
/*px是像素单位，em是文字大小单位,1em=1个字体的大小*/
height: 2em;
width: 50%;
font-size: 20px;
/*margin作用与块级元素，对于行内元素无效果*/
margin: 1em auto;
background-color: #ddd;
color: #fff;
border-radius: 3em;
border: 0;
outline: none;
}
input:focus {
width: 80%;
transition: all 2s;
}
h1 {
/*h1是块级元素，里面的内容是行内元素。*/
/*设置子元素的对齐方式*/
text-align: center;
line-height: 2em;
margin: 0 auto;
width: 3em;
}
div:hover h1 {
width: 100%;
color: #fff;
background-color: rgba(0,0,0,.5);
transition: all 0.54s;
}
</style>
</head>
<body>
<div>
<h1>login</h1>
<form method="get" action="https://aiowo.cn/login.php">
<input id="user" class="user" name="user" type="text">
<input id="pwd" class="pwd" name="pwd" type="password">
<input id="btn" type="submit" name="" value="提交">
</form>
</div>
<!-- 表单验证 -->
<!-- javascript 验证表单 -->
<script>
// 阻止表单默认跳转 绑定监听
document.getElementById('btn').addEventListener('click',
(e) => {
if(login()){
// 阻止默认跳转
e.preventDefault();
}
},false);
function login(){
if(user.value=='' || pwd.value==''){
alert('请输入完整信息');
return 1;
}
else {
return 0;
}
}
</script>
</body>
</html>
10-13
1207
1207
08-20
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
