web第二次作业
一.后台管理系统首页代码
1.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实验</title>
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/demo01.css">
</head>
<body>
<div id="container">
<div class="left">
<div>
<div class="logo">
<img src="../img/logo.png" alt="">
<span>OPENLAB管理系统</span>
</div>
<div class="header-img">
<img src="../img/tx.png" alt="">
<h2>管理员:星</h2>
</div>
<ul class="nav">
<li>首页</li>
<li>系统管理</li>
<li>用户管理</li>
<li>店铺管理</li>
<li>订单管理</li>
<li>积分管理</li>
</ul>
</div>
<div class="exit">
<span>安全退出</span>
</div>
</div>
<div class="right">
<div class="header">
<span>收起菜单</span>
<span>OPENLAB管理系统</span>
<span>管理员:星</span>
</div>
<div class="main">
<div class="content">
<h2>用户信息管理</h2>
<div class="line"><p></p><div>妖娆的分割线</div><p></p></div>
<div class="search-box">
<div>
<label for="username">账号:</label>
<input type="text" placeholder="请输入账号">
</div>
<div>
<label for="eamil">邮箱:</label>
<input type="email" placeholder="请输入邮箱">
</div>
<div>
<button>搜索</button>
</div>
</div>
<div class="line"><p></p><div>妖娆的分割线</div><p></p></div>
<div class="tb-title">
<div>ID</div>
<div>账号</div>
<div>密码</div>
<div>头像</div>
<div>邮箱</div>
<div>状态</div>
<div>操作</div>
</div>
<div class="tb-content">
<div>001</div>
<div>tom</div>
<div>******</div>
<div><img src="../img/tx.png" alt=""></div>
<div>tom@openlab.com</div>
<div><span class="s-active">启用</span></div>
<div>
<button class="edit">编辑</button>
<button class="disable">禁用</button>
<button class="delete">删除</button>
</div>
</div>
<div class="tb-content">
<div>002</div>
<div>jerry</div>
<div>******</div>
<div><img src="../img/tx.png" alt=""></div>
<div>jerry@openlab.com</div>
<div><span class="s-active">启用</span></div>
<div>
<button class="edit">编辑</button>
<button class="disable">禁用</button>
<button class="delete">删除</button>
</div>
</div>
</div>
</div>
<div class="footer">
<span>版权所有,翻版必究</span>
</div>
</div>
</div>
</body>
</html>
2.style.css代码
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
3.demo01.css代码
#container{
width: 100%;
height: 100%;
display: flex;
}
.left{
width: 300px;
height: 100%;
background-color: #203453;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.left > div:nth-of-type(1){
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.left .logo{
width: 100%;
height: 50px;
background-color: #f5f5f5;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo img{
width: 40px;
height: 40px;
}
.logo span{
font-size: 20px;
font-weight: 600;
letter-spacing: 3px;
}
.left .header-img{
width: 100%;
/* background-color: antiquewhite; */
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.left .header-img img{
width: 100px;
height: 100px;
border-radius: 50%;
}
.left .nav{
width: 90%;
list-style: none;
/* background-color: salmon; */
}
.nav li,
.exit{
width: 100%;
height: 50px;
font-size: 18px;
color: white;
cursor: pointer;
line-height: 50px;
text-align: center;
}
.nav li:hover,
.exit:hover{
background-color: white;
color: #203453;
font-weight: 600px;
}
.left .exit{
width: 100%;
height: 50px;
/* background-color: aquamarine; */
}
.right{
height: 100%;
flex: 1;
background-color: #f2f2f1;
display: flex;
flex-direction: column;
}
.right .header,
.right .footer{
height: 50px;
color: #333;
background-color: #f5f5f5;
}
.right .header{
border-bottom: solid 1px #ccc;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
.header span:nth-of-type(1){
display: inline-block;
width: 100px;
height: 30px;
background-color: #ddd;
border-radius: 8px;
line-height: 30px;
text-align: center;
font-size: 14px;
cursor: pointer;
}
.header span:nth-of-type(2){
font-size: 20px;
font-weight: 600;
}
.right .footer{
border-top: solid 1px #ccc;
font-size: 12px;
color: #ccc;
line-height: 50px;
text-align: center;
}
.main{
flex: 1;
padding: 10px;
}
.main .content{
width: 100%;
height: 100%;
padding: 30px;
background-color: white;
border-radius: 10px;
}
.main h2{
color: #444;
}
.main .line{
display: flex;
flex-direction: row;
align-items: center;
}
.line p{
flex: 1;
height: 2px;
background-color: #ccc;
}
.line div{
width: 120px;
font-size: 12px;
color: #ccc;
text-align: center;
}
.main .search-box{
padding: 10px;
display: flex;
gap: 50px;
}
.search-box label{
font-size: 20px;
font-weight: 500;
}
.search-box input{
width: 260px;
height: 30px;
outline: none;
border: solid 1px #888;
border-radius: 3px;
padding: 5px;
}
.search-box button{
width: 120px;
height: 30px;
border: none;
background-color: #1094d5;
color: white;
letter-spacing: 2px;
cursor: pointer;
border-radius: 3px;
}
.tb-title,
.tb-content{
width: 100%;
height: 80px;
font-weight: 700;
align-items: center;
display: flex;
justify-content: space-evenly;
border-bottom: solid 2px #555;
}
.tb-title >div:nth-of-type(1),
.tb-content >div:nth-of-type(1),
.tb-title >div:nth-of-type(3),
.tb-content >div:nth-of-type(3),
.tb-title >div:nth-of-type(4),
.tb-content >div:nth-of-type(4),
.tb-title >div:nth-of-type(6),
.tb-content >div:nth-of-type(6)
{
width: 120px;
}
.tb-title >div:nth-of-type(2),
.tb-content >div:nth-of-type(2){
width: 200px;
}
.tb-title >div:nth-of-type(5),
.tb-content >div:nth-of-type(5){
width: 220px;
}
.tb-title >div:nth-of-type(7),
.tb-content >div:nth-of-type(7){
flex: 1;
}
.tb-content{
font-weight: 500;
border-bottom: solid 1px #888;
}
.tb-content >div>img{
width: 50px;
height: 50px;
border-radius: 50%;
}
.edit,
.disable,
.delete{
width: 60px;
height: 20px;
border-radius: 9px;
border: none;
background-color: #555;
color: white;
cursor: pointer;
}
.edit{
background-color: rgb(19, 201, 19);
}
.delete{
background-color: rgb(237, 17, 17);
}
二.网页展示效果
相关文章:
web第二次作业
一.后台管理系统首页代码 1.html代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>实验&l…...
AI 编程开发插件codeium Windsurf(vscode、editor) 安装
1、vscode中安装: 2、vscode中使用 3、输入注册的账号密码,就可以使用。 4、或者直接下载editor 5、安装editor 下一步,下一步,直到安装成功,中间可以改下安装位置,如果C盘空间不够。 同样提示注册或者登录…...
变压器-000000
最近一个项目是木田12V的充电器,要设计变压器,输出是12V,电压大于1.5A12.6*1.518.9W. 也就是可以将变压器当成初级输入的一个负载。输入端18.9W. 那么功率UI 。因为变压器的输入是线性上升的,所以电压为二份之一,也就是1/2*功率…...
C# OpenCvSharp 部署MOWA:多合一图像扭曲模型
目录 说明 效果 项目 代码 下载 参考 C# OpenCvSharp 部署MOWA:多合一图像扭曲模型 说明 算法模型的paper名称是《MOWA: Multiple-in-One Image Warping Model》 ariv链接 https://arxiv.org/pdf/2404.10716 效果 Stitched Image 翻译成中文意思是&…...
Ai无限免费生成高质量ppt教程(deepseek+kimi)
第一步:打开deepseek官网(DeepSeek) 1.如果deepseek官网网络繁忙,解决方案如下: (1)使用easychat官网(EasyChat)使用deepseek模型,如图所示: (2)本地部署&…...
LLMs之DeepSeek r1:Logic-RL的简介、安装和使用方法、案例应用之详细攻略
LLMs之DeepSeek r1:Logic-RL的简介、安装和使用方法、案例应用之详细攻略 目录 Logic-RL的简介 1、Logic-RL的特点 2、性能 Logic-RL 的安装和使用方法 1、安装 2、使用方法 数据准备 基础模型 指令模型 训练执行 实现细节 Logic-RL的案例应用 Logic-RL…...
解决跨域问题
相信大多数的伙伴在第一次通过vue spring 做项目的时候都会遇到这个问题 什么是同源策略和跨域问题 同源策略指的就是,浏览器出于安全考虑,实施的一种策略,即只允许来自同一源(即协议域名端口都相同)的请求访问资源. 否则就会导致跨域问题 例如: http://xxx.com -> http…...
网络工程师 (28)IEEE802标准
前言 IEEE 802标准是由电气和电子工程师协会(IEEE)制定的一组局域网(LAN)和城域网(MAN)标准,定义了网络中的物理层和数据链路层。 一、起源与背景 IEEE 802又称为LMSC(LAN/MAN Stand…...
Playwright 与 Selenium 的关系
Playwright 与 Selenium 的关系 Playwright 和 Selenium 都是流行的浏览器自动化测试工具,它们都可以用于 Web 应用的端到端测试,但它们在设计理念、架构和功能上存在一些差异。 以下是两者的主要关系对比: 特性PlaywrightSelenium开发语言JavaScript (Node.js)多种语言 (…...
保研考研机试攻略:python笔记(4)
🐨🐨🐨15各类查找 🐼🐼二分法 在我们写程序之前,我们要定义好边界,主要是考虑区间边界的闭开问题。 🐶1、左闭右闭 # 左闭右闭 def search(li, target): h = len(li) - 1l = 0#因为都是闭区间,h和l都可以取到并且相等while h >= l:mid = l + (h - l) // 2…...
Matplotlib基础01( 基本绘图函数/多图布局/图形嵌套/绘图属性)
Matplotlib基础 Matplotlib是一个用于绘制静态、动态和交互式图表的Python库,广泛应用于数据可视化领域。它是Python中最常用的绘图库之一,提供了多种功能,可以生成高质量的图表。 Matplotlib是数据分析、机器学习等领域数据可视化的重要工…...
Spring Boot: 使用 @Transactional 和 TransactionSynchronization 在事务提交后发送消息到 MQ
Spring Boot: 使用 Transactional 和 TransactionSynchronization 在事务提交后发送消息到 MQ 在微服务架构中,确保消息的可靠性和一致性非常重要,尤其是在涉及到分布式事务的场景中。本文将演示如何使用 Spring Boot 的事务机制和 TransactionSynchron…...
解析3DMAX转OBJ
3ds Max 是一款功能强大的三维建模、动画和渲染软件,而 OBJ 是一种常用的三维模型文件格式,以下是关于 3ds Max 转 OBJ 的相关解析: 3ds Max 转 OBJ 的原因 兼容性需求: OBJ 格式被众多三维软件和渲染器所支持,将 3…...
html为<td>添加标注文本
样式说明: /*为td添加相对定位点*/ .td_text {position: relative; }/*为p添加绝对坐标(相对于父元素中的定位点)*/ .td_text p {position: absolute;top: 80%;font-size: 8px; }参考资料:...
AI驱动的智能流程自动化是什么
在当今快速发展的数字化时代,企业正在寻找更高效、更智能的方式来管理日常运营和复杂任务。其中,“AI驱动的智能流程自动化”(Intelligent Process Automation, IPA)成为了一个热门趋势。通过结合人工智能(AIÿ…...
vue动态table 动态表头数据+动态列表数据
效果图: <template><div style"padding: 20px"><el-scrollbar><div class"scrollbar-flex-content"><div class"opt-search"><div style"width: 100px"> </div><div class"opt-b…...
ubuntu下迁移docker文件夹
在 Ubuntu 系统中迁移 Docker 文件夹(如 Docker 数据存储文件夹 /var/lib/docker)到另一个磁盘或目录,通常是为了释放系统盘空间。以下是迁移过程的详细步骤: 1. 停止 Docker 服务 在进行迁移之前,必须停止 Docker 服…...
Neo4j图数据库学习(二)——SpringBoot整合Neo4j
一. 前言 本文介绍如何通过SpringBoot整合Neo4j的方式,对图数据库进行简单的操作。 Neo4j和SpringBoot的知识不再赘述。关于Neo4j的基础知识,有兴趣可以看看作者上一篇的文章:Neo4j图数据库学习(一)——初识CQL 二. 前置准备 新建SpringBo…...
离散型变量的 PSI-群体稳定性指标计算
文章目录 PSI-群体稳定性指标(离散型)单个指标计算所有指标计算 PSI-群体稳定性指标(离散型) 单个指标计算 代码 import pandas as pddf pd.read_csv(/Users/mengzhichao/Desktop/文件/图表/小微企业用电量数据.csv)X_train df.sample(n7000) X_test df.sample(n3000)计算单…...
docker grafana安装
mkdir /root/grafana-storage chmod 777 -R /root/grafana-storage docker run -d -p 3000:3000 --namedocker-apisix-grafana-1 --network docker-apisix_apisix -v /root/grafana-storage:/var/lib/grafana grafana/grafana:9.1.0 浏览器访问: http://192.…...
NetCore Consul动态伸缩+Ocelot 网关 缓存 自定义缓存 + 限流、熔断、超时 等服务治理 + ids4鉴权
网关 OcelotGeteway 网关 Ocelot配置文件 {//单地址多实例负载均衡Consul 实现动态伸缩"Routes": [{// 上游 》》 接受的请求//上游请求方法,可以设置特定的 HTTP 方法列表或设置空列表以允许其中任何方法"UpstreamHttpMethod": [ "Get", &quo…...
【进度条实现】Python中tqdm使用示例
tqdm 是 Python 中一个非常流行的进度条库,可以快速为循环或长时间运行的任务添加进度提示。以下是 tqdm 的常见用法和示例: 1. 安装 pip install tqdm2. 基本用法 在循环中使用 最简单的用法是用 tqdm 包装一个可迭代对象(如列表、range …...
Chirpy3D:用于创意 3D 鸟类生成的连续部分潜在特征
Chirpy3D框架可以将细粒度的2D图像理解提升至3D生成的全新境界。当前的3D生成方法往往只关注于重构简单的对象,缺乏细致的特征和创造性。Chirpy3D通过结合多视角扩散模型和连续的部件潜在空间,能够生成全新且合理的3D鸟类模型。该系统不仅能够保持细致的…...
李飞飞团队 S1 与 DeepSeek R1 技术对比
李飞飞团队 S1 与 DeepSeek R1 技术对比 李飞飞团队的 S1 模型和 DeepSeek R1 模型都是在 AI 推理领域具有重要影响力的模型,它们在技术原理、性能表现和训练成本等方面存在一些差异。 技术原理 S1 模型:S1 模型采用了监督微调(SFT…...
LeetCode 3444.使数组包含目标值倍数的最小增量
给你两个数组 nums 和 target 。 在一次操作中,你可以将 nums 中的任意一个元素递增 1 。 返回要使 target 中的每个元素在 nums 中 至少 存在一个倍数所需的 最少操作次数 。 示例 1: 输入:nums [1,2,3], target [4] 输出:…...
Node.js 中模块化
随着软件开发项目的规模和复杂性的增加,如何有效地组织代码、提高可维护性和促进团队协作成为了一个重要的课题。Node.js 提供了强大的模块系统,使得开发者能够将代码分割成独立的、可重用的模块,从而简化大型应用的开发过程。本文将详细介绍…...
jdk8新特性
目录 1 lambda表达式 1.1 类型推断 1.2 局部变量限制 2 函数式接口 2.1 Predicate 函数式接口 2.2 Supplier函数式接口 2.3 Consumer函数式接口 2.4 Function函数式接口 2.5 Runnable函数式接口 3 方法引用和构造器引用 3.1 对象方法引用 3.2 静态方法引用 3.3 构造方法引用 4 …...
ZooKeeper 和 Dubbo 的关系:技术体系与实际应用
引言 在现代微服务架构中,服务治理和协调是至关重要的环节。ZooKeeper 和 Dubbo 是两个在分布式系统中常用的技术工具,它们之间有着紧密的联系。本文将详细探讨 ZooKeeper 和 Dubbo 的关系,从基础概念、技术架构、具体实现到实际应用场景&am…...
ESP32-S3模组上跑通esp32-camera(43)
接前一篇文章:ESP32-S3模组上跑通esp32-camera(42) 一、OV5640初始化 2. 相机初始化及图像传感器配置 上一回继续对reset函数的后一段代码进行解析。为了便于理解和回顾,再次贴出reset函数源码,在components\esp32-camera\sensors\ov5640.c中,如下: static int reset…...
解决bad SQL grammar []; nested exception is java.sql.SQLSyntaxErrorException
解决Spring Boot中MySQL数据库报错“Bad SQL Grammar”的问题 目录 解决Spring Boot中MySQL数据库报错“Bad SQL Grammar”的问题 问题描述解决步骤解决方案结论附:MySql常用配置参数及使用场景 在使用Spring Boot连接MySQL数据库时,有时候会遇到“B…...
NCV4275CDT50RKG 车规级LDO线性电压调节器芯片——专为新能源汽车设计的高可靠性电源解决方案
产品概述: NCV4275CDT50RKG 是一款符合 AEC-Q100 车规认证的高性能LDO(低压差线性稳压器),专为新能源汽车的严苛工作环境设计。该芯片支持 输出调节为 5.0 V 或 3.3 V,最大输出电流达 450mA,具备超低静态电流…...
DeepSeek Window本地私有化部署
前言 最近大火的国产AI大模型Deepseek大家应该都不陌生。除了在手机上安装APP或通过官网在线体验,其实我们完全可以在Windows电脑上进行本地部署,从而带来更加便捷的使用体验。 之前也提到过,本地部署AI模型有很多好处,比如&…...
镜头放大倍率和像素之间的关系
相互独立的特性 镜头放大倍率:主要取决于镜头的光学设计和结构,决定了镜头对物体成像时的缩放程度,与镜头的焦距等因素密切相关。比如,微距镜头具有较高的放大倍率,能将微小物体如昆虫、花朵细节等放大成像࿰…...
【RabbitMQ重试】重试三次转入死信队列
以下是基于RabbitMQ死信队列实现消息重试三次后转存的技术方案: 方案设计要点 队列定义改造(核心参数配置) Bean public Queue auditQueue() {Map<String, Object> args new HashMap<>();args.put("x-dead-letter-exchan…...
【一文读懂】卫星轨道的轨道参数(六根数)和位置速度矢量转换及其在终端距离、相对速度和多普勒频移计算中的应用
卫星轨道的六根数参数及其在终端距离、相对速度和多普勒频移计算中的应用 卫星轨道运动的描述离不开开普勒六要素(也称为六根数参数),它们完整地刻画了一颗卫星在引力场中的轨道信息。本文将介绍这六个参数的意义,并探讨如何利用…...
车载诊断框架 --- 使用CAPL脚本实现诊断测试吧(中)
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 简单,单纯,喜欢独处,独来独往,不易合同频过着接地气的生活,除了生存温饱问题之外,没有什么过多的欲望,表面看起来很高冷,内心热情,如果你身…...
Lockdir加密忘记密码:解锁数据恢复之道
Lockdir加密忘记密码现象解析 Lockdir作为一款知名的文件夹加密软件,因其强大的加密功能和便捷的操作体验而广受用户好评。然而,当谈及Lockdir加密忘记密码这一情况时,不少用户却面露难色。Lockdir加密忘记密码,简而言之…...
SQL优化方式
避免select *:开发中禁止使用select * 。它会增加查询解析器成本,无法走索引覆盖而产生回表操作,还会增加网络消耗,浪费CPU和内存资源,应指定具体查询字段。小表驱动大表:关联查询时,用数据量小…...
java项目之基于推荐算法的图书购物网站源码(ssm+mybatis+mysql)
风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的基于推荐算法的图书购物网站项目。项目源码以及部署相关请联系风歌,文末附上联系信息 。 项目简介: 基于推荐算法的…...
java中的线程安全
线程安全的定义 线程安全:一个类或方法在多线程环境下可以被多个线程同时访问,而不会导致数据的不一致或错误。 线程不安全:一个类或方法在多线程环境下不能被多个线程同时访问,否则可能导致数据的不一致或错误。线程安全的实现 线…...
day44 QT核心机制
头文件: #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QLabel> //标签类头文件 #include<QPushButton> //按钮类头文件 #include<QLineEdit> //行编辑器类头文件QT_BEGIN_NAMESPACE namespace Ui { class Widget; } …...
字节跳动后端一面
📍1. Gzip压缩技术详解 Gzip是一种流行的无损数据压缩格式,它使用DEFLATE算法来减少文件大小,广泛应用于网络传输和文件存储中以提高效率。 🚀 使用场景: • 网站优化:通过压缩HTML、CSS、JavaScript文件来…...
WebSocket推送数据快,条数多导致前端卡顿问题解决
WebSocket推送数据快,条数多导致前端卡顿问题解决 前言方案优化消息频率使用高效的数据格式Protobuf 和 MessagePack的对比 启用压缩前端性能优化 WebSocket使用注意事项连接管理处理断开连接负载均衡监控和维护日志记录定期维护安全最佳实践限流 最后 前言 在项目…...
android动态设置是否允许应用卸载
摘要:通过广播设置全局参数控制应用是否允许卸载,全局参数在Launcher和PackageInstaller两个模块中使用到。此功能可用于MDM后台控制是否允许设备卸载应用。 1. 静态注册广播 由于系统安装和卸载的功能集中在PackageInstaller模块中,为了更…...
【C/C++】每日温度 [ 栈的应用 ] 蓝桥杯/ACM备赛
数据结构考点:栈 题目描述: 给定一个整数数组 temperatures ,表示每天的温度,返回一个数组 answer ,其中 answer[i] 是指对于第 i 天,下一个更高温度出现在几天后。如果气温在这之后都不会升高࿰…...
开启蓝耘之旅:DeepSeek R1 模型在智算平台的起步教程
----------------------------------------------------------我的个人主页-------------------- 动动你的手指----------------------------------------点赞👍 收藏❤--------------------------------------------------------------- 引言 在深度学习的广袤领…...
基于SpringBoot+Vue实现航空票务管理系统
作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验,被多个学校常年聘为校外企业导师,指导学生毕业设计并参与学生毕业答辩指导,…...
基于改进型灰狼优化算法(GWO)的无人机路径规划
内容: 基于改进型灰狼优化算法的无人机轨迹规划 GWO是一种群体智能优化算法,模仿灰狼的社会等级和狩猎行为。原始的GWO有一些局限性,比如容易陷入局部最优,收敛速度慢等,所以改进型的GWO可能通过不同的策略来优化这些…...
高级记事本 Sublime Text 下载与使用教程:附百度网盘地址
一、引言 在编程和文本编辑领域,Sublime Text 被誉为一款功能强大的高级记事本。它以其轻量级、高效、多语言支持等特点,深受开发者和文本工作者的喜爱。本文将详细介绍 Sublime Text 的下载方法、安装步骤、使用技巧,并提供百度网盘下载地址…...
4G核心网的演变与创新:从传统到虚拟化的跨越
4G核心网 随着移动通信技术的不断发展,4G核心网已经经历了从传统的硬件密集型架构到现代化、虚拟化网络架构的重大转型。这一演变不仅提升了网络的灵活性和可扩展性,也为未来的5G、物联网(LOT)和边缘计算等技术的发展奠定了基础。…...