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

2025web寒假作业二

article 2026/4/27 13:17:32

一、整体功能概述

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

编程日记 2026/4/11 18:43:44

鸿蒙NEXT API使用指导之文件压缩和邮件创建

鸿蒙NEXT API 使用指导 一、前言二、邮件创建1、拉起垂类应用2、 UIAbilityContext.startAbilityByType 原型2.1、wantParam2.2、abilityStartCallback 与 callback 3、拉起邮箱类应用3.1、单纯拉起邮箱应用3.2、传入带附件的邮件 三、压缩文件1、认识 zlib2、压缩处理2.1、单文…...

编程日记 2026/4/11 21:19:39

javaEE-10.CSS入门

目录 一.什么是CSS ​编辑二.语法规则: 三.使用方式 1.行内样式: 2.内部样式: 3.外部样式: 空格规范 : 四.CSS选择器类型 1.标签选择器 2.类选择器 3.ID选择器 4.通配符选择器 5.复合选择器 五.常用的CSS样式 1.color:设置字体颜色 2.font-size:设置字体大小 3…...

编程日记 2026/4/11 21:20:54

Spring Boot牵手Redisson：分布式锁实战秘籍

一、引言 在当今的分布式系统架构中，随着业务规模的不断扩大和系统复杂度的日益增加，如何确保多个服务节点之间的数据一致性和操作的原子性成为了一个至关重要的问题。在单机环境下，我们可以轻松地使用线程锁或进程锁来控制对共享资源的访问，但在分布式系统中，由于各个服务…...

编程日记 2026/4/11 21:19:26

制药行业 BI 可视化数据分析方案

一、行业背景 随着医药行业数字化转型的深入&#xff0c;企业积累了海量的数据&#xff0c;包括销售数据、生产数据、研发数据、市场数据等。如何利用这些数据&#xff0c;挖掘其价值&#xff0c;为企业决策提供支持&#xff0c;成为医药企业面临的重大挑战。在当今竞争激烈的…...

编程日记 2026/4/11 21:19:24

[学习笔记] Kotlin Compose-Multiplatform

Compose-Multiplatform 原文&#xff1a;https://github.com/zimoyin/StudyNotes-master/blob/master/compose-multiplatform/compose.md Compose Multiplatform 是 JetBrains 为桌面平台&#xff08;macOS&#xff0c;Linux&#xff0c;Windows&#xff09;和Web编写Kotlin UI…...

编程日记 2026/4/11 16:18:22

ubutun系统常用配置

目录 1. 更新系统 2. 安装 vim 文本编辑器 3. 扩展文件系统 4. 设置静态IP地址&#xff08;可选&#xff09; 5. 安装图形驱动 6. 安装常用软件 7. 调整启动项 8. 清理系统 9. 配置SSH 10. 安装VNC服务器&#xff08;可选&#xff09; 11. 安装桌面环境&#xff08;…...

编程日记 2025/6/29 23:54:41

PHP函数介绍—get_headers(): 获取URL的响应头信息

概述&#xff1a;在PHP开发中&#xff0c;我们经常需要获取网页或远程资源的响应头信息。PHP函数get_headers()能够方便地获取目标URL的响应头信息&#xff0c;并以数组形式返回。本文将介绍get_headers()函数的用法&#xff0c;以及提供一些相关的代码示例。 get_headers()函…...

编程日记 2026/3/23 22:57:31

web前端录制canvas视频和video的声音，并合并成一个文件进行下载

一、captureStream ‌captureStream‌是一个Web API方法&#xff0c;用于捕获指定元素的媒体流。该方法通常用于从<video>、<audio>或<canvas>元素中捕获实时视频流或音频流&#xff0c;以便进行进一步的处理&#xff0c;如直播、录制或分析‌。 captureStr…...

编程日记 2025/6/21 16:30:28

Golang 并发机制-7：sync.Once实战应用指南

Go的并发模型是其突出的特性之一&#xff0c;但强大的功能也带来了巨大的责任。sync.Once是由Go的sync包提供的同步原语。它的目的是确保一段代码只执行一次&#xff0c;而不管有多少协程试图执行它。这听起来可能很简单&#xff0c;但它改变了并发环境中管理一次性操作的规则。…...

编程日记 2026/4/21 7:21:45

【AI实践】Cursor上手-跑通Hello World和时间管理功能

