当前位置: 首页 > news >正文

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.找到字符串中所有字母异位词

题目&#xff1a; 给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词 的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺序。 示例 1: 输入: s "cbaebabacd", p "abc" 输出: [0,6] 解释: 起始索引等于 0 的子串是 "cb…...

【Python】Python入门——基础语法及顺序语句

Python入门——基础语法及顺序语句 官方文档地址&#xff1a;https://docs.python.org/zh-cn/3/tutorial/index.htmlPython 是一门易于学习、功能强大的编程语言。它提供了高效的高级数据结构&#xff0c;还能简单有效地面向对象编程。Python 优雅的语法和动态类型以及解释型语…...

2.2 反向传播:神经网络如何“学习“?

一、神经网络就像小学生 想象一个刚学算术的小学生&#xff0c;老师每天布置练习题&#xff0c;学生根据例题尝试解题&#xff0c;老师批改后指出错误。神经网络的学习过程与此相似&#xff1a; 输入层&#xff1a;相当于练习题&#xff08;如数字图片&#xff09;输出层&…...

frp-tool,客户端frp命令行工具

在日常开发和运维过程中&#xff0c;端口转发和配置管理是常见的需求。 如果有自己一台服务器&#xff0c;并且已经开放好端口&#xff0c;配置好token后&#xff0c;这个工具一定能帮到你。 今天给大家推荐一款非常好用的frpc命令行工具&#xff0c;它是一个用Python编写的命令…...

【学术投稿-第五届应用数学、建模与智能计算国际学术会议】CSS伪类选择器深度解析:分类、应用与技巧

大会官网&#xff1a;www.cammic.org 大会时间&#xff1a;2025年3月21-23日 大会地点&#xff1a;中国-上海&#xff08;上海大学宝山校区北大门乐乎新楼&#xff09; 简介 第五届应用数学、建模与智能计算&#xff08;CAMMIC 2025&#xff09;将于2025年3月21-23日在中国…...

常用查找算法整理(顺序查找、二分查找、哈希查找、二叉排序树查找、平衡二叉树查找、红黑树查找、B树和B+树查找、分块查找)

常用的查找算法&#xff1a; 顺序查找&#xff1a;最简单的查找算法&#xff0c;适用于无序或数据量小的情况&#xff0c;逐个元素比较查找目标值。二分查找&#xff1a;要求数据有序&#xff0c;通过不断比较中间元素与目标值&#xff0c;将查找范围缩小一半&#xff0c;效率…...

Express 中 res 响应方法详解

一、res.send() 1. 功能 该方法用于发送各种类型的响应&#xff0c;包括字符串、对象、数组、Buffer 等。它会自动设置响应的 Content-Type 头。 2. 示例代码 const express require("express");const app express();app.get("/", (req, res) > {…...

DeepAR:一种用于时间序列预测的深度学习模型

介绍 DeepAR是一种基于递归神经网络&#xff08;RNN&#xff09;的时间序列预测模型&#xff0c;由亚马逊在2017年提出。它特别适用于处理多变量时间序列数据&#xff0c;并能够生成概率预测。DeepAR通过联合训练多个相关时间序列来提高预测性能&#xff0c;从而在实际应用中表…...

权限模型深度解析:RBAC vs ABAC vs PBAC vs TBAC,如何选择最适合的方案?

在数字化系统的安全架构中&#xff0c;权限管理如同一把“隐形钥匙”&#xff0c;既需精准控制访问边界&#xff0c;又要灵活适配复杂多变的业务需求。从传统的角色划分到动态属性策略&#xff0c;从合规驱动的集中管控到任务流程的临时授权&#xff0c;RBAC、ABAC、PBAC、TBAC…...

Windows逆向工程入门之堆栈结构与信息获取

