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…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计 通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...
Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异 数据类型差异ÿ…...
AI病理诊断七剑下天山，医疗未来触手可及
一、病理诊断困局：刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"，医生需通过显微镜观察组织切片，在细胞迷宫中捕捉癌变信号。某省病理质控报告显示，基层医院误诊率达12%-15%，专家会诊…...
JVM 内存结构 详解
内存结构 运行时数据区： Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器： 线程私有，程序控制流的指示器，分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...