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

2025web寒假作业二

news 2026/1/2 1:16:26

一、整体功能概述

该代码构建了一个简单的后台管理系统界面，主要包含左侧导航栏和右侧内容区域。左侧导航栏有 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寒假作业二

一、整体功能概述 该代码构建了一个简单的后台管理系统界面&#xff0c;主要包含左侧导航栏和右侧内容区域。左侧导航栏有 logo、管理员头像、导航菜单和安全退出按钮&#xff1b;右侧内容区域包括页头、用户信息管理内容&#xff08;含搜索框和用户数据表格&#xff09;以及页…...

编程日记 2025/2/11 21:45:38

三、OSG学习笔记-应用基础

前一章节&#xff1a;二、OSG学习笔记-入门开发-CSDN博客https://blog.csdn.net/weixin_36323170/article/details/145513874 一、 OsgGA: 界面事件处理空间&#xff0c;处理操作各种操作器的最大名字空间&#xff1b; GUIEventHandler: ui 事件操作类 注意&#xff1a;在启…...

编程日记 2025/2/11 21:41:34

CTFHub-RCE系列wp

目录标题 引言什么是RCE漏洞 eval执行文件包含文件包含php://input读取源代码远程包含 命令注入无过滤过滤cat过滤空格过滤目录分隔符过滤运算符综合过滤练习 引言 题目共有如下类型 什么是RCE漏洞 RCE漏洞&#xff0c;全称是Remote Code Execution漏洞&#xff0c;翻译成中文…...

编程日记 2025/2/11 21:40:32

Linux ping不通百度但浏览器可以打开百度的的解决方法

问题描述&#xff1a;使用ping命令ping www.baidu.com,提示的地址为ipv6地址&#xff0c;但该地址ping不通&#xff0c;但使用浏览器直接打开百度网址可以打开。 问题可能的原因&#xff1a;&#xff08;1&#xff09;虚拟机上ipv6为自动模式&#xff0c;影响了ipv4寻址&#…...

编程日记 2025/2/11 21:39:29

Redis中的某一热点数据缓存过期了，此时有大量请求访问怎么办?

1、提前设置热点数据永不过期 2、分布式中用redis分布式锁&#xff08;锁可以在多个 JVM 实例之间协调&#xff09;、单体中用synchronized&#xff08;锁只在同一个 JVM 内有效&#xff09; 编写服务类 import com.redisson.api.RLock; import com.redisson.api.RedissonCli…...

编程日记 2025/2/11 21:33:23

低成本+高性能+超灵活！Deepseek 671B+Milvus重新定义知识库搭建

“老板说&#xff0c;这个项目得上Deepseek,还得再做个知识库...” 还有哪个开发者&#xff0c;最近没听到这样的抱怨&#xff1f; Deepseek爆火&#xff0c;推理端的智能提速&#xff0c;算力成本急剧下降&#xff0c;让不少原本不想用大模型&#xff0c;用不起大模型的企业&a…...

编程日记 2025/2/11 21:31:21

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.…...

编程日记 2025/2/11 21:24:12

PDF 文件的安全功能概述

由于安全问题始终存在&#xff0c;我们希望重点介绍 PDF 文件格式提供的一些安全功能。如果您希望控制或限制用户可以执行的操作&#xff0c;这些功能可以启用。本文将介绍可以阻止哪些类型的操作&#xff0c;以及可以实施哪些不同的身份验证技术来提高 PDF 的安全性。 可以控制…...

编程日记 2025/2/11 21:15:02

在Linux上部署Jenkins的详细指南

引言 在当今快速迭代的软件开发环境中&#xff0c;持续集成和持续交付&#xff08;CI/CD&#xff09;变得越来越重要。Jenkins作为一个开源自动化服务器&#xff0c;能够帮助开发者更高效地进行代码集成、测试和部署。本文将详细介绍如何在Linux系统上安装和配置Jenkins。 准…...

编程日记 2025/2/11 21:12:59

碳纤维复合材料制造的六西格玛管理实践：破解高端制造良率困局的实战密码

碳纤维复合材料制造的六西格玛管理实践&#xff1a;破解高端制造良率困局的实战密码 在全球碳中和与高端制造升级的双重驱动下&#xff0c;碳纤维复合材料行业正经历前爆发式增长。航空航天、新能源汽车、风电叶片等领域对碳纤维产品的性能稳定性提出近乎苛刻的要求&#xff0…...

编程日记 2025/2/11 21:08:47

Day83：图形的绘制

Python 提供了多种绘图工具，其中最常用的是 Turtle（海龟绘图）和 Matplotlib（数据可视化）。今天，我们主要介绍 Turtle，它可以轻松绘制各种几何图形、艺术图案和动画。 1. Turtle 库简介 Turtle 是 Python 内置的绘图工具，主要用于教学、趣味绘画和简单图形的创建。 基…...

