📅 最后修改于: 2023-12-03 15:31:10.166000 🧑 作者: Mango
在网站开发中，登陆页面是非常重要的一个页面。在这篇介绍中，我们将使用 HTML 和 CSS 来创建一个简单的登陆页面。
首先，我们需要创建 HTML 文件。下面是一个基本的 HTML 登陆页面模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆页面</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="login">
<h1>登陆</h1>
<form>
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
我们创建了一个包含一个 div 元素的 HTML 页面，其中包含了一个标题和一个表单，其中有一个文本框用于输入用户名，一个密码框用于输入密码，以及一个“登录”按钮。
接下来，我们需要创建 CSS 文件来美化我们的登陆页面。下面是一个基本的 CSS 样式文件：
body {
background-color: #f2f2f2;
}
.login {
background-color: #fff;
border: 1px solid #ccc;
margin: 20px auto;
padding: 20px;
max-width: 400px;
}
h1 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
}
input[type="text"], input[type="password"], input[type="submit"] {
padding: 10px;
margin: 5px 0;
border-radius: 5px;
border: none;
box-shadow: inset 1px 1px 3px rgba(0,0,0,.1);
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
cursor: pointer;
}
我们使用了某些 CSS 属性，如背景颜色、边框、内边距等来美化页面。
现在，我们已经创建了一个简单的登陆页面。当用户访问这个页面时，他们将看到一个包含用户名和密码输入框的表单，以及一个登录按钮。这个页面可以作为您下一个网站的登陆页面的基础和灵感。