背景 学习目的&#xff1a;熟悉Cursor使用环境&#xff0c;跑通基本开发链路。 本人背景&#xff1a;安卓开发不熟悉&#xff0c;了解科技软硬件常识 实践 基础操作 1&#xff0c;下载安装安卓Android Studio 创建一个empty project 工程&#xff0c;名称为helloworld 2&am…...

编程日记 2026/4/24 5:38:03

深度学习 视频推荐

以下为你呈现一个基于深度学习实现视频推荐的简化代码示例。这里我们使用的是协同过滤思想结合神经网络的方式，借助 TensorFlow 和 Keras 库来构建模型。在这个示例中，假设已有用户对视频的评分数据，目标是预测用户对未评分视频的评分，进而为用户推荐可能感兴趣的视频。 1…...

编程日记 2026/2/20 1:19:22

缓存组件＜keep-alive＞

缓存组件<keep-alive> 1.组件作用 组件, 默认会缓存内部的所有组件实例&#xff0c;当组件需要缓存时首先考虑使用此组件。 2.使用场景 场景1&#xff1a;tab切换时&#xff0c;对应的组件保持原状态&#xff0c;使用keep-alive组件 使用&#xff1a;KeepAlive | Vu…...

编程日记 2025/6/9 10:44:05

SpringBoot单机模式的极限是什么？为什么会引入分布式？

Spring Boot 单机模式的极限 Spring Boot 单机模式的极限主要体现在以下几个方面&#xff1a; 硬件资源限制&#xff1a; CPU&#xff1a;单机性能受限于 CPU 核心数和主频&#xff0c;无法无限扩展。内存&#xff1a;内存容量有限&#xff0c;无法应对大规模数据处理或高并发…...

编程日记 2025/11/30 6:01:13

【多模态大模型】系列4：目标检测（ViLD、GLIP）

目录 1 ViLD2 GLIP 1 ViLD OPEN-VOCABULARY OBJECT DETECTION VIA VISION AND LANGUAGE KNOWLEDGE DISTILLATION 从标题就能看出来&#xff0c;作者是把CLIP模型当成一个Teacher&#xff0c;去蒸馏他自己的网络&#xff0c;从而能Zero Shot去做目标检测。 现在的目标检测数据…...

编程日记 2026/4/25 1:09:28

计算机网络结课设计：通过思科Cisco进行中小型校园网搭建

上学期计算机网络课程的结课设计是使用思科模拟器搭建一个中小型校园网&#xff0c;当时花了几天时间查阅相关博客总算是做出来了&#xff0c;在验收后一直没管&#xff0c;在寒假想起来了简单分享一下&#xff0c;希望可以给有需求的小伙伴一些帮助 目录 一、设计要求 二、…...

编程日记 2026/4/11 21:19:34

从零到一：基于Rook构建云原生Ceph存储的全面指南（下）

接上篇&#xff1a;《从零到一&#xff1a;基于Rook构建云原生Ceph存储的全面指南&#xff08;上&#xff09;》 链接: link 六.Rook部署云原生CephFS文件系统 6.1 部署cephfs storageclass cephfs文件系统与RBD服务类似&#xff0c;要想在kubernetes pod里使用cephfs&#…...

编程日记 2026/4/24 10:10:09

mysql的语句备份详解

使用mysqldump工具备份&#xff08;适用于逻辑备份&#xff09; mysqldump是 MySQL 自带的一个非常实用的逻辑备份工具&#xff0c;它可以将数据库中的数据和结构以 SQL 语句的形式导出到文件中。 1. 备份整个数据库 mysqldump -u [用户名] -p [数据库名] > [备份文件名].…...

编程日记 2026/2/22 0:11:05

AutoMQ 如何实现没有写性能劣化的极致冷读效率

前言 追赶读&#xff08;Catch-up Read&#xff0c;冷读&#xff09;是消息和流系统常见和重要的场景。 削峰填谷&#xff1a;对于消息来说&#xff0c;消息通常用作业务间的解耦和削峰填谷。削峰填谷要求消息队列能将上游发送的数据堆积住&#xff0c;让下游在容量范围内消费…...

编程日记 2026/4/24 12:05:50

【Rabbitmq篇】高级特性----TTL，死信队列，延迟队列

目录 一.TTL ???1.设置消息的TTL 2.设置队列的TTL 3.俩者区别? 二.死信队列 定义&#xff1a; 消息成为死信的原因&#xff1a; 1.消息被拒绝&#xff08;basic.reject 或 basic.nack&#xff09; 2.消息过期&#xff08;TTL&#xff09; 3.队列达到最大长度? …...

编程日记 2026/4/11 21:19:34

