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 盒模型,确保元素的宽度和高度包含内边距和边框。
  • htmlbody 元素:将高度和宽度设置为 100%,为页面布局提供基础。

2. demo01.css

  • 布局相关:
    • #container:使用 display: flex 实现左右布局,宽度为 100%,高度为视口高度。
    • .left.right:分别设置左侧导航栏和右侧内容区域的样式,左侧固定宽度 200px,右侧使用 flex: 1 占据剩余空间。
  • 样式细节:
    • 各个部分(如 logo、导航项、搜索框、表格等)都有详细的样式设置,包括背景颜色、字体大小、边框等。
    • 部分元素(如导航项、操作按钮)设置了 :hover 伪类,实现鼠标悬停效果。

代码效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/69615.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在 Qt 中添加和使用系统托盘图标

在 Qt 中实现系统托盘图标是一个常见的需求&#xff0c;尤其是在桌面应用程序中。系统托盘图标可以让应用程序在后台运行时仍然具有可见性&#xff0c;同时避免占用过多的桌面空间。本文将详细介绍如何在 Qt 项目中添加托盘图标&#xff0c;并通过资源系统&#xff08;.qrc 文件…

探索B-树系列

&#x1f308;前言&#x1f308; 本文将讲解B树系列&#xff0c;包含 B-树&#xff0c;B树&#xff0c;B*树&#xff0c;其中主要讲解B树底层原理&#xff0c;为什么用B树作为外查询的数据结构&#xff0c;以及B-树插入操作并用代码实现&#xff1b;介绍B树、B*树。 &#x1f4…

使用 POI-TL 和 JFreeChart 动态生成 Word 报告

文章目录 前言一、需求背景二、方案分析三、 POI-TL JFreeChart 实现3.1 Maven 依赖3.3 word模板设置3.2 实现代码 踩坑 前言 在开发过程中&#xff0c;我们经常需要生成包含动态数据和图表的 Word 报告。本文将介绍如何结合 POI-TL 和 JFreeChart&#xff0c;实现动态生成 W…

QT修仙之路2-2 对话框 尚欠火候

