网页登录页面制作代码简单

制作一个简单的网页登录页面通常包括HTML、CSS和可能的JavaScript来增强功能。下面是一个简单的示例：

1. HTML 部分 (index.html)

html

2. CSS 部分 (styles.css)

css

body {

font-family: Arial, sans-serif;

background-color: #f0f0f0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

}

.login-container {

background-color: white;

padding: 40px;

border-radius: 8px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

width: 300px;

}

h2 {

text-align: center;

margin-bottom: 20px;

}

.input-group {

margin-bottom: 20px;

}

label {

display: block;

font-size: 14px;

margin-bottom: 5px;

}

input {

width: 100%;

padding: 10px;

font-size: 16px;

border: 1px solid #ccc;

border-radius: 4px;

}

button {

width: 100%;

padding: 10px;

background-color: #007BFF;

color: white;

border: none;

border-radius: 4px;

font-size: 16px;

cursor: pointer;

}

button:hover {

background-color: #0056b3;

}

.footer {

text-align: center;

margin-top: 20px;

}

.footer p {

font-size: 12px;

}

.footer a {

color: #007BFF;

text-decoration: none;

}

.footer a:hover {

text-decoration: underline;

}

3. 可选 JavaScript 部分 (script.js)

如果你希望添加一些简单的前端验证，比如检查用户名和密码是否为空，可以在页面中添加以下 JavaScript：

javascript

document.querySelector("form").addEventListener("submit", function(event) {

const username = document.getElementById("username").value;

const password = document.getElementById("password").value;

if (!username || !password) {

event.preventDefault(); // 阻止表单提交

alert("用户名和密码不能为空！");

}

});

总结：

- HTML: 创建页面结构，包含表单输入框和按钮。

- CSS: 用于页面的样式设计，使页面看起来更简洁、现代。

- JavaScript: (可选) 用于增加交互性，如表单验证等。

这只是一个简单的示例，你可以根据实际需要调整样式、功能和逻辑。