编程日记 2025/2/11 21:03:38

C# Dll嵌入到.exe

将dll属性作为 嵌入的资源 修改引用属性为不复制 增加dll识别来源 AppDomain.CurrentDomain.AssemblyResolve new ResolveEventHandler(CurrentDomain_AssemblyResolve);private static System.Reflection.Assembly CurrentDomain_AssemblyResolve(object sender, Reso…...

编程日记 2025/2/11 21:02:37

o3-mini、Gemini 2 Flash、Sonnet 3.5 与 DeepSeek 在 Cursor 上的对决

最新的 OpenAI 模型 o3-mini 已于 1 月 31 日&#xff08;星期五&#xff09;发布&#xff0c;并已在 Cursor 上架。不久后&#xff0c;Gemini 2 Flash 也会陆续登场。 上周&#xff0c;对 DeepSeek V3、DeepSeek R1 以及 Claude 3.5 Sonnet 做过类似测试。那次测试结果显示&am…...

编程日记 2025/2/11 20:55:29

如何在Vscode中接入Deepseek

一、获取Deepseek APIKEY 首先&#xff0c;登录Deepseek官网的开放平台&#xff1a;DeepSeek 选择API开放平台&#xff0c;然后登录Deepseek后台。 点击左侧菜单栏“API keys”&#xff0c;并创建API key。 需要注意的是&#xff0c;生成API key复制保存到本地&#xff0c;丢失…...

编程日记 2025/2/11 20:54:27

6 maven工具的使用、maven项目中使用日志

文章目录 前言一、maven&#xff1a;一款管理和构建java项目的工具1 基本概念2 maven的安装与配置&#xff08;1&#xff09;maven的安装&#xff08;2&#xff09;IDEA集成Maven配置当前项目工程设置 maven全局设置 &#xff08;3&#xff09;创建一个maven项目 3 pom.xml文件…...

编程日记 2025/2/11 20:53:21

Day82：创建图形界面（GUI）

在 Python 中，我们可以使用 Tkinter（标准 GUI 库）来创建图形用户界面（GUI）。Tkinter 提供了一系列工具和控件，使开发者可以轻松地创建窗口、按钮、输入框等界面组件。 1. Tkinter 简介 Tkinter 是 Python 内置的 GUI 库，使用它可以创建窗口应用程序，而无需安装额外的库…...

编程日记 2025/2/11 20:52:17

字节跳动大模型应用 Go 开发框架 —— Eino 实践

前言 开发基于大模型的软件应用&#xff0c;就像指挥一支足球队&#xff1a;组件是能力各异的队员&#xff0c;编排是灵活多变的战术&#xff0c;数据是流转的足球。Eino 是字节跳动开源的大模型应用开发框架&#xff0c;拥有稳定的内核&#xff0c;灵活的扩展性&#xff0c;完…...

编程日记 2025/2/11 20:51:15

【Golang学习之旅】Go + MySQL 数据库操作详解

文章目录 前言1. GORM简介2. 安装GORM并连接MySQL2.1 安装GORM和MySQL驱动2.2 连接MySQL 3. GORM数据模型&#xff08;Model&#xff09;3.1 定义User结构体3.2 自动迁移&#xff08;AutoMigrate&#xff09; 4. GORM CRUD 操作4.1 插入数据&#xff08;Create&#xff09;4.2 …...

编程日记 2025/2/11 20:50:13

Http 的响应码有哪些？ 分别代表的是什么？

HTTP 状态码分为多个类别&#xff0c;下面是常见的 HTTP 状态码及其含义&#xff0c;包括 3xx 重定向状态码的详细区别&#xff1a; &#x1f4cc; HTTP 状态码分类 分类状态码范围说明1xx100-199信息性状态码&#xff0c;表示请求已被接收&#xff0c;继续处理2xx200-299成功…...

编程日记 2025/2/11 20:49:09

深入解析 Linux 系统中 Cron 定时任务的配置与管理

在 Linux 和类 Unix 系统中&#xff0c;cron 是一个非常强大的工具&#xff0c;用于定时执行各种任务&#xff0c;例如自动备份、定时运行脚本和定期清理日志文件。通过合理配置 cron&#xff0c;你可以让很多系统维护任务自动化&#xff0c;从而减轻日常管理的压力。而 cronta…...

编程日记 2025/2/11 20:47:56

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/1/1 15:13:39

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2026/1/1 16:27:20

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/12/24 16:48:44

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/1 9:01:01

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/11/25 4:57:19

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/12/31 13:00:12

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2025/12/31 13:00:16

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53