警告对话框 相关代码 错误对话框 相关代码 消息对话框 相关代码 询问对话框 相关代码 相关代码 警告对话框 QMessageBox::warning(this,"错误","账号密码不能为空",QMessageBox::Ok);错误对话框 QMessageBox msgBox(QMessageBox::Critical,"错误…

conda 修复 libstdc++.so.6: version `GLIBCXX_3.4.30‘ not found 简便方法

ImportError: /data/home/hum/anaconda3/envs/ipc/bin/../lib/libstdc.so.6: version GLIBCXX_3.4.30 not found (required by /home/hum/anaconda3/envs/ipc/lib/python3.11/site-packages/paddle/base/libpaddle.so) 1. 检查版本 strings /data/home/hum/anaconda3/envs/ipc/…

RTD2775QT/RTD2795QT瑞昱显示器芯片方案

RTD2775QT与RTD2795QT&#xff1a;高性能4K显示驱动芯片 RTD2775QT与RTD2795QT是瑞昱半导体公司推出的两款高性能显示驱动芯片&#xff0c;专为满足现代显示设备对高清、高分辨率的需求而设计。这两款芯片不仅支持4K分辨率&#xff0c;还具备丰富的功能和卓越的性能&#xff0…

【含开题报告+文档+PPT+源码】学术研究合作与科研项目管理应用的J2EE实施

开题报告 本研究构建了一套集注册登录、信息获取与科研项目管理于一体的综合型学术研究合作平台。系统用户通过注册登录后&#xff0c;能够便捷地接收到最新的系统公告和科研动态新闻&#xff0c;并能进一步点击查看详尽的新闻内容。在科研项目管理方面&#xff0c;系统提供强…

力扣 单词拆分

动态规划&#xff0c;字符串截取&#xff0c;可重复用&#xff0c;集合类。 题目 单词可以重复使用&#xff0c;一个单词可用多次&#xff0c;应该是比较灵活的组合形式了&#xff0c;可以想到用dp&#xff0c;遍历完单词后的状态的返回值。而这里的wordDict给出的是list&…

Node.js 环境配置

什么是 Node.js Node.js 是一个基于 Chrome V8 JavaScript 引擎的 JavaScript 运行时环境&#xff0c;它允许你在服务器端运行 JavaScript。传统上&#xff0c;JavaScript 主要用于浏览器中的前端开发&#xff0c;而 Node.js 使得 JavaScript 也能够在服务器上执行&#xff0c;…

Redis企业开发实战(四)——点评项目之分布式锁

目录 一、分布式锁介绍 (一)分布式锁基本介绍 (二)分布式锁满足的条件 (三)常见的分布式锁 1.Mysql 2.Redis 3.Zookeeper 二、Redis分布式锁详解 (一)Redis分布式锁的实现核心思路 获取锁&#xff1a; 释放锁&#xff1a; (二)基于Redis实现分布式锁初级版本 1.…

【个人开发】cuda12.6安装vllm安装实践【内含踩坑经验】

1. 背景 vLLM是一个快速且易于使用的LLM推理和服务库。企业级应用比较普遍&#xff0c;尝试安装相关环境&#xff0c;尝试使用。 2. 环境 模块版本python3.10CUDA12.6torch2.5.1xformers0.0.28.post3flash_attn2.7.4vllm0.6.4.post1 2.1 安装flash_attn 具体选择什么版本&…

系统思考—自我超越

“我不在乎你从哪里开始&#xff0c;我只在乎你能走到哪里。真正的超越在于敢于突破自己设定的框架。” —— 亚伯拉罕林肯 在今天这个快速变化的商业环境里&#xff0c;许多企业和团队都会遇到同样的挑战&#xff1a;如何突破现有的框架&#xff0c;实现真正的自我超越&#…

win11+mac键盘+PowerToys 重映射热键

在win11系统中&#xff0c;使用mac的蓝牙键盘&#xff0c;键盘本身没有PrintScreen键。这时可以借助PowerToys来将其他键映射到系统的PrintScreen. 1.下载安装PowerToys 地址https://learn.microsoft.com/zh-cn/windows/powertoys/ 2.打开PowerToys&#xff0c;选中【键盘管理器…

程序诗篇里的灵动笔触:指针绘就数据的梦幻蓝图<8>

大家好啊&#xff0c;我是小象٩(๑ω๑)۶ 我的博客&#xff1a;Xiao Xiangζั͡ޓއއ 很高兴见到大家&#xff0c;希望能够和大家一起交流学习&#xff0c;共同进步。 今天我们复习前面学习的指针知识 目录 关于指针数组和数组指针的区别指针数组&#xff08;Array of Poi…

今日写题work01

题目一&#xff1a;轮转数组 三种思路&#xff0c;时间复杂度越优越好 第一种思路: 直接暴力求解&#xff0c;空间复杂度为o(1),但时间复杂度为o(n^2) #include <stdio.h> void rotate(int* nums, int k, int len); int main() {int arr[] { 1,2,3,4,5,6,7 };rotate(a…

原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力

原生鸿蒙版小艺APP接入DeepSeek-R1&#xff0c;为HarmonyOS应用开发注入新活力 在科技飞速发展的当下&#xff0c;人工智能与操作系统的融合正深刻改变着我们的数字生活。近日&#xff0c;原生鸿蒙版小艺APP成功接入DeepSeek-R1&#xff0c;这一突破性进展不仅为用户带来了更智…

赛博算命之 ”梅花易数“ 的 “JAVA“ 实现 ——从玄学到科学的探索

hello~朋友们&#xff01;好久不见&#xff01; 今天给大家带来赛博算命第三期——梅花易数的java实现 赛博算命系列文章&#xff1a; 周易六十四卦 掐指一算——小六壬 更多优质文章&#xff1a;个人主页 JAVA系列&#xff1a;JAVA 大佬们互三哦~互三必回&#xff01;&#xf…

什么是PMC项目管理?

PMC项目管理&#xff08;Project Management Consultancy&#xff0c;项目管理咨询&#xff09;是一种专业化的管理服务形式&#xff0c;旨在通过提供专业的项目管理支持、方法论和工具&#xff0c;帮助企业或组织在项目实施过程中达到预期目标、提高效率、降低风险、节约成本。…

如何在电脑后台定时进行自动截图?自动截图后如何快捷保存?如何远程查看?

7-2 有时候需要对电脑的屏幕进行在后台连续性的截图保存&#xff0c;并且要可以远程查看&#xff0c;无界面&#xff0c;以达到对电脑的使用过程进行完全了解的目的&#xff0c;一般用于对小孩使用电脑的掌握&#xff0c;如果父母在外地&#xff0c;不方便就近管理&#xff0c…

从Word里面用VBA调用NVIDIA的免费DeepSeekR1

看上去能用而已。 选中的文字作为输入&#xff0c;运行对应的宏即可&#xff1b;会先MSGBOX提示一下&#xff0c;然后相关内容追加到word文档中。 需要自己注册生成好用的apikey Option ExplicitSub DeepSeek()Dim selectedText As StringDim apiKey As StringDim response A…