【Java】多线程和高并发编程（三）：锁（中）深入ReentrantLock

文章目录 3、深入ReentrantLock3.1 ReentrantLock和synchronized的区别3.2 AQS概述3.3 加锁流程源码剖析3.3.1 加锁流程概述3.3.2 三种加锁源码分析3.3.2.1 lock方法3.3.2.2 tryLock方法3.3.2.3 lockInterruptibly方法 3.4 释放锁流程源码剖析3.4.1 释放锁流程概述3.4.2 释放锁…...

编程日记 2026/4/24 2:41:14

Unity 高度可扩展的技能与多 Buff 框架详解

一、框架设计 1.1 核心思想 组件化设计: 将技能和 Buff 抽象为可复用的组件&#xff0c;通过组合不同的组件实现复杂的效果。 数据驱动: 使用 ScriptableObject 或 JSON 等数据格式定义技能和 Buff 的属性&#xff0c;方便配置和修改。 事件驱动: 利用 Unity 的事件系统或自…...

编程日记 2025/6/1 7:19:05

电路笔记(元器件)：AD 5263数字电位计(暂记)

AD5263 是四通道、15 V、256位数字电位计&#xff0c;可通过SPI/I2C配置具体电平值。 配置模式&#xff1a; W引脚作为电位器的抽头&#xff0c;可在A-B之间调整任意位置的电阻值。也可将W与A(或B)引脚短接&#xff0c;A-W间的电阻总是0欧姆&#xff0c;通过数字接口调整电位器…...

编程日记 2026/4/27 8:16:12

《大规模动画优化（一）：GPU 顶点动画的生成》

GPU 顶点动画&#xff08;Vertex Animation Texture, VAT&#xff09; GPU 顶点动画&#xff08;Vertex Animation Texture, VAT&#xff09;烘焙的核心思想是&#xff1a; 在 CPU 端预先计算动画顶点数据&#xff0c;并存储到纹理&#xff08;Texture2D&#xff09;中&#xf…...

编程日记 2025/6/3 3:01:36

webpack【初体验】使用 webpack 打包一个程序

打包前 共 3 个文件 dist\index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Webpack 示例&…...

编程日记 2026/4/14 2:15:46

VMware安装CentOS 7（全网超详细图文保姆版教程）

文章目录 一、下载及安装 VMware1.1 VMware下载1.2 CentOS下载 二、搭建虚拟机环境2.1 创建新虚拟机2.2 选择自定义2.3 选择虚拟机硬件兼容性2.4 选择稍后安装操作系统2.5 选择Linux系统 版本选择 centos 7 64位2.6 设备你虚拟机的名字和保存位置&#xff08;保存位置建议在编辑…...

编程日记 2026/4/11 21:19:30

mysql BUG 导致 show processlist 有大量的show slave stauts 处于init状态

一、详细报错信息&#xff1a; 1、执行show slave status\G 卡住 && stop slave也卡住 2、show processlist 发现 Waiting for commit lock NULL 锁 3、错误日志报错主备同步用户认证失败 二、报错原因&#xff08;分析过程&#xff09;&#xff1a; 1、排查备库日志…...

编程日记 2026/4/24 18:42:35

机器学习在癌症分子亚型分类中的应用

学习笔记&#xff1a;机器学习在癌症分子亚型分类中的应用——Cancer Cell 研究解析 1. 文章基本信息 标题&#xff1a;Classification of non-TCGA cancer samples to TCGA molecular subtypes using machine learning发表期刊&#xff1a;Cancer Cell发表时间&#xff1a;20…...

编程日记 2026/4/24 12:20:08

从MySQL优化到脑力健康：技术人与效率的双重提升

文章目录 零&#xff1a;前言一&#xff1a;MySQL性能优化的核心知识点1. 索引优化的最佳实践实战案例&#xff1a; 2. 高并发事务的处理机制实战案例&#xff1a; 3. 查询性能调优实战案例&#xff1a; 4. 缓存与连接池的优化实战案例&#xff1a; 二&#xff1a;技术工作者的…...

编程日记 2026/4/22 20:35:31

Qt：项目文件解析

目录 QWidget基础项目文件解析 .pro文件解析 widget.h文件解析 widget.cpp文件解析 widget.ui文件解析 main.cpp文件解析 认识对象模型 窗口坐标系 QWidget基础项目文件解析 .pro文件解析 工程新建好之后&#xff0c;在工程目录列表中有⼀个后缀为 ".pro" …...

编程日记 2026/4/24 0:05:08