web前端对于后台界面的开发(综合运用)

news/2025/2/8 16:54:26 标签: 前端
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统首页</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/cssdemo.css">
</head>
<body>
    <div id="container">
        <div class="left">
            <div>
                <div class="logo">
                    <img src="./相对路径资料/OIP-C (3).jpg">
                    <span>管理系统</span>
                </div>
                <div class="header-img">
                    <img src="./相对路径资料/OIP-C (2).jpg" alt="">
                    <h2>管理员:twj</h2>
                </div>
                <ul class="nav">
                    <li>首页</li>
                    <li>系统设置</li>
                    <li>用户管理</li>
                    <li>店铺管理</li>
                    <li>订单管理</li>
                    <li>积分管理</li>
                </ul>
            </div>
            <div class="exit">
                <span>安全退出</span>
            </div>
        </div>
        <div class="right">
            <div class="right">
                <div class="header">
                    <span>收起菜单</span>
                    <span>管理系统</span>
                    <span>管理员:tan</span>
    </div>
    <div class="main">
        <div class="content">
            <h2>用户信息管理</h2>
            <div class="line"><p></p><div>~~~~~~~~~~~~~~~~~~~~~~~~~~~~</div><p></p></div>
                   <div class="search-box">
                       <div>
                           <label for="username">账号:</label>
                           <input type="text" placeholder="请输入账号">
                       </div>
                       <div>
                           <label for="email">邮箱:</label>
                           <input type="email" placeholder="请输入邮箱">
                       </div>
                       <div>
                           <button>搜索</button>
                       </div>
                   </div>
                   <div class="line"><p></p><div>~~~~~~~~~~~~~~~~~~~~~~~~~~~~</div><p></p></div>
                   <div class="tb-title">
                       <div>ID</div>
                       <div>账号</div>
                       <div>密码</div>
                       <div>头像</div>
                       <div>邮箱</div>
                       <div>状态</div>
                       <div>操作</div>
                   </div>
                   <div class="tb-content">
                       <div>001</div>
                       <div>twj</div>
                       <div>******</div>
                       <div><img src="./相对路径资料/OIP-C (5).jpg"></div>
                       <div>tan@qq.com</div>
                       <div><span class="s-active">启用</span></div>
                       <div>
                           <button class="edit">编辑</button>
                           <button class="disable">禁用</button>
                           <button class="delete">删除</button>
                       </div>
                      
                   </div>
                   <div class="tb-content">
                    <div>002</div>
                    <div>hjj</div>
                    <div>******</div>
                    <div><img src="./相对路径资料/OIP-C (5).jpg"></div>
                    <div>hjj@qq.com</div>
                    <div><span class="s-active">启用</span></div>
                    <div>
                        <button class="edit">编辑</button>
                        <button class="disable">禁用</button>
                        <button class="delete">删除</button>
                    </div>
               </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <span>页脚</span>
    </div>
 </div>
        </div>
    </div>
</body>
</html>

实现效果如下


http://www.niftyadmin.cn/n/5845116.html

相关文章

Docker安装pypiserver私服

Docker安装pypiserver私服 1 简介 Python开源包管理工具有pypiserver、devpi和Nexus等&#xff0c;pypiserver安装部署比较简单&#xff0c;性能也不错。 搭建pypiserver私服&#xff0c;可以自己构建镜像&#xff0c;也可以使用官网的docker镜像。 # Github地址 https://g…

Docker在安装时遇到的问题(第一部分)

一、在用docker-config-manager安装yum源时出现错误 [rootlocalhost ~]# yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo 已加载插件&#xff1a;fastestmirror, langpacks adding repo from: https://download.docker.com/linux/ce…

IEEE 802.3/802.2 | LLC / SNAP

注&#xff1a;本文为 “IEEE 802.3/802.2 | LLC / SNAP” 相关文章合辑。 未整理去重。 第三篇部分内容出自第二篇。 802.2 协议 haoay321 2010-01-28 20:52:02 LLC 协议 LLC&#xff08;Logic Link Control&#xff0c;逻辑链路控制&#xff09;是 IEEE 802.2 协议中规定…

Milvus 存储设计揭秘:从数据写入到 Segment 管理的全链路解析

作为一款云原生向量数据库&#xff0c;Milvus 的高效查询性能有赖于其独特的存储架构设计。然而&#xff0c;在实际使用过程中&#xff0c;许多社区用户常常会遇到以下问题&#xff1a; 为什么频繁调用 flush 后&#xff0c;查询速度会变慢&#xff1f; 数据删除后&#xff0c;…

音频文件格式——AAC、OGG和FLAC

3.AAC文件格式 3.1 封装格式解析 高级音频编码 &#xff08;Advanced Audio Coding&#xff09; 是一种用于有损数字音频压缩的音频编码标准。它被设计为 MP3 格式的继承者&#xff0c;在相同比特率下通常可以获得比 MP3 更高的音质。AAC有两种封装格式&#xff1a; ADIF&am…

免费windows pdf编辑工具Epdf

Epdf&#xff08;完全免费&#xff09; 作者&#xff1a;不染心 时间&#xff1a;2025/2/6 Github: https://github.com/dog-tired/Epdf Epdf Epdf 是一款使用 Rust 编写的 PDF 编辑器&#xff0c;目前仍在开发中。它提供了一系列实用的命令行选项&#xff0c;方便用户对 PDF …

Synchronized和ReentrantLock面试详解

前言 接下来为大家带来的是 Java 中的两个典型锁代表&#xff1a;Synchronized 和 ReentrantLock 的详解 面试题&#xff1a;谈一谈AQS 在说 ReentrantLock 时&#xff0c;有必要先了解一下 AQS&#xff0c;因为 ReentrantLock 就是基于 AQS 实现的 分析&#xff1a; 共享…

赛博算命之 ”梅花易数“ 的 “JAVA“ 实现 ——从玄学到科学的探索

hello~朋友们&#xff01;好久不见&#xff01; 今天给大家带来赛博算命第三期——梅花易数的java实现 赛博算命系列文章&#xff1a; 周易六十四卦 掐指一算——小六壬 更多优质文章&#xff1a;个人主页 JAVA系列&#xff1a;JAVA 大佬们互三哦~互三必回&#xff01;&#xf…