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…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面,开源代码 作为一个电子罗盘模块,我们可以通过I2C从中获取偏航角yaw,相对于六轴陀螺仪的yaw,qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中,部分节点存储的数据量或访问量远高于其他节点,导致这些节点负载过高,影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作:验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化:测试aof和aof持久化机制,确保数据在开启后正确恢复。 事务:检查事务的原子性和回滚机制。 发布订阅:确保消息正确传递。 2、性…...
ubuntu22.04有线网络无法连接,图标也没了
今天突然无法有线网络无法连接任何设备,并且图标都没了 错误案例 往上一顿搜索,试了很多博客都不行,比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动,重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...
高考志愿填报管理系统---开发介绍
高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发,采用现代化的Web技术,为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## 📋 系统概述 ### 🎯 系统定…...
