2025web寒假作业二
一、整体功能概述
该代码构建了一个简单的后台管理系统界面，主要包含左侧导航栏和右侧内容区域。左侧导航栏有 logo、管理员头像、导航菜单和安全退出按钮；右侧内容区域包括页头、用户信息管理内容（含搜索框和用户数据表格）以及页脚。
二、demo01后台管理系统.html
1. 文档结构
-
采用标准的 HTML5 文档结构，包含
<!DOCTYPE html>声明。 -
头部（
<head>）部分设置了字符编码、视口信息，引入了外部 CSS 文件。 -
主体（
<body>）部分包含一个大容器<div id="container">，将页面分为左右两部分。
2. 左侧导航区域
-
logo 部分：通过
<div class="logo">展示系统 logo 图片和名称。 -
管理员信息：使用
<div class="header-img">显示管理员头像和姓名。 -
导航菜单：利用无序列表
<ul class="nav">列出多个导航项，如首页、系统设置等。 -
安全退出：
<div class="exit">提供安全退出功能入口。
3. 右侧内容区域
-
页头：包含 “收起菜单” 按钮、系统名称和管理员姓名。
-
内容主体：
-
标题：<h2> 显示 “用户信息管理”。
-
搜索框：提供账号和邮箱输入框以及搜索按钮。
-
数据表格：通过
<div class="tb-title">和多个<div class="tb-content">展示用户数据，包含 ID、账号、密码等列。
-
-
页脚：显示版权信息。
4. 存在的问题
- “收起菜单” 使用的是
<span>标签，无法实现交互功能，应改为<label>标签并结合隐藏的<input type="checkbox">来实现菜单收起展开效果。 search-box中的lable拼写错误，应为label。
三、CSS 文件分析
1. style.css
- 全局样式设置：使用通配符
*将所有元素的外边距和内边距设置为 0，并采用box-sizing: border-box盒模型，确保元素的宽度和高度包含内边距和边框。 html和body元素：将高度和宽度设置为 100%，为页面布局提供基础。
2. demo01.css
- 布局相关：
#container：使用display: flex实现左右布局，宽度为 100%，高度为视口高度。.left和.right：分别设置左侧导航栏和右侧内容区域的样式，左侧固定宽度 200px，右侧使用flex: 1占据剩余空间。
- 样式细节：
- 各个部分（如 logo、导航项、搜索框、表格等）都有详细的样式设置，包括背景颜色、字体大小、边框等。
- 部分元素（如导航项、操作按钮）设置了
:hover伪类，实现鼠标悬停效果。
代码效果：
相关文章：
2025web寒假作业二
一、整体功能概述 该代码构建了一个简单的后台管理系统界面，主要包含左侧导航栏和右侧内容区域。左侧导航栏有 logo、管理员头像、导航菜单和安全退出按钮；右侧内容区域包括页头、用户信息管理内容（含搜索框和用户数据表格）以及页…...
三、OSG学习笔记-应用基础
前一章节：二、OSG学习笔记-入门开发-CSDN博客https://blog.csdn.net/weixin_36323170/article/details/145513874 一、 OsgGA: 界面事件处理空间，处理操作各种操作器的最大名字空间； GUIEventHandler: ui 事件操作类 注意：在启…...
CTFHub-RCE系列wp
目录标题 引言什么是RCE漏洞 eval执行文件包含文件包含php://input读取源代码远程包含 命令注入无过滤过滤cat过滤空格过滤目录分隔符过滤运算符综合过滤练习 引言 题目共有如下类型 什么是RCE漏洞 RCE漏洞，全称是Remote Code Execution漏洞，翻译成中文…...
Linux ping不通百度但浏览器可以打开百度的的解决方法
问题描述：使用ping命令ping www.baidu.com,提示的地址为ipv6地址，但该地址ping不通，但使用浏览器直接打开百度网址可以打开。 问题可能的原因：（1）虚拟机上ipv6为自动模式，影响了ipv4寻址&#…...
Redis中的某一热点数据缓存过期了，此时有大量请求访问怎么办?
1、提前设置热点数据永不过期 2、分布式中用redis分布式锁（锁可以在多个 JVM 实例之间协调）、单体中用synchronized（锁只在同一个 JVM 内有效） 编写服务类 import com.redisson.api.RLock; import com.redisson.api.RedissonCli…...
低成本+高性能+超灵活！Deepseek 671B+Milvus重新定义知识库搭建
“老板说，这个项目得上Deepseek,还得再做个知识库...” 还有哪个开发者，最近没听到这样的抱怨？ Deepseek爆火，推理端的智能提速，算力成本急剧下降，让不少原本不想用大模型，用不起大模型的企业&a…...
TCP服务器与客户端搭建
一、思维导图 二、给代码添加链表 【server.c】 #include <stdio.h> #include <sys/socket.h> #include <sys/types.h> #include <fcntl.h> #include <arpa/inet.h> #include <unistd.h> #include <stdlib.h> #include <string.…...
PDF 文件的安全功能概述
由于安全问题始终存在，我们希望重点介绍 PDF 文件格式提供的一些安全功能。如果您希望控制或限制用户可以执行的操作，这些功能可以启用。本文将介绍可以阻止哪些类型的操作，以及可以实施哪些不同的身份验证技术来提高 PDF 的安全性。 可以控制…...
在Linux上部署Jenkins的详细指南
引言 在当今快速迭代的软件开发环境中，持续集成和持续交付（CI/CD）变得越来越重要。Jenkins作为一个开源自动化服务器，能够帮助开发者更高效地进行代码集成、测试和部署。本文将详细介绍如何在Linux系统上安装和配置Jenkins。 准…...
碳纤维复合材料制造的六西格玛管理实践：破解高端制造良率困局的实战密码
碳纤维复合材料制造的六西格玛管理实践：破解高端制造良率困局的实战密码 在全球碳中和与高端制造升级的双重驱动下，碳纤维复合材料行业正经历前爆发式增长。航空航天、新能源汽车、风电叶片等领域对碳纤维产品的性能稳定性提出近乎苛刻的要求࿰…...
Day83：图形的绘制
Python 提供了多种绘图工具，其中最常用的是 Turtle（海龟绘图）和 Matplotlib（数据可视化）。今天，我们主要介绍 Turtle，它可以轻松绘制各种几何图形、艺术图案和动画。 1. Turtle 库简介 Turtle 是 Python 内置的绘图工具，主要用于教学、趣味绘画和简单图形的创建。 基…...
C# Dll嵌入到.exe
将dll属性作为 嵌入的资源 修改引用属性为不复制 增加dll识别来源 AppDomain.CurrentDomain.AssemblyResolve new ResolveEventHandler(CurrentDomain_AssemblyResolve);private static System.Reflection.Assembly CurrentDomain_AssemblyResolve(object sender, Reso…...
o3-mini、Gemini 2 Flash、Sonnet 3.5 与 DeepSeek 在 Cursor 上的对决
最新的 OpenAI 模型 o3-mini 已于 1 月 31 日（星期五）发布，并已在 Cursor 上架。不久后，Gemini 2 Flash 也会陆续登场。 上周，对 DeepSeek V3、DeepSeek R1 以及 Claude 3.5 Sonnet 做过类似测试。那次测试结果显示&am…...
如何在Vscode中接入Deepseek
一、获取Deepseek APIKEY 首先，登录Deepseek官网的开放平台：DeepSeek 选择API开放平台，然后登录Deepseek后台。 点击左侧菜单栏“API keys”，并创建API key。 需要注意的是，生成API key复制保存到本地，丢失…...
6 maven工具的使用、maven项目中使用日志
文章目录 前言一、maven：一款管理和构建java项目的工具1 基本概念2 maven的安装与配置（1）maven的安装（2）IDEA集成Maven配置当前项目工程设置 maven全局设置 （3）创建一个maven项目 3 pom.xml文件…...
Day82：创建图形界面（GUI）
在 Python 中，我们可以使用 Tkinter（标准 GUI 库）来创建图形用户界面（GUI）。Tkinter 提供了一系列工具和控件，使开发者可以轻松地创建窗口、按钮、输入框等界面组件。 1. Tkinter 简介 Tkinter 是 Python 内置的 GUI 库，使用它可以创建窗口应用程序，而无需安装额外的库…...
字节跳动大模型应用 Go 开发框架 —— Eino 实践
前言 开发基于大模型的软件应用，就像指挥一支足球队：组件是能力各异的队员，编排是灵活多变的战术，数据是流转的足球。Eino 是字节跳动开源的大模型应用开发框架，拥有稳定的内核，灵活的扩展性，完…...
【Golang学习之旅】Go + MySQL 数据库操作详解
文章目录 前言1. GORM简介2. 安装GORM并连接MySQL2.1 安装GORM和MySQL驱动2.2 连接MySQL 3. GORM数据模型（Model）3.1 定义User结构体3.2 自动迁移（AutoMigrate） 4. GORM CRUD 操作4.1 插入数据（Create）4.2 …...
Http 的响应码有哪些？ 分别代表的是什么？
HTTP 状态码分为多个类别，下面是常见的 HTTP 状态码及其含义，包括 3xx 重定向状态码的详细区别： 📌 HTTP 状态码分类 分类状态码范围说明1xx100-199信息性状态码，表示请求已被接收，继续处理2xx200-299成功…...
深入解析 Linux 系统中 Cron 定时任务的配置与管理
在 Linux 和类 Unix 系统中，cron 是一个非常强大的工具，用于定时执行各种任务，例如自动备份、定时运行脚本和定期清理日志文件。通过合理配置 cron，你可以让很多系统维护任务自动化，从而减轻日常管理的压力。而 cronta…...
关于 IoT DC3 中设备（Device）的理解
在物联网系统中，设备（Device）是一个非常宽泛的概念，它可以指代任何能够接入系统并进行数据交互的实体。包括但不限于手机、电脑、服务器、网关、硬件设备甚至是某些软件程序等所有能接入到该平台的媒介。 内容 定义 目的 示例 …...
golang 版 E签宝请求签名鉴权方式
E签宝 请求签名鉴权方式说明 package utilsimport ("crypto/hmac""crypto/md5""crypto/sha256""encoding/base64""fmt""github.com/gogf/gf/v2/util/gconv" )type Sign struct {secret string }func NewSign(sec…...
QTreeView和QTableView单元格添加超链接
QTreeView和QTableView单元格添加超链接的方法类似，本文仅以QTreeView为例。 在QTableView仿Excel表头排序和筛选中已经实现了超链接的添加，但是需要借助delegate，这里介绍一种更简单的方式，无需借助delegate。 一.效果 二.实现 QHTreeView.h #ifndef QHTREEVIEW_H #def…...
【WB 深度学习实验管理】使用 PyTorch Lightning 实现高效的图像分类实验跟踪
本文使用到的 Jupyter Notebook 可在GitHub仓库002文件夹找到，别忘了给仓库点个小心心~~~ https://github.com/LFF8888/FF-Studio-Resources 在机器学习项目中，实验跟踪和结果可视化是至关重要的环节。无论是调整超参数、优化模型架构，还是监…...
SSM开发(十一) mybatis关联关系多表查询(嵌套查询，举例说明)
目录 一、背景介绍 二、一对一查询(嵌套查询) 三、一对多查询(嵌套查询) 四、嵌套查询效率评估 注：关联查询则是指在一个查询中涉及到多个表的联合查询 一、背景介绍 当对数据库的操作涉及到多张表，这在面向对象语言如Java中就涉及到了对象与对象之间的关联关系。针对多…...
The Simulation技术浅析（六）：机器学习
机器学习（Machine Learning）是模拟技术（The Simulation）的重要组成部分，通过从数据中自动学习规律和模式，机器学习能够提升模拟系统的智能化水平，增强其预测、决策和优化能力。 一、监督学习（Supervised Learning） 1. 基本原理 监督学习是指利用标注数据（即输入数…...
apache-poi导出excel数据
excel导出 自动设置宽度，设置标题框，设置数据边框。 excel导出 添加依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>5.2.2</version></dependency>…...
唯一值校验的实现思路(续)
本文接着上一篇文章《唯一值校验的实现思路》，在后端实现唯一值校验。用代码实现。 /*** checkUniqueException[唯一值校验]** param entity 新增或编辑的学生实体* param insert 是否新增，如果是传入true；反之传入false* return void* date…...
ffmpeg基本用法
一、用法 ffmpeg [options] [[infile options] -i infile]... {[outfile options] outfile}... 说明： global options：全局选项，应用于整个 FFmpeg 进程，它们通常不受输入或输出部分的限制。 infile options：输入选…...
MYSQL第四次
目录 题目分析 代码实现 一、修改 Student 表中年龄（sage）字段属性，数据类型由 int 改变为 smallint 二、为 Course 表中 Cno 字段设置索引，并查看索引 三、为 SC 表建立按学号（sno）和课程号ÿ…...