HTML大作业

1.登录效果图

代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django-Vue-Lyadmin Pro</title>
    <link rel ="stylesheet" href="style.css">
</head>
<body>
    <div class="sidebar">
        <img src="logo.png" alt="Logo">
        <h1 class="site-title">django-vue-lyadmin pro版</h1>
        <p class="platform-info">Vue3 + Django4.x 易于DIY+低代码开发平台</p>
        <p class="copyright">Copyright © 2022 django-vue-lyadmin All rights reserved.</p>
    </div>
    <div class="content">
        <div class="login-form">
            <h2>lyadmin后台管理系统</h2>
            <form id="loginForm">
                <input type="text" placeholder="请输入账号" required>
                <input type="password" placeholder="请输入密码" required>
                <div class="captcha">
                    <input type="text" placeholder="验证码" required>
                    <img src="captcha.png" alt="验证码">
                </div>
                <input type="submit" value="登录">
            </form>
            <div class="other-login">
                <img src="wechat.png" alt="微信登录">
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>


body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  height: 100vh;
}

.sidebar {
  background-image: url('./images/auth_banner.jpg'); /* 设置背景图片 */
  background-size: cover; /* 使背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中 */
  color: white;
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sidebar img {
  width: 100px;
  margin-bottom: 20px;
}

.sidebar h1.site-title{
  margin-top: -200px;
  font-size: 24px;
}

.sidebar p.platdorm-info{
  font-size: 14px;
  margin-top: 400px;
}
.sidebar p.copyright{
  font-size:14px ;
  margin-bottom: 200px;
}

.content {
  flex: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.login-form {
  background-color: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
}

.login-form h2 {
  margin: 0 0 20px;
  font-size: 18px;
  color: #2c2c2c;
}

.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.login-form input[type="submit"] {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.login-form input[type="submit"]:hover {
  background-color: #0056b3;
}

.login-form .captcha {
  display: flex;
  align-items: center;
}

.login-form .captcha img {
  margin-left: 10px;
}

.login-form .other-login {
  margin-top: 20px;
  text-align: center;
}

.login-form .other-login img {
  width: 24px;
  cursor: pointer;
}



document.getElementById('loginForm').addEventListener('submit', function(event) {
  event.preventDefault();
  alert('登录功能尚未实现');
});

2.导航菜单管理

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>Menu Management</title>
</head>
<body class="flex flex-col h-screen">
    <!-- 顶部导航栏 -->
    <nav class="bg-gray-800 text-white py-4 px-6">
        <div class="flex justify-between items-center">
            <div class="text-xl font-bold">django - vue - lyadmin - pro后台管理系统</div>
            <div class="space-x-4">
                <a href="#" class="hover:text-gray-300">更新日志</a>
                <a href="#" class="hover:text-gray-300">管理员</a>
            </div>
        </div>
    </nav>
    <!-- 主体内容 -->
    <div class="flex flex-1">
        <!-- 侧边栏 -->
        <div class="bg-gray-700 text-white w-64 py-6 px-4">
            <ul class="space-y-2">
                <li><a href="#" class="hover:text-gray-300">Dashboard</a></li>
                <li><a href="#" class="hover:text-gray-300">数据面板</a></li>
                <li><a href="#" class="hover:text-gray-300">管理员管理</a></li>
                <li><a href="#" class="hover:text-gray-300">用户管理</a></li>
                <li><a href="#" class="hover:text-gray-300">基础管理</a></li>
                <li><a href="#" class="hover:text-gray-300">商城管理</a></li>
                <li><a href="#" class="hover:text-gray-300">流程管理</a></li>
                <li><a href="#" class="hover:text-gray-300">功能大全</a></li>
                <li><a href="#" class="hover:text-gray-300">个人中心</a></li>
                <li><a href="#" class="hover:text-gray-300">系统监控</a></li>
                <li><a href="#" class="hover:text-gray-300">系统工具</a></li>
                <li><a href="#" class="hover:text-gray-300">系统管理</a></li>
                <li><a href="#" class="hover:text-gray-300">日志管理</a></li>
            </ul>
        </div>
        <!-- 主内容区 -->
        <div class="flex-1 p-6">
            <!-- 面包屑导航 -->
            <div class="mb-4">
                <a href="#" class="text-blue-600 hover:underline">Dashboard</a> / <a href="#" class="text-blue-600 hover:underline">数据面板</a> / <span class="text-gray-700">菜单管理</span>
            </div>
            <!-- 搜索过滤栏 -->
            <div class="flex space-x-4 mb-4">
                <input type="text" placeholder="关键词" class="border border-gray-300 p-2 rounded">
                <select class="border border-gray-300 p-2 rounded">
                    <option value="">侧边可见：请选择</option>
                    <option value="yes">是</option>
                    <option value="no">否</option>
                </select>
                <select class="border border-gray-300 p-2 rounded">
                    <option value="">状态：请选择</option>
                    <option value="active">启用</option>
                    <option value="inactive">禁用</option>
                </select>
                <button class="bg-blue-600 text-white p-2 rounded hover:bg-blue-700">查询</button>
                <button class="bg-gray-600 text-white p-2 rounded hover:bg-gray-700">重置</button>
                <button class="bg-green-600 text-white p-2 rounded hover:bg-green-700">+ 新增</button>
            </div>
            <!-- 表格 -->
            <table class="w-full border-collapse border border-gray-300">
                <thead>
                    <tr>
                        <th class="border border-gray-300 p-2">序号</th>
                        <th class="border border-gray-300 p-2">菜单名称</th>
                        <th class="border border-gray-300 p-2">图标</th>
                        <th class="border border-gray-300 p-2">排序</th>
                        <th class="border border-gray-300 p-2">路由地址</th>
                        <th class="border border-gray-300 p-2">权限</th>
                        <th class="border border-gray-300 p-2">侧边可见</th>
                        <th class="border border-gray-300 p-2">状态</th>
                        <th class="border border-gray-300 p-2">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="border border-gray-300 p-2">1</td>
                        <td class="border border-gray-300 p-2">Dashboard</td>
                        <td class="border border-gray-300 p-2">📈</td>
                        <td class="border border-gray-300 p-2">1</td>
                        <td class="border border-gray-300 p-2">analysis</td>
                        <td class="border border-gray-300 p-2">查询、单例</td>
                        <td class="border border-gray-300 p-2">是</td>
                        <td class="border border-gray-300 p-2">启用</td>
                        <td class="border border-gray-300 p-2">编辑  删除  按钮配置</td>
                    </tr>
                    <tr>
                      <td class="border border-gray-300 p-2">2</td>
                      <td class="border border-gray-300 p-2">数据面板</td>
                      <td class="border border-gray-300 p-2">📈</td>
                      <td class="border border-gray-300 p-2">2</td>
                      <td class="border border-gray-300 p-2">IyDataPanel</td>
                      <td class="border border-gray-300 p-2">编辑，查询、新增，单例</td>
                      <td class="border border-gray-300 p-2">是</td>
                      <td class="border border-gray-300 p-2">启用</td>
                      <td class="border border-gray-300 p-2">编辑  删除  按钮配置</td>
                  </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

3.个人中心

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>后台管理系统</title>
</head>
<body class="flex flex-col h-screen">
    <!-- 顶部导航栏 -->
    <nav class="bg-gray-800 text-white py-4 px-6">
        <div class="flex justify-between items-center">
            <div class="text-xl font-bold">django - vue - lyadmin - pro后台管理系统</div>
            <div class="space-x-4">
                <a href="#" class="hover:text-gray-300">更新日志</a>
                <a href="#" class="hover:text-gray-300">管理员</a>
            </div>
        </div>
    </nav>
<div class="flex flex-1">
    <!-- 侧边导航栏 -->
    <div class="bg-gray-700 text-white w-64 py-6 px-4">
        <ul class="space-y-2">
            <li><a href="#" class="hover:text-gray-300">Dashboard</a></li>
            <li><a href="#" class="hover:text-gray-300">数据面板</a></li>
            <li><a href="#" class="hover:text-gray-300">管理员管理</a></li>
            <li><a href="#" class="hover:text-gray-300">用户管理</a></li>
            <li><a href="#" class="hover:text-gray-300">基础管理</a></li>
            <li><a href="#" class="hover:text-gray-300">商城管理</a></li>
            <li><a href="#" class="hover:text-gray-300">流程管理</a></li>
            <li><a href="#" class="hover:text-gray-300">功能大全</a></li>
            <li><a href="#" class="hover:text-gray-300">个人中心</a></li>
            <li><a href="#" class="hover:text-gray-300">系统监控</a></li>
            <li><a href="#" class="hover:text-gray-300">系统工具</a></li>
            <li><a href="#" class="hover:text-gray-300">系统管理</a></li>
            <li><a href="#" class="hover:text-gray-300">日志管理</a></li>
        </ul>
    </div>

    <!-- 右侧主内容区域 -->
    <div class="ml-64 p-8 grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- 管理员信息区域 -->
        <div class="bg-white p-6 rounded-md shadow-md">
            <h2 class="text-2xl font-bold mb-4">管理员信息</h2>
            <p class="text-gray-700 mb-2">姓名：管理员</p>
            <p class="text-gray-700 mb-2">角色：管理员</p>
            <p class="text-gray-700 mb-2">权限：所有权限</p>
        </div>
        <!-- 个人信息编辑区域 -->
        <div class="bg-white p-6 rounded-md shadow-md">
            <h2 class="text-2xl font-bold mb-4">个人信息编辑</h2>
            <form>
                <div class="mb-4">
                    <label for="account" class="block text-gray-700 text-sm font-bold mb-2">账号</label>
                    <input type="text" id="account" value="admin" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" disabled>
                    <p class="text-xs text-gray-500">账号信息用于登录，系统不允许修改</p>
                </div>
                <div class="mb-4">
                    <label for="name" class="block text-gray-700 text-sm font-bold mb-2">姓名</label>
                    <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                </div>
                <div class="mb-4">
                    <label for="phone" class="block text-gray-700 text-sm font-bold mb-2">电话</label>
                    <input type="text" id="phone" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                </div>
                <div class="mb-4">
                    <label for="email" class="block text-gray-700 text-sm font-bold mb-2">邮箱</label>
                    <input type="text" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">性别</label>
                    <div class="flex space-x-4">
                        <div class="flex items-center">
                            <input type="radio" id="male" name="gender" value="male" class="form-radio text-blue-500">
                            <label for="male" class="ml-2 text-gray-700">男</label>
                        </div>
                        <div class="flex items-center">
                            <input type="radio" id="female" name="gender" value="female" class="form-radio text-blue-500">
                            <label for="female" class="ml-2 text-gray-700">女</label>
                        </div>
                    </div>
                </div>
                <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">保存</button>
            </form>
        </div>
    </div>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容