公开视频 -> 链接点击跳转公开课程博客首页 -> ​​​链接点击跳转博客主页 目录 1. 堆栈结构基础 堆栈的主要操作&#xff1a; 2. 代码功能解析 2.1 加载 ntdll.dll 2.2 获取 NtQueryInformationThread 函数指针 2.3 调用 NtQueryInformationThread 获取线程信息…...

【c++初阶】类和对象②默认成员函数以及运算符重载初识

目录 ​编辑 默认成员函数&#xff1a; 构造函数 构造函数的特性&#xff1a; 析构函数&#xff1a; 拷贝构造函数&#xff1a; 1. 拷贝构造函数是构造函数的一个重载形式。 2. 拷贝构造函数的参数只有一个且必须是类类型对象的引用&#xff0c;使用传值方式编译器直接报…...

【做一个微信小程序】校园地图页面实现

前言 上一个教程我们实现了小程序的一些的功能&#xff0c;有背景渐变色&#xff0c;发布功能有的呢&#xff0c;已支持图片上传功能&#xff0c;表情和投票功能开发中&#xff08;请期待&#xff09;。下面是一个更高级的微信小程序实现&#xff0c;包含以下功能&#xff1a;…...

成熟开发者需具备的能力

精业务 • 指深入理解和熟悉所开发软件的业务逻辑和需求。 • 开发者需要明确软件要解决的问题、面向的用户群体以及核心功能等。 • 精业务有助于开发者更好地设计系统架构、编写符合业务需求的代码&#xff0c;并能根据业务变化灵活调整开发计划。 懂原理 • 指掌握编程的基…...

计算机毕业设计--基于深度学习技术(Yolov11、v8、v7、v5)算法的高效人脸检测模型设计与实现(含Github代码+Web端在线体验界面)

基于深度学习技术&#xff08;Yolov11、v8、v7、v5&#xff09;算法的高效人脸检测模型 Yolo算法应用之《基于Yolo的花卉识别算法模型设计》&#xff0c;请参考这篇CSDN作品&#x1f447; 计算机毕业设计–基于深度学习技术&#xff08;Yolov11、v8、v7、v5&#xff09;算法的…...

力扣做题记录 (二叉树)

二叉树 打算先来了解二叉树基础&#xff0c;都是简单题&#xff0c;目的是熟悉代码格式和解题基础思路。 1、二叉树最大深度 二叉树最大深度 方法一、深度搜索 直接用原函数做递归&#xff0c;比较简单 /*** Definition for a binary tree node.* struct TreeNode {* …...

机试刷题_字符串的排列【python】

题目&#xff1a;字符串的排列 from os import dup # # 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可 # # # param str string字符串 # return string字符串一维数组 # class Solution:def backtrack(self,res,state,choi…...

百度智能云—千帆 ModelBuilder API的简单调用(Java)

百度简介 百度&#xff08;Baidu&#xff09;是拥有强大互联网基础的领先AI公司。百度愿景是&#xff1a;成为最懂用户&#xff0c;并能帮助人们成长的全球顶级高科技公司。 “百度”二字&#xff0c;来自于八百年前南宋词人辛弃疾的一句词&#xff1a;众里寻他千百度。这句话…...

unity学习43:子状态机 sub-state machine

目录 1sub-state machine子状态机 1.1 创建 sub-state machine 1.2 sub-state machine 内容 1.3 子状态机的应用 2 子状态机不同于blend tree的嵌套 3 应用例子&#xff1a;若角色拿不同武器的动画设计&#xff0c;可以使用2种方法 3.1 在1个图层layer里&#xff0c;使用…...

Qt MainWindow

文章目录 0. 概述1. 菜单栏 QMenuBar1.1 例子1&#xff0c;使用图形化界面1.2 例子2&#xff0c;使用代码创建1.3 例子3&#xff0c;添加快捷键1.4 例子4&#xff0c;添加子菜单1.5 例子5&#xff0c;添加分割线和图标1.6 内存泄漏问题 2. 工具栏 QToolBar2.1 例子1&#xff0c…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...