当前位置：首页 > news >正文

后台管理系统网页开发

news 2026/5/17 6:51:54

CSS样式代码

/* 后台管理系统样式文件 */
#container{
width:100%;
height:100%;
/* background-color:antiquewhite;*/
display:flex;}
/* 左侧导航区域:宽度300px*/
.left{
width:300px;
height: 100%;
background-color:#203453;
display:flex;
flex-direction:column;
justify-content:space-between;}.left > div:nth-of-type(1){
display:flex;
flex-direction:column;
align-items:center;
gap: 30px;}.left .logo{
width: 100%;
height:50px;background-color:white;
display: flex;
flex-direction:row;
justify-content:center;
align-items:center;
gap:10px;}.logo img{width:55px;height:35px;
}.logo span{font-size: 20px;font-weight: 600;letter-spacing: 3px;/* 字母间距：3px；*/
}.left .header-img{width: 100%;color: white;display: flex;flex-direction: column;gap:10px;justify-content: center;align-items: center;
}
.header-img img{width:100px;height: 100px;border-radius:50%;
}.left .nav{width: 100%;list-style:none;
}
.nav div:nth-of-type(1),
.nav div:nth-of-type(2),
.nav div:nth-of-type(3),
.nav div:nth-of-type(4),
.nav div:nth-of-type(5),
.nav div:nth-of-type(6){display: flex;/* 样式修改主轴方向 */flex-direction:row;justify-items: center;align-items:center;}
.nav div,
.exit{
width:100%;
height:50px;
font-size:18px;
color:white;
/* 鼠标显示手型 */
cursor:pointer;
/* 文本居中 */
line-height: 50px;
text-align: center;
}
.nav div:hover,
.exit:hover{
background-color:white;
color:#203453;
font-weight:600px;
}
.left .exit{
height:50px;
width:100%;
}/* 右侧内容区域：宽度-弹性盒子剩余所有宽度(flex:1)-------------------------- */
.right{height:100%;flex: 1;background-color:#fff;display:flex;flex-direction: column;
}
.right .header,
.right .footer{height:50px;color:#333;background-color: #fff;}
.right .header{border-bottom:solid 1px #ccc;display:flex;justify-content: space-between;align-items: center;padding-left:20px;padding-right:20px;}
.header span:nth-of-type(1){display: inline-block;width: 100px;height:30px;background-color:#eee;border-radius:8px;line-height: 30px;text-align:center;font-size:14px;cursor: pointer;}
.header span:nth-of-type(2){font-size:20px;font-weight:600;}.right .footer{border-top: solid 1px #ccc;font-size:12px;color:#aaa;line-height: 50px;text-align:center;}.main{flex:1;padding:10px;}.main .content{background-color:aliceblue;height:100%;width:100%;border-radius:10px;padding:10px;}

html代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后台管理系统首页</title><!-- 引入外部css样式文件 -->
<link rel="stylesheet" href="./CSS/style.css">
<link rel="stylesheet" href="./CSS/xitong.css">
</head>
<body><!-- 包含所有内容的容器 -->
<div id="container"><!-- 左侧内容区域 --><div class="left"><!-- 上侧内容 --><div><!-- logo --><div class="logo"><img src="./images/logo.png" ><span>OPENLAB管理系统</span></div><!-- 头像 --><div class="header-img"><img src="./images/qingque.jpg"><h2>管理员：DUSTCELL</h2></div><!-- 导航 --><div class="nav"><div><img src="./images/shouye.png" height="30px" width="30px">首页</div><div><img src="./images/shezhi.png"  height="30px" width="30px">系统设置</div><div><img src="./images/guanliyuan_jiaoseguanli.png"  height="30px" width="30px">用户管理</div><div><img src="./images/guanli.png"  height="30px" width="30px">店铺管理</div><div><img src="./images/guanli_1.png"  height="30px" width="30px">订单管理</div><div><img src="./images/houtaiguanli-jifenguanli.png"  height="30px" width="30px">积分管理</div></div><!-- img : 图片标签名称，主要网页中显示图片src属性：显示图片的路径（网址、本地路径、图片数据）width属性：设置图片宽度，一般推荐以像素为单位height属性：设置图片高度，一般推荐以像素为放；两个属性都设置-图片拉伸alt属性：当图片无法正常显示时替代的文字描述--></div><!-- 下侧内容：安全退出 --><div class="exit"><span>安全退出</span></div>
</div><!-- 右侧内容区域 -->
<div class="right"><!-- 页头 --><div class="header"><span>收起菜单</span><span>OPENLAB管理系统</span><span>管理员：曼妮</span></div>
<!-- 内容 --><div class="main"><div class="content"><!-- 内容部分 --></div></div><!-- 页脚 --><div class="footer"><span>版权所有，翻版必究</span></div></div>
</div>
</body>
</html>

效果展示

后台管理系统网页开发

CSS样式代码 /* 后台管理系统样式文件 */ #container{ width:100%; height:100%; /* background-color:antiquewhite;*/ display:flex;} /* 左侧导航区域:宽度300px*/ .left{ width:300px; height: 100%; background-color:#203453; display:flex; flex-direction:column; jus…...

编程日记 2025/2/10 4:20:03

使用一个大语言模型对另一个大语言模型进行“调教”

使用一个大语言模型对另一个大语言模型进行“调教”（通常称为微调或适配），是一种常见的技术手段，用于让目标模型更好地适应特定的任务、领域或风格。以下是基于搜索结果整理的详细步骤和方法： 1.准备工作安装必要的…...

编程日记 2025/2/10 4:18:01

golang使用sqlite3，开启wal模式，并发读写

因为sqlite是基于文件的，所以默认情况下，sqlite是不支持并发读写的，即写操作会阻塞其他操作，同时sqlite也很容易就产生死锁。但是作为一个使用广泛的离线数据库，从sqlite3.7.0版本开始（SQLite Release 3.…...

编程日记 2025/2/10 4:13:56

如何利用maven更优雅的打包

最近在客户现场部署项目，有两套环境，无法连接互联网，两套环境之间也是完全隔离，于是问题就来了，每次都要远程到公司电脑改完代码，打包，通过网盘（如果没有会员，上传下载慢…...

编程日记 2025/2/10 4:06:48

音频进阶学习十二——Z变换一（Z变换、收敛域、性质与定理）

文章目录前言一、Z变换1.Z变换的作用2.Z变换公式3.Z的状态表示1） r 1 r1 r12） 0 < r < 1 0<r<1 0<r<13） r > 1 r>1 r>1 4.关于Z的解释二、收敛域1.收敛域的定义2.收敛域的表示方式3.ROC的分析1）当 …...

编程日记 2025/2/10 4:05:46

cursor指令工具

Cursor 工具使用指南与实例工具概览 Cursor 提供了一系列强大的工具来帮助开发者提高工作效率。本指南将通过具体实例来展示这些工具的使用方法。 1. 目录文件操作 1.1 查看目录内容 (list_dir) 使用 list_dir 命令可以查看指定目录下的文件结构：示例： list_dir log…...

编程日记 2025/2/10 4:04:43

MySQL 主从读写分离实现方案（一）—MariaDB MaxScale实现mysql8读写分离

一：MaxScale 是干什么的？? MaxScale是maridb开发的一个mysql数据中间件，其配置简单，能够实现读写分离，并且可以根据主从状态实现写库的自动切换，对多个从服务器能实现负载均衡。二：MaxScale …...

编程日记 2025/2/10 4:02:40

阿里云 | DeepSeek人工智能大模型安装部署

ModelScope是阿里云人工智能大模型开源社区 ModelScope网络链接地址 https://www.modelscope.cn DeepSeek模型库网络链接地址 https://www.modelscope.cn/organization/deepseek-ai 如上所示，在阿里云人工智能大模型开源社区ModelScope中，使用阿里云…...

编程日记 2025/2/10 4:01:38

LLAMA-Factory安装教程（解决报错cannot allocate memory in static TLS block的问题）

步骤一： 下载基础镜像 # 配置docker DNS vi /etc/docker/daemon.json # daemon.json文件中 { "insecure-registries": ["https://swr.cn-east-317.qdrgznjszx.com"], "registry-mirrors": ["https://docker.mirrors.ustc.edu.c…...

编程日记 2025/2/10 3:58:36

STM32 CUBE Can调试

STM32 CUBE Can调试 1、CAN配置2、时钟配置3、手动添加4、回调函数5、启动函数和发送函数6、使用方法(采用消息队列来做缓存)7、数据不多在发送函数中获取空邮箱发送，否则循环等待空邮箱 1、CAN配置 2、时钟配置 3、手动添加需要注意的是STM32CUBE配置的代码需要再…...

编程日记 2025/2/10 3:53:31

MySQL数据存储- 索引组织表

索引组织表前言数据存储堆表索引组织表二级索引二级索引的性能评估🔹为什么 idx_name 的性能开销最大？🔹 为什么 idx_last_modify_date 更新频繁会影响性能？分析二级索引性能表格为什么主键应该“紧凑且顺序”？二级索…...

编程日记 2025/2/10 3:52:31

基于STM32设计的仓库环境监测与预警系统

目录项目开发背景设计实现的功能项目硬件模块组成设计思路系统功能总结使用的模块的技术详情介绍总结 1. 项目开发背景随着工业化和现代化的进程，尤其是在制造业、食品业、医药业等行业，仓库环境的监控和管理成为了至关重要的一环。尤其是在存储易腐…...

编程日记 2025/2/10 3:51:29

VSCode便捷开发

一、常用插件 Vue 3 Snippets、Vetur、Vue - Official 二、常用开发者工具三、Vue中使用Element-UI 安装步骤： 1、在VSCode的终端执行如下指令： npm i element-ui -S 2、在main.js中全局引入： import Vue from vue; import ElementUI from …...

编程日记 2025/2/10 3:50:27

理解 Maven 的 pom.xml 文件

pom.xml 是 Maven 项目的核心文件，它是项目构建、依赖管理、插件配置和项目元数据的主要地方。通过 pom.xml 文件，Maven 知道如何构建项目、下载依赖库、执行测试等任务。每个 Maven 项目都必须包含一个 pom.xml 文件。本文将详细讲解 pom.xml 文件的结构…...

编程日记 2025/2/10 3:47:25

docker数据持久化的意义

Docker 数据持久化是指在 Docker 容器中保存的数据不会因为容器的停止、删除或重启而丢失。Docker 容器本身是临时性的，默认情况下，容器内的文件系统是临时的，容器停止或删除后，其中的数据也会随之丢失。为了确保重要数据&#xf…...

编程日记 2025/2/10 3:46:22

opentelemetry-collector 配置elasticsearch

一、修改otelcol-config.yaml receivers:otlp:protocols:grpc:endpoint: 0.0.0.0:4317http:endpoint: 0.0.0.0:4318 exporters:debug:verbosity: detailedotlp/jaeger: # Jaeger supports OTLP directlyendpoint: 192.168.31.161:4317tls:insecure: trueotlphttp/prometheus: …...

编程日记 2025/2/10 3:44:18

ASP.NET Core JWT Version

目录 JWT缺点方案实现 Program.cs IdentityHelper.cs Controller NotCheckJWTVersionAttribute.cs JWTVersionCheckkFilter.cs 优化 JWT缺点到期前，令牌无法被提前撤回。什么情况下需要撤回？用户被删除了、禁用了；令牌被盗用了&…...

编程日记 2025/2/10 3:43:17

【ArcGIS】R语言空间分析、模拟预测与可视化技术

R语言在空间数据挖掘中具有广泛的应用，以下是一些关键内容和常用包的介绍： R语言空间数据挖掘的关键技术空间数据类型矢量数据：包括点（Point）、线（Line）、面（Polygon）等…...

编程日记 2025/2/10 3:39:12

日常知识点之面试后反思遗留问题汇总

梳理一下最近接触到的几个知识点： 1：突然问到端口复用 （SO_REUSEADDR） 端口复用一般用在服务端重启时，套接字处于time_wait状态时，无法绑定该端口，导致无法启动问题。设置端口复用&#xff…...

编程日记 2025/2/10 3:37:10

链表(LinkedList) 1

上期内容我们讲述了顺序表，知道了顺序表的底层是一段连续的空间进行存储(数组)，在插入元素或者删除元素需要将顺序表中的元素整体移动，时间复杂度是O(n)，效率比较低。因此，在Java的集合结构中又引入了链表来解决这一问…...

编程日记 2025/2/10 3:32:06

AI原生产品管理：多智能体协作如何重塑产品开发工作流

1. 项目概述：当AI成为你的产品经理最近在GitHub上看到一个挺有意思的项目，叫NathanJCW/ai-native-pm-cortex。光看名字，你大概能猜到它想做什么——“AI原生的产品经理大脑”。这可不是一个简单的聊天机器人插件，它试图构建一个完…...

编程新知 2026/5/17 6:45:11

别再让用户等上传！用@ffmpeg/ffmpeg在浏览器里直接压缩视频（附ThinkPHP项目实战）

浏览器端视频压缩实战：基于FFmpeg.wasm与ThinkPHP的高效集成方案引言在当今内容为王的互联网时代，视频已成为用户生成内容（UGC）的核心载体。然而，高清视频带来的大文件体积往往成为用户体验的瓶颈——上传等待时间长…...

编程新知 2026/5/17 6:19:18

嵌入式动画优化：DMA驱动位图渲染在SAMD21上的实现

1. 项目概述与核心思路如果你玩过嵌入式开发，尤其是想在小小的微控制器屏幕上搞点流畅的动画，大概率会被“卡顿”和“闪屏”折磨过。传统的逐像素绘制，在需要全屏更新时，CPU时间几乎全耗在了等待屏幕刷新上，用户体验大…...

编程新知 2026/5/17 4:40:31

基于声明式Web自动化框架Hydra的电商数据监控实战

1. 项目概述：一个被低估的自动化利器如果你经常需要处理一些重复性的、基于Web界面的操作，比如批量下载某个网站的资源、定时填写表单、或者监控网页内容的变化，那么你很可能已经厌倦了手动点击和等待。传统的脚本编写，尤其是涉及…...

编程新知 2026/5/17 3:58:25

Arm CoreLink PCK-600电源管理套件解析与应用实践

1. Arm CoreLink PCK-600电源控制套件概述在现代SoC设计中，电源管理已经成为一个关键的技术挑战。随着移动设备和物联网应用的普及，如何在保证性能的同时最大限度地降低功耗，成为芯片设计者面临的核心问题。Arm CoreLink PCK-600电源控制套件…...

编程新知 2026/5/17 3:21:54

Docker里CentOS镜像yum报错？别慌，教你两步搞定‘appstream’仓库元数据下载失败

Docker中CentOS镜像yum报错？三步根治‘appstream’仓库元数据下载失败当你兴致勃勃地在Docker中启动一个CentOS容器准备大展拳脚时，突然遭遇Failed to download metadata for repo appstream的红色报错，这种挫败感我深有体会。不同于物理机或…...

编程新知 2026/5/17 3:10:54

毫米波ISAC技术：车联网中的感知与通信融合方案

1. 毫米波ISAC系统概述在智能交通系统快速发展的今天，毫米波集成感知与通信(ISAC)技术正成为解决车联网(V2X)需求的关键方案。这项技术的核心创新点在于，它巧妙地将雷达感知和无线通信两大功能整合到同一硬件平台上，通过共享60GHz毫米波频段资…...

编程新知 2026/5/17 3:04:35

STM32F407最小系统板DIY全记录：从原理图绘制到PCB打样，手把手带你复刻一块自己的核心板

STM32F407最小系统板DIY全记录：从原理图绘制到PCB打样，手把手带你复刻一块自己的核心板 1. 项目规划与芯片选型在开始动手之前，我们需要明确几个关键问题：为什么要选择STM32F407？这个芯片适合哪些应用场景&#xff1f…...

编程新知 2026/5/17 3:00:24

告别串口线！用STM32CubeMX给STM32F103C8T6做个USB DFU Bootloader（Keil工程+完整代码）

STM32F103C8T6 USB DFU Bootloader实战：从实验室到产品的完整方案在嵌入式产品开发中，固件升级是一个绕不开的话题。想象一下，当你的设备已经部署在现场，却发现需要修复一个关键bug或增加新功能时，传统的JTAG/SWD调试…...

编程新知 2026/5/17 2:21:44

Figma设计稿自动化生成Markdown文档：从API调用到CI/CD集成

1. 项目概述：从设计稿到结构化文档的自动化桥梁如果你是一名前端开发者、产品经理或是UI设计师，一定经历过这样的场景：Figma里精心打磨的设计稿终于定稿，接下来需要将其转化为开发文档、产品需求文档或者设计规范文档。这个过程&a…...

编程新知 2026/5/17 1:35:18

相关文章：