HTML简单登录界面的实现

article/2025/11/3 23:08:46

简单登录界面的实现：
在这里插入图片描述

直接一个实例上代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录</title><style>* {margin: 0;padding: 0;}body {background-color: rgb(235, 235, 235);}form {width: 400px;height: 320px;background-color: white;padding: 20px;box-sizing: border-box;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);/* 相对于现在所处位置的位移变化，x便偏移自己宽度的50%，y偏移自己高度的50% */}h2 {margin-bottom: 20px;text-align: center;}form input {width: 100%;height: 30px;display: block;margin-bottom: 20px;padding-left: 10px;box-sizing: border-box;}.mya {width: 100%;height: 30px;margin-bottom: 20x;}.mya a:nth-child(1) {float: left;}.mya a:nth-child(2) {float: right;}button {width: 100%;height: 40px;background-color: rgb(235, 235, 235);border: none;}button:active {box-shadow: 0 0 3px rgb(173, 172, 172);/* x偏移  y偏移  模糊值 颜色 */}</style>
</head><body><form action=""><h2>登录界面</h2><input id="username" type="text" placeholder="请输入账号"><input id="password" type="text" placeholder="请输入密码"><div class="mya"><a href="">忘记密码</a><a href="">注册</a></div><button id="login-btn" type="button">登录</button></form><!-- js引入方式：1、写在body标签里面，通过script包起来2、引入外部js文件  再通过script的src属性引入进来 --><script>// let 定义一个变量let username = document.getElementById('username')let password = document.getElementById('password')let loginBtn = document.getElementById('login-btn')// js里面不允许出现 - //一般的交互事件// onclick 点击事件// onmousemove  鼠标移入事件// onmouseout  鼠标移出事件// ondblclick  双击事件// onfocus  input框获取焦点事件// onblur  失焦事件loginBtn.onclick = function() {let usernamevalue = username.valuelet passwordvalue = password.value// console.log(usernamevalue, passwordvalue)// 便于检查的时候判断是否成功if (!usernamevalue) {return alert('请输入正确的用户名')//return 跳出当前函数，并且返回后面的值}console.log(usernamevalue, passwordvalue)}</script>
</body></html>