html登录页面代码

admin 2023年11月22日 07:14 50 0

HTML登录页面代码

当我们谈论登录页面时，HTML是必不可少的基本要求，HTML是一种标记语言，用于构建网页的结构和内容，在这个教程中，我们将创建一个简单的登录页面，包括用户名和密码输入框以及登录按钮，我们将使用HTML和CSS来设计和美化页面。

一、创建HTML文件

我们需要创建一个HTML文件，在文本编辑器中创建一个新文件，并将以下代码复制粘贴到文件中：

<!DOCTYPE html>
<html>
<head>
    <title>登录页面</title>
    <style>
        /* 在这里添加CSS样式 */
    </style>
</head>
<body>
    <h1>登录页面</h1>
    <form action="/login" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <input type="submit" value="登录">
    </form>
</body>
</html>

二、添加CSS样式

为了美化页面，我们可以添加一些CSS样式，在``标签之间添加以下代码：

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    text-align: center;
    color: #333;
}

form {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin-bottom: 10px;
}

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}