php漂亮登录页面怎么做

在开发Web应用程序时，一个漂亮的登录页面能给用户留下深刻的第一印象，使用PHP作为后端语言，我们可以创建一个既美观又实用的登录页面，下面我将为大家详细介绍如何制作一个漂亮的PHP登录页面。

一、设计登录页面布局

我们需要设计登录页面的布局，一个简洁大方的布局能让用户更容易接受，登录页面包含以下元素：背景图、Logo、用户名和密码输入框、登录按钮、注册和忘记密码链接等。

1、选择合适的背景图和颜色搭配：背景图和颜色要符合应用的主题，不要过于花哨，以免分散用户注意力。

2、设计表单区域：表单区域应简洁明了，易于填写，可以使用HTML和CSS来实现。

二、编写HTML和CSS代码

以下是登录页面的基本HTML和CSS代码：

Markup

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        body {
            background: url('background.jpg') no-repeat center center;
            background-size: cover;
            font-family: Arial, sans-serif;
        }
        .login-container {
            width: 300px;
            padding: 40px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>登录</h2>
        <form action="login.php" method="post">
            <div class="form-group">
                <label for="username">用户名：</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">密码：</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <button type="submit">登录</button>
            </div>
        </form>
    </div>
</body>
</html>

三、编写PHP后端代码

我们需要编写PHP后端代码来处理用户登录请求，以下是login.php的基本代码：

PHP

<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydb";
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 获取用户输入的用户名和密码
$username = $_POST['username'];
$password = $_POST['password'];
// 验证用户名和密码
$sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    // 登录成功，跳转到主页
    header('Location: index.php');
} else {
    // 登录失败，返回登录页面
    echo "<script>alert('用户名或密码错误！');</script>";
    echo "<script>window.location.href='login.html';</script>";
}
$conn->close();
?>