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，…...
clawpier爬虫框架：声明式配置应对动态网页抓取难题
1. 项目概述：一个现代化的网络爬虫框架最近在做一个数据采集相关的项目，需要从几个结构比较复杂的网站上抓取一些动态加载的内容。用传统的requestsBeautifulSoup组合，遇到JavaScript渲染的页面就有点力不从心，上Selenium或者Play…...
《玩转OpenClaw内置诊断，建立属于自己的部署运维逻辑》
很少有人知道，OpenClaw自带的原生诊断工具，其实能深入系统底层的每一个环节，精准定位绝大多数部署问题的根源，其准确率远超任何第三方排查工具。这个被绝大多数教程一笔带过的命令，才是真正能让你从部署小白变成运维高…...
MacSweep：专为AI开发者设计的精准清理工具，一键释放数十GB空间
1. 项目概述：一个真正懂AI开发的Mac清理工具如果你是一名在Mac上折腾AI开发的程序员，那你一定对硬盘空间被无声吞噬的痛楚深有体会。今天要聊的这个项目，MacSweep，就是为解决这个痛点而生的。它不是另一个CleanMyMac，也…...
jQuery Mobile 触摸事件详解
jQuery Mobile 触摸事件详解 引言 随着移动互联网的快速发展，移动端网页开发变得越来越重要。jQuery Mobile 是一个开源的移动端网页框架，它提供了一套丰富的UI组件和触摸事件，使得开发者可以轻松地构建出美观、响应迅速的移动端网页。本文将详细介绍 jQuery Mobile 的触摸…...
MPC-BE深度解析：构建专业级Windows媒体播放器的5大核心技术实践
MPC-BE深度解析：构建专业级Windows媒体播放器的5大核心技术实践 【免费下载链接】MPC-BE MPC-BE – универсальный проигрыватель аудио и видеофайлов для операционной системы Windows. 项目…...
炉石传说佣兵战记终极自动化脚本：告别重复操作，专注策略乐趣
炉石传说佣兵战记终极自动化脚本：告别重复操作，专注策略乐趣 【免费下载链接】lushi_script This script is to save your time from Mercenaries mode of Hearthstone 项目地址: https://gitcode.com/gh_mirrors/lu/lushi_script 还在为《炉石传…...
AISMM不是培训，是能力操作系统：奇点大会首发《AISMM实施成熟度评估矩阵》（含6维度22项量化指标）
更多请点击： https://intelliparadigm.com 第一章：AISMM不是培训，是能力操作系统 AISMM（AI-Savvy Maturity Model）并非传统意义的技能速成课程或知识灌输式培训，而是一套可部署、可度量、可迭代的工程化能…...
基于MCP协议构建AI数据桥梁：从原理到TypeScript服务器实战
1. 项目概述：一个为AI应用提供结构化数据访问的桥梁最近在折腾AI应用开发，特别是想让大语言模型（LLM）能更“聪明”地处理我手头那些五花八门的数据源时，遇到了一个典型痛点：模型本身并不直接“理解”数据库…...
从开发者视角感受 Taotoken 标准协议接入的便捷性与低延迟
从开发者视角感受 Taotoken 标准协议接入的便捷性与低延迟 1. 迁移背景与动机 在构建基于大语言模型的应用程序时，开发者常常需要对接多个模型供应商的 API。这通常意味着需要维护多套 SDK 配置、处理不同的认证方式，并在代码中根据供应商切换请求地址…...
欧洲小包成本改写之后跨境卖家如何重做多国发货方案
成本激增下的欧洲市场：跨境卖家的物流新棋局过去一年，欧洲邮政小包成本的显著上调，犹如投入平静湖面的一颗石子，在跨境电商业内激起了层层涟漪。对于长期依赖经济型小包的广大中小卖家而言，这场“成本地震”不仅直接侵…...