前端html js css 基础巩固3
一个这样的首页 滑动显示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');:root {--left-bg-color: rgba(87, 84, 236, 0.7);--right-bg-color: rgba(43, 43, 43, 0.8);--left-btn-hover-color: rgba(87, 84, 236, 1);--right-btn-hover-color: rgba(28, 122, 28, 1);--hover-width: 75%;--other-width: 25%;--speed: 1000ms;}* {box-sizing: border-box;}body {font-family: 'Roboto', sans-serif;height: 100vh;overflow: hidden;margin: 0;}h1 {font-size: 3.5rem;color: #fff;position: absolute;left: 50%;top: 20%;transform: translateX(-50%);white-space: nowrap;}.btn {position: absolute;display: flex;align-items: center;justify-content: center;left: 50%;top: 40%;transform: translateX(-50%);text-decoration: none;color: #fff;border: #fff solid 0.2rem;font-size: 1rem;font-weight: bold;text-transform: uppercase;width: 15rem;padding: 1.5rem;}.split.left .btn:hover {background-color: var(--left-btn-hover-color);border-color: var(--left-btn-hover-color);}.split.right .btn:hover {background-color: var(--right-btn-hover-color);border-color: var(--right-btn-hover-color);}.container {position: relative;width: 100%;height: 100%;background: #333;}.split {position: absolute;width: 50%;height: 100%;overflow: hidden;}.split.left {left: 0;background: url('ps.jpg');background-repeat: no-repeat;background-size: cover;}.split.left::before {content: '';position: absolute;width: 100%;height: 100%;background-color: var(--left-bg-color);}.split.right {right: 0;background: url('xbox.jpg');background-repeat: no-repeat;background-size: cover;}.split.right::before {content: '';position: absolute;width: 100%;height: 100%;background-color: var(--right-bg-color);}.split.right,.split.left,.split.right::before,.split.left::before {transition: all var(--speed) ease-in-out;}.hover-left .left {width: var(--hover-width);}.hover-left .right {width: var(--other-width);}.hover-right .right {width: var(--hover-width);}.hover-right .left {width: var(--other-width);}@media (max-width: 800px) {h1 {font-size: 2rem;top: 30%;}.btn {padding: 1.2rem;width: 12rem;}}</style>
</head><body><div class="container"><div class="split left"><h1>Playstation 5</h1><a href="#" class="btn">Buy Now</a></div><div class="split right"><h1>XBox Series X</h1><a href="#" class="btn">Buy Now</a></div></div><script>const left = document.querySelector('.left')const right = document.querySelector('.right')const container = document.querySelector('.container')left.addEventListener('mouseenter', () => container.classList.add('hover-left'))left.addEventListener('mouseleave', () => container.classList.remove('hover-left'))right.addEventListener('mouseenter', () => container.classList.add('hover-right'))right.addEventListener('mouseleave', () => container.classList.remove('hover-right'))</script>
</body></html>以上是全部的代码
相关文章：
前端html js css 基础巩固3
一个这样的首页 滑动显示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>&l…...
如在下载自己的需要的rmp包呢
下载地址：https://pkgs.org/和https://rpmfind.net/linux/rpm2html/search.php 根基自己的需要进行下载使用。...
Android TextView实现一串文字特定几个字改变颜色
遇到一个需求，让Android端实现给定一个字符串指定下标的几个字颜色与其他字颜色不一致。 主要是用ForegroundColorSpan这个API来传入颜色值，用SpannableString来设置指定索引下标的字的颜色值。 这里通过给定一个输入文字描述框，要求输入指定…...
桃子叶片病害分类检测数据集（猫脸码客 第221期）
桃子叶片病害分类检测数据集 一、引言 桃子作为世界上广泛种植的果树之一，其叶片的健康状况直接关系到果实的产量和品质。然而，桃子叶片易受多种病害的侵袭，这些病害不仅影响叶片的光合作用，还可能导致果实减产、品质下降&#…...
Vue--》掌握自定义依赖引入的最佳实践
在现代前端开发中，vue凭借其灵活性和高效性，已成为开发者们的宠儿，然而随着项目的复杂度提升，如何高效地管理和引入依赖，尤其是自定义引入依赖，成为了许多开发者面临的一大挑战。无论是为了优化加载速度&am…...
repo 命令大全详解（第十四篇 repo overview）
repo overview 命令用于显示当前项目的概览信息，帮助用户快速了解项目的状态和分支信息。 参数分类及解释 基本参数 [--current-branch]: 可选，仅考虑已检出的分支。 示例: repo overview --current-branch [<project>...]: 可选，指定…...
【设计模式】深入理解Python中的抽象工厂设计模式
深入理解Python中的抽象工厂设计模式 设计模式是软件开发中解决常见问题的经典方案，而**抽象工厂模式（Abstract Factory Pattern）**是其中非常重要的一种创建型模式。抽象工厂模式的主要作用是提供一个接口，创建一系列相关或依赖…...
网站建设完成后，多久需要升级迭代一次
网站建设完成后，一般每隔几个月就会进行一次迭代升级。以下是关于网站迭代周期和原因的具体分析： 更新频率：网站在建设完成后，一般每隔几个月就会进行一次迭代升级。这种周期性的更新有助于保持网站的现代感和竞争力。更新目的&a…...
一个整型数组里除了两个数字之外，其他的数字都出现了两次。请写程序找出这两个只出现一次的数字
这里写目录标题 问题详情分析问题代码展示 问题详情 剑指 Offer 56： 一个整型数组 nums 里除两个数字之外，其他数字都出现了两次。请写程序找出这两个只出现一次的数字。要求时间复杂度是O(n)，空间复杂度是O(1)。 示例： 输入&a…...
Vue基本学习2
Vue使用方法 <script src"js/vue.js"></script><script>/*** Mode1:数据模型，负责数据存储(后台业务逻辑/数据库)* View:视图层，负责页面展示(HTML)* View Model(Vue):负责业务逻辑处理(比如Ajax请求等)* view 与 Model 数…...
创作者等级权益说明
创作者等级权益说明 一、如何查看创作者等级权益二、等级权益对照表 一、如何查看创作者等级权益 step1：鼠标移动至头像，显示如下图的浮窗 step2：点击我的等级，即跳转到创作者等级权益页面 图1.1 我的等级 图1.2 创作者等级权益…...
基于SpringBoot+Vue+uniapp微信小程序的校园反诈骗微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念，提供了一套默认的配置，让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…...
统一修改UI库样式的几种方式
统一修改element组件库样式的几种方式。主题 | Element Plus 通过css变量设置 【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式:root {--hc-text-color-placeholder: #5f84a2;--hc-text-color-regular: #fff;--hc-text-color-primary: #fff;--hc-bg-c…...
ICM20948 DMP代码详解（88）
接前一篇文章：ICM20948 DMP代码详解（87） 本回继续对inv_convert_androidSensor_to_control函数进行解析。为了便于理解和回顾，再次贴出inv_convert_androidSensor_to_control函数源码，在EMD-Core\sources\Invn\Devices\Drivers\ICM20948\Icm20948DataBaseControl.c中，如下…...
字节跳动实习生投毒自家大模型细节曝光 影响到底有多大？
10月19日，字节跳动大模型训练遭实习生攻击一事引发广泛关注。据多位知情人士透露，字节跳动某技术团队在今年6月遭遇了一起内部技术袭击事件，一名实习生因对团队资源分配不满，使用攻击代码破坏了团队的模型训练任务。 据悉…...
【路径规划】蚁群算法优化bp神经网络回归预测
摘要 本文提出了一种基于蚁群算法（ACO）优化 BP 神经网络的回归预测方法，用于路径规划中的预测问题。通过蚁群算法优化神经网络的初始权值和阈值，提高了神经网络的训练效率和预测精度。实验结果表明，该方法能够有效提升…...
如何在OceanBase中新增系统变量及应用实践
因为系统变量涉及复杂的工程文件，为防止新增变量操作对软件系统的潜在影响，OceanBase为多数开发者设计了一套高效的编程框架。此框架允许开发者在新增及使用系统变量时，仅需专注于变量定义的细节。具体来说，通过运行一个Python脚本…...
Olap数据处理
一、OLAP 是什么 1. OLAP的定义 OLAP（Online Analytical Processing，联机分析处理）是一种软件技术，它主要专注于复杂的分析操作，帮助分析人员、管理人员或执行人员从多角度对信息进行快速、一致、交互地存取…...
Tailwind Starter Kit 一款极简的前端快速启动模板
Tailwind Starter Kit 是基于TailwindCSS实现的一款开源的、使用简单的极简模板扩展。会用Tailwincss就可以快速入手使用。Tailwind Starter Kit 是免费开源的。它不会在原始的TailwindCSS框架中更改或添加任何CSS。它具有多个HTML元素，并附带了ReactJS、Vue和Angul…...
物联网智能家居环境监测系统
作为物联网工程专业的学生，做一个智能家居非常重要，大家是这个专业的同学可以了解一下，不是这个专业的同学也可以了解一下，毕设可以参考哦。 稍微简单的了解（仅对代码可以自己写的同学） 对于一个零基础的物…...
【DeepSeek-R1代码相似度引擎解密】：3层语义比对机制、Token归一化偏差修正与Jaccard阈值黄金分割点
更多请点击： https://kaifayun.com 第一章：DeepSeek代码重复检测 DeepSeek-R1 模型在训练过程中引入了严格的代码去重机制，其核心目标是消除训练语料中语义等价或高度相似的代码片段，从而提升模型对真实编程模式的学习能力与泛化…...
自制射频功率计：基于AD8317芯片，成本43欧元实现1MHz-10GHz测量
1. 项目概述：为什么我要亲手打造一台射频功率计在无人机和模型飞行器的圈子里，尤其是在我们荷兰FMS Spaarnwoude俱乐部，合规飞行是头等大事。我给我的八轴飞行器加装了云台相机和图传系统，工作在5.8GHz频段。根据本地法规…...
物联网与云技术赋能咖啡后处理：CeriTech 的实时监控系统实践
1. 项目概述：用物联网与云技术重塑咖啡后处理在印尼的咖啡农场里，传统的发酵与干燥过程很大程度上依赖“感觉”和“经验”。一位有经验的农人可能会用手触摸、用鼻子闻，或者根据天气和日照时间来估算发酵是否完成、干燥是否均匀。这种方法固然…...
【DeepSeek事件驱动架构实战指南】：20年架构师亲授5大核心陷阱与避坑清单
更多请点击： https://kaifayun.com 第一章：DeepSeek事件驱动架构全景认知 DeepSeek事件驱动架构（Event-Driven Architecture, EDA）并非单一技术组件的堆叠，而是一种以事件为第一公民、强调松耦合与异步协作的系统设计…...
Gofile批量下载自动化工具：5步实现高效文件管理解决方案
Gofile批量下载自动化工具：5步实现高效文件管理解决方案 【免费下载链接】gofile-downloader Download files from https://gofile.io 项目地址: https://gitcode.com/gh_mirrors/go/gofile-downloader 在当今数字化工作环境中，技术团队经常需要从…...
CentOS服务器上VNC连接失败？手把手教你排查并修复个人端口问题（附重启命令）
CentOS服务器VNC连接故障深度排查指南：从原理到实战当你在深夜赶项目时，突然发现VNC连接不上服务器，那种焦虑感我深有体会。去年参与半导体器件仿真项目时，我也曾被这个问题困扰整整两天。本文将分享一套经过实战检验的排查方法论…...
Performance-Fish：让你的《环世界》后期游戏帧率提升400%的终极优化方案
Performance-Fish：让你的《环世界》后期游戏帧率提升400%的终极优化方案 【免费下载链接】Performance-Fish Performance Mod for RimWorld 项目地址: https://gitcode.com/gh_mirrors/pe/Performance-Fish 你是否曾在《环世界》游戏后期，面对庞大…...
如何优化 MySQL 千万级数据分页查询的性能？
它的本质是：**传统 LIMIT offset, size 在大数据量下性能急剧下降，是因为 MySQL 必须 扫描并丢弃 前 offset 行数据。当 offset 很大时（如 LIMIT 1000000, 10），MySQL 需要读取 1,000,010 行记录，执行 1,000…...
免费解锁AMD Ryzen隐藏性能：SMUDebugTool终极指南
免费解锁AMD Ryzen隐藏性能：SMUDebugTool终极指南 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://gitcod…...
函数的计算原理（附绘图代码）)
从复平面几何到Python代码：可视化理解NumPy中angle()函数的计算原理（附绘图代码）
从复平面几何到Python代码：可视化理解NumPy中angle()函数的计算原理（附绘图代码） 在数学和工程领域，复数不仅是抽象的概念，更是解决实际问题的有力工具。当我们谈论复数68j时，它不仅仅是一个符号组合——在…...