<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登陆界面</title> <link rel="stylesheet" href="css/land.css"> </head> <body> <div id="form"> <table> <tr> <td>姓名：</td> <td><input type="text" placeholder="请输入姓名" name="username"></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="password" placeholder="请输入密码"></td> </tr> <tr> <td colspan="2"> <input type="button" value="登录" id="loginButton"> <input type="button" value="注册" id="registerButton"> </td> </tr> </table> </div> <script src="./js/land.js"></script> </body> </html>
CSS
body { margin: 0; padding: 0; width: 200px; height: 200px; margin-top: 13%; margin-left: 40%; user-select: none; background-size: 100% 200%; align-items: center; background-repeat:no-repeat; background-image:url('../img/d6435f87febd086aa951dbc84130135.jpg'); } .wanzi{ width: 100%; height: 100%; } #form { width: 300px; padding: 20px; font-weight: 900; border-radius: 10px; /* background-color: #ffffff; */ /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); */ } table { width: 100%; color: black; } td { padding: 10px; text-align: left; } input[type="text"], input[type="password"] { width: calc(100% - 20px); /* 计算宽度，减去边距 */ padding: 10px; margin: 5px 0; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; } input[type="button"] { width: 100%; padding: 10px; margin-top: 10px; background-color: aqua; /* 设置按钮背景颜色 */ /* 设置按钮文字颜色 */ border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; /* 添加过渡效果 */ } input[type="button"]:hover { background-color: pink; /* 设置鼠标悬停时的背景颜色 */ }
背景图是加藤惠!可惜你们看不到自己找吧!
