LeCMS
ClassCMS
Fastadmin
iCMS
PbootCMS
PHPCMS
易优CMS
YzmCMS
讯睿CMS
极致CMS
Wordpress
HkCMS
YznCMS
WellCMS
ThinkCMF
帝国CMS
SIYUCMS使用 PHP、jQuery 和 CSS 制作一个仿 QQ 登录窗口的头像登录界面，可以分为以下几个步骤。我们将实现一个简单的登录窗口，用户可以选择头像并输入用户名和密码进行登录。
1. 项目结构
首先，创建以下文件结构：
/avatar-login/ ├── index.html # 前端页面 ├── style.css # 样式文件 ├── script.js # jQuery 交互逻辑 ├── login.php # 后端登录处理 └── avatars/ # 存放头像图片
2. HTML 结构 (index.html)
创建一个简单的登录窗口，包含头像选择、用户名和密码输入框。
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>仿QQ登录窗口</title> <link rel="stylesheet" href="style.css"></head><body> <div class="login-container"> <div class="avatar-selector"> <img src="avatars/avatar1.png" alt="头像1" class="avatar" data-avatar="avatar1.png"> <img src="avatars/avatar2.png" alt="头像2" class="avatar" data-avatar="avatar2.png"> <img src="avatars/avatar3.png" alt="头像3" class="avatar" data-avatar="avatar3.png"> </div> <form id="login-form" action="login.php" method="POST"> <input type="hidden" id="selected-avatar" name="avatar" value="avatar1.png"> <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> <button type="submit">登录</button> </form> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script.js"></script></body></html>
3. CSS 样式 (style.css)
为登录窗口添加样式，使其看起来更美观。
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;}.login-container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;}.avatar-selector {
display: flex;
justify-content: space-around;
margin-bottom: 20px;}.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;}.avatar.selected {
border-color: #007bff;}.form-group {
margin-bottom: 15px;
text-align: left;}.form-group label {
display: block;
margin-bottom: 5px;}.form-group input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;}button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;}button:hover {
background-color: #0056b3;}4. jQuery 交互 (script.js)
使用 jQuery 实现头像选择功能，并将选中的头像值传递给隐藏的表单字段。
$(document).ready(function () {
// 头像选择逻辑
$('.avatar').click(function () {
$('.avatar').removeClass('selected'); // 移除其他头像的选中状态
$(this).addClass('selected'); // 为当前头像添加选中状态
var selectedAvatar = $(this).data('avatar'); // 获取选中的头像文件名
$('#selected-avatar').val(selectedAvatar); // 更新隐藏字段的值
});});5. 后端登录处理 (login.php)
在服务器端处理登录请求，验证用户名和密码，并返回结果。
<?php// 模拟用户数据$users = [
'user1' => ['password' => '123456', 'avatar' => 'avatar1.png'],
'user2' => ['password' => '123456', 'avatar' => 'avatar2.png'],
'user3' => ['password' => '123456', 'avatar' => 'avatar3.png'],];// 获取表单数据$username = $_POST['username'];$password = $_POST['password'];$avatar = $_POST['avatar'];// 验证用户名和密码if (isset($users[$username]) && $users[$username]['password'] === $password) {
echo json_encode([
'status' => 'success',
'message' => '登录成功！',
'avatar' => $avatar,
]);} else {
echo json_encode([
'status' => 'error',
'message' => '用户名或密码错误！',
]);}?>6. 头像图片
在 avatars/ 目录下放置几张头像图片，例如 avatar1.png、avatar2.png、avatar3.png。
7. 运行效果
打开
index.html，用户可以选择头像并输入用户名和密码。点击登录后，表单数据会提交到
login.php。后端验证用户名和密码，并返回登录结果。
8. 进一步优化
添加 AJAX 提交表单，避免页面刷新。
使用更复杂的用户验证机制（如数据库验证）。
增加表单验证（如用户名和密码长度限制）。
美化界面，添加动画效果。
通过以上步骤，你可以实现一个简单的仿 QQ 登录窗口，支持头像选择和登录验证。
希望以上内容对你有所帮助！如果还有其他问题，请随时提问。 各类知识收集 拥有多年CMS企业建站经验，对 iCMS， LeCMS， ClassCMS， Fastadmin， PbootCMS， PHPCMS， 易优CMS， YzmCMS， 讯睿CMS， 极致CMS， Wordpress， HkCMS， YznCMS， WellCMS， ThinkCMF， 等各类cms的相互转化，程序开发，网站制作，bug修复，程序杀毒，插件定制都可以提供最佳解决方案。
未经允许不得转载：Str Tom工作室 » PHP+jquery+CSS制作头像登录窗（仿QQ登陆）
