web第三次作业
弹窗案例
1.首页代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>综合案例</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}html,body{width: 100%;height: 100%;}.container{width: 100%;height: 100%;background-color: #f2f1f2;}header{width: 1200px;height: 50px;background-color: #fff;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}header div:nth-of-type(2){display: flex;gap: 20px;cursor: pointer;}header div:nth-of-type(2) span:hover{font-weight: bolder;color: red;}.login-box{display: none; overflow: hidden;width: 300px;height: 200px;background-color: #fff;border: solid 1px orangered;border-radius: 8px;box-shadow: rgba(255,0,0,0.5) 5px 5px 5px;position: absolute;left: 1150px;top: 50px;}.login-box .header{height: 40px;background-color: orangered;display: flex;justify-content: space-between;align-items: center;color: white;cursor: pointer;padding: 0 10px;}</style></head><body><div class="container"><header><div><span>欢迎访问OPENLAB EDU</span></div><div><span id="login">登录</span><span id="register">注册</span></div><div class="login-box" id="login-box"><div class="header" id="header"><span>会员登录</span><span id="close">[关闭]</span></div></div></header></div><script>let _login=document.getElementById("login");let _login_box=document.getElementById("login-box");_login.onclick=function(){_login_box.style.display="block";}let _close=document.getElementById("close");_close.onclick=function(){_login_box.style.display="none";}let _header=document.getElementById("header");document.onmousedown=function(event){let offsetX=event.offsetX;let offsetY=event.offsetY;_header.onmousemove=function(event2){let mouseX=event2.clientX;let mouseY=event2.clientY;let loginX=mouseX-offsetX;let loginY=mouseY-offsetY;if(loginX<=0){loginX=0;}if(loginY<=0){loginY=0;}let iw=window.innerWidth;let lw=getComputedStyle(_login_box).width;lw=parseInt(lw);if(loginX>=(iw-lw)){loginX=iw-lw;}let ih=window.innerHeight;let lh=getComputedStyle(_login_box).height;lh=parseInt(lh);if(loginY>=(ih-lh)){loginY=ih-lh;}_login_box.style.left=loginX+"px";_login_box.style.top=loginY+"px";}}document.onmouseup=function(){_header.onmousemove=null;}</script></body></html>2.展示效果
相关文章：
web第三次作业
弹窗案例 1.首页代码 <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>综合案例</title><st…...
力扣 438.找到字符串中所有字母异位词
题目： 给定两个字符串 s 和 p，找到 s 中所有 p 的 异位词 的子串，返回这些子串的起始索引。不考虑答案输出的顺序。 示例 1: 输入: s "cbaebabacd", p "abc" 输出: [0,6] 解释: 起始索引等于 0 的子串是 "cb…...
【Python】Python入门——基础语法及顺序语句
Python入门——基础语法及顺序语句 官方文档地址：https://docs.python.org/zh-cn/3/tutorial/index.htmlPython 是一门易于学习、功能强大的编程语言。它提供了高效的高级数据结构，还能简单有效地面向对象编程。Python 优雅的语法和动态类型以及解释型语…...
2.2 反向传播：神经网络如何“学习“？
一、神经网络就像小学生 想象一个刚学算术的小学生，老师每天布置练习题，学生根据例题尝试解题，老师批改后指出错误。神经网络的学习过程与此相似： 输入层：相当于练习题（如数字图片）输出层&…...
frp-tool，客户端frp命令行工具
在日常开发和运维过程中，端口转发和配置管理是常见的需求。 如果有自己一台服务器，并且已经开放好端口，配置好token后，这个工具一定能帮到你。 今天给大家推荐一款非常好用的frpc命令行工具，它是一个用Python编写的命令…...
【学术投稿-第五届应用数学、建模与智能计算国际学术会议】CSS伪类选择器深度解析：分类、应用与技巧
大会官网：www.cammic.org 大会时间：2025年3月21-23日 大会地点：中国-上海（上海大学宝山校区北大门乐乎新楼） 简介 第五届应用数学、建模与智能计算（CAMMIC 2025）将于2025年3月21-23日在中国…...
常用查找算法整理（顺序查找、二分查找、哈希查找、二叉排序树查找、平衡二叉树查找、红黑树查找、B树和B+树查找、分块查找）
常用的查找算法： 顺序查找：最简单的查找算法，适用于无序或数据量小的情况，逐个元素比较查找目标值。二分查找：要求数据有序，通过不断比较中间元素与目标值，将查找范围缩小一半，效率…...
Express 中 res 响应方法详解
一、res.send() 1. 功能 该方法用于发送各种类型的响应，包括字符串、对象、数组、Buffer 等。它会自动设置响应的 Content-Type 头。 2. 示例代码 const express require("express");const app express();app.get("/", (req, res) > {…...
DeepAR：一种用于时间序列预测的深度学习模型
介绍 DeepAR是一种基于递归神经网络（RNN）的时间序列预测模型，由亚马逊在2017年提出。它特别适用于处理多变量时间序列数据，并能够生成概率预测。DeepAR通过联合训练多个相关时间序列来提高预测性能，从而在实际应用中表…...
权限模型深度解析：RBAC vs ABAC vs PBAC vs TBAC，如何选择最适合的方案？
在数字化系统的安全架构中，权限管理如同一把“隐形钥匙”，既需精准控制访问边界，又要灵活适配复杂多变的业务需求。从传统的角色划分到动态属性策略，从合规驱动的集中管控到任务流程的临时授权，RBAC、ABAC、PBAC、TBAC…...
Windows逆向工程入门之堆栈结构与信息获取
公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页 目录 1. 堆栈结构基础 堆栈的主要操作： 2. 代码功能解析 2.1 加载 ntdll.dll 2.2 获取 NtQueryInformationThread 函数指针 2.3 调用 NtQueryInformationThread 获取线程信息…...
【c++初阶】类和对象②默认成员函数以及运算符重载初识
目录 编辑 默认成员函数： 构造函数 构造函数的特性： 析构函数： 拷贝构造函数： 1. 拷贝构造函数是构造函数的一个重载形式。 2. 拷贝构造函数的参数只有一个且必须是类类型对象的引用，使用传值方式编译器直接报…...
【做一个微信小程序】校园地图页面实现
前言 上一个教程我们实现了小程序的一些的功能，有背景渐变色，发布功能有的呢，已支持图片上传功能，表情和投票功能开发中（请期待）。下面是一个更高级的微信小程序实现，包含以下功能：…...
成熟开发者需具备的能力
精业务 • 指深入理解和熟悉所开发软件的业务逻辑和需求。 • 开发者需要明确软件要解决的问题、面向的用户群体以及核心功能等。 • 精业务有助于开发者更好地设计系统架构、编写符合业务需求的代码，并能根据业务变化灵活调整开发计划。 懂原理 • 指掌握编程的基…...
计算机毕业设计--基于深度学习技术（Yolov11、v8、v7、v5）算法的高效人脸检测模型设计与实现（含Github代码+Web端在线体验界面）
基于深度学习技术（Yolov11、v8、v7、v5）算法的高效人脸检测模型 Yolo算法应用之《基于Yolo的花卉识别算法模型设计》，请参考这篇CSDN作品👇 计算机毕业设计–基于深度学习技术（Yolov11、v8、v7、v5）算法的…...
力扣做题记录 （二叉树）
二叉树 打算先来了解二叉树基础，都是简单题，目的是熟悉代码格式和解题基础思路。 1、二叉树最大深度 二叉树最大深度 方法一、深度搜索 直接用原函数做递归，比较简单 /*** Definition for a binary tree node.* struct TreeNode {* …...
机试刷题_字符串的排列【python】
题目：字符串的排列 from os import dup # # 代码中的类名、方法名、参数名已经指定，请勿修改，直接返回方法规定的值即可 # # # param str string字符串 # return string字符串一维数组 # class Solution:def backtrack(self,res,state,choi…...
百度智能云—千帆 ModelBuilder API的简单调用（Java）
百度简介 百度（Baidu）是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。 “百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话…...
unity学习43：子状态机 sub-state machine
目录 1sub-state machine子状态机 1.1 创建 sub-state machine 1.2 sub-state machine 内容 1.3 子状态机的应用 2 子状态机不同于blend tree的嵌套 3 应用例子：若角色拿不同武器的动画设计，可以使用2种方法 3.1 在1个图层layer里，使用…...
Qt MainWindow
文章目录 0. 概述1. 菜单栏 QMenuBar1.1 例子1，使用图形化界面1.2 例子2，使用代码创建1.3 例子3，添加快捷键1.4 例子4，添加子菜单1.5 例子5，添加分割线和图标1.6 内存泄漏问题 2. 工具栏 QToolBar2.1 例子1，…...
)
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学（Elliptic Curve Cryptography）是基于椭圆曲线数学理论的公钥密码系统，由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA，ECC在相同安全强度下密钥更短（256位ECC ≈ 3072位RSA…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...
MVC 数据库
MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...
【2025年】解决Burpsuite抓不到https包的问题
环境：windows11 burpsuite:2025.5 在抓取https网站时，burpsuite抓取不到https数据包，只显示： 解决该问题只需如下三个步骤： 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。 在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路：将增量判…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
网站指纹识别
网站指纹识别 网站的最基本组成：服务器（操作系统）、中间件（web容器）、脚本语言、数据厍 为什么要了解这些？举个例子：发现了一个文件读取漏洞，我们需要读/etc/passwd，如…...
【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）
本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